html5&css&js代码 024 响应式布局示例

一、代码
二、解释

该HTML代码重点在于构建一个带有响应式设计的两栏布局网页，包含页头、导航条、主要内容区（左右两列）和底部区域，并运用CSS样式设置页面元素的布局、颜色、字体、间距等视觉表现，确保在不同屏幕尺寸下网页布局能灵活调整。

一、代码

 <!DOCTYPE html>
<html lang="zh-cn">
   <head>
      <title>网页布局 编程笔记 html5&css&js</title>
      <meta charset="utf-8" />
      <style>
         * {
            /*  */
            box-sizing: border-box;
         }
 
         body {
            font-family: "微软雅黑", sans-serif;
            padding: 10px;
            background: #f1f1f1;
         }
 
         /* 头部标题 */
         .header {
            padding: 30px;
            text-align: center;
            background: white;
         }
 
         .header h1 {
            font-size: 50px;
         }
 
         /* 导航条 */
         .topnav {
            overflow: hidden;
            background-color: #333;
         }
 
         /* 导航条链接 */
         .topnav a {
            float: left;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
         }
 
         /* 链接颜色修改 */
         .topnav a:hover {
            background-color: #ddd;
            color: black;
         }
 
         /* 创建两列 */
         /* Left column */
         .leftcolumn {
            float: left;
            width: 75%;
         }
 
         /* 右侧栏 */
         .rightcolumn {
            float: left;
            width: 25%;
            background-color: #f1f1f1;
            padding-left: 20px;
         }
 
         /* 图像部分 */
         .fakeimg {
            background-color: #aaa;
            width: 100%;
            padding: 20px;
         }
 
         /* 文章卡片效果 */
         .card {
            background-color: white;
            padding: 20px;
            margin-top: 20px;
         }
 
         /* 列后面清除浮动 */
         .row:after {
            content: "";
            display: table;
            clear: both;
         }
 
         /* 底部 */
         .footer {
            padding: 20px;
            text-align: center;
            background: #ddd;
            margin-top: 20px;
         }
 
         /* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
         @media screen and (max-width: 800px) {
            .leftcolumn,
            .rightcolumn {
               width: 100%;
               padding: 0;
            }
         }
 
         /* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
         @media screen and (max-width: 400px) {
            .topnav a {
               float: none;
               width: 100%;
            }
         }
      </style>
   </head>
   <body>
      <div class="header">
         <h1>明月看潮生的网页</h1>
         <p>重置浏览器大小查看效果。</p>
      </div>
 
      <div class="topnav">
         <a href="#">链接1</a>
         <a href="#">链接2</a>
         <a href="#">链接3</a>
         <a href="#" style="float: right">链接4</a>
      </div>
 
      <div class="row">
         <div class="leftcolumn">
            <div class="card">
               <h2>文章标题</h2>
               <h5>2019 年 4 月 17日</h5>
               <div class="fakeimg" style="height: 200px">图片</div>
               <p>一些文本...</p>
               <p>少年软件工程师。不再是一个启蒙的过程，直接向着目标前进！</p>
            </div>
            <div class="card">
               <h2>文章标题</h2>
               <h5>2019 年 4 月 17日</h5>
               <div class="fakeimg" style="height: 200px">图片</div>
               <p>一些文本...</p>
               <p>少年软件工程师。不再是一个启蒙的过程，直接向着目标前进！</p>
            </div>
         </div>
         <div class="rightcolumn">
            <div class="card">
               <h2>关于我</h2>
               <div class="fakeimg" style="height: 100px">图片</div>
               <p>关于我的一些信息..</p>
            </div>
            <div class="card">
               <h3>热门文章</h3>
               <div class="fakeimg"><p>图片</p></div>
               <div class="fakeimg"><p>图片</p></div>
               <div class="fakeimg"><p>图片</p></div>
            </div>
            <div class="card">
               <h3>关注我</h3>
               <p>一些文本...</p>
            </div>
         </div>
      </div>
      <div class="footer">
         <h2>底部区域</h2>
      </div>
   </body>
   <footer style="
            text-align: center;
            margin: 30px;
            font-size: 1.5rem;
            font-weight: bold;
            color: #ffcc00;
        ">
      HTML+CSS+JavaScript编程配套代码 作者：明月看潮生
   </footer>
</html>复制

二、解释

响应式布局，又称为自适应布局，是一种网页设计的技术，用于实现网页在不同设备上的自适应显示。传统的网页设计是基于固定的像素尺寸进行设计的，而响应式布局则利用CSS媒体查询和流式网格布局等技术，根据不同设备的屏幕尺寸和特性来调整网页的布局和样式，以适应不同的屏幕大小和分辨率。响应式布局可以使网页在桌面、平板、手机等不同设备上都能有良好的用户体验，并且减少了开发和维护的工作量。

html5&css&js代码 024 响应式布局示例

html5&css&js代码 024 响应式布局示例

一、代码

二、解释

前端提高篇（102）：jQuery高级方法callbacks、deferred

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

html 无序标签有序标签及表单

CSS字体、行高等其他样式

CSS3新增属性(15个案例代码效果图素材)

基于CSS3媒体查询的响应式旅游网站设计与实现-计算机毕设附源码 12755

H5 CSS3-移动端兼容/调试/视口/flex布局

如何让CSS只在当前组件中起作用

CSS--解决图片变形的方法

前端哥

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

解决npm install 报错 “npm err code 1“

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

JQuery中的load()、$

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html lang="zh-cn">
	<head>
	<title>网页布局编程笔记 html5&css&js</title>
	<meta charset="utf-8" />
	<style>
	* {
	/* */
	box-sizing: border-box;
	}

	body {
	font-family: "微软雅黑", sans-serif;
	padding: 10px;
	background: #f1f1f1;
	}

	/* 头部标题 */
	.header {
	padding: 30px;
	text-align: center;
	background: white;
	}

	.header h1 {
	font-size: 50px;
	}

	/* 导航条 */
	.topnav {
	overflow: hidden;
	background-color: #333;
	}

	/* 导航条链接 */
	.topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	}

	/* 链接颜色修改 */
	.topnav a:hover {
	background-color: #ddd;
	color: black;
	}

	/* 创建两列 */
	/* Left column */
	.leftcolumn {
	float: left;
	width: 75%;
	}

	/* 右侧栏 */
	.rightcolumn {
	float: left;
	width: 25%;
	background-color: #f1f1f1;
	padding-left: 20px;
	}

	/* 图像部分 */
	.fakeimg {
	background-color: #aaa;
	width: 100%;
	padding: 20px;
	}

	/* 文章卡片效果 */
	.card {
	background-color: white;
	padding: 20px;
	margin-top: 20px;
	}

	/* 列后面清除浮动 */
	.row:after {
	content: "";
	display: table;
	clear: both;
	}

	/* 底部 */
	.footer {
	padding: 20px;
	text-align: center;
	background: #ddd;
	margin-top: 20px;
	}

	/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
	@media screen and (max-width: 800px) {
	.leftcolumn,
	.rightcolumn {
	width: 100%;
	padding: 0;
	}
	}

	/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
	@media screen and (max-width: 400px) {
	.topnav a {
	float: none;
	width: 100%;
	}
	}
	</style>
	</head>
	<body>
	<div class="header">
	<h1>明月看潮生的网页</h1>
	<p>重置浏览器大小查看效果。</p>
	</div>

	<div class="topnav">
	<a href="#">链接1</a>
	<a href="#">链接2</a>
	<a href="#">链接3</a>
	<a href="#" style="float: right">链接4</a>
	</div>

	<div class="row">
	<div class="leftcolumn">
	<div class="card">
	<h2>文章标题</h2>
	<h5>2019 年 4 月 17日</h5>
	<div class="fakeimg" style="height: 200px">图片</div>
	<p>一些文本...</p>
	<p>少年软件工程师。不再是一个启蒙的过程，直接向着目标前进！</p>
	</div>
	<div class="card">
	<h2>文章标题</h2>
	<h5>2019 年 4 月 17日</h5>
	<div class="fakeimg" style="height: 200px">图片</div>
	<p>一些文本...</p>
	<p>少年软件工程师。不再是一个启蒙的过程，直接向着目标前进！</p>
	</div>
	</div>
	<div class="rightcolumn">
	<div class="card">
	<h2>关于我</h2>
	<div class="fakeimg" style="height: 100px">图片</div>
	<p>关于我的一些信息..</p>
	</div>
	<div class="card">
	<h3>热门文章</h3>
	<div class="fakeimg"><p>图片</p></div>
	<div class="fakeimg"><p>图片</p></div>
	<div class="fakeimg"><p>图片</p></div>
	</div>
	<div class="card">
	<h3>关注我</h3>
	<p>一些文本...</p>
	</div>
	</div>
	</div>
	<div class="footer">
	<h2>底部区域</h2>
	</div>
	</body>
	<footer style="
	text-align: center;
	margin: 30px;
	font-size: 1.5rem;
	font-weight: bold;
	color: #ffcc00;
	">
	HTML+CSS+JavaScript编程配套代码作者：明月看潮生
	</footer>
	</html>

html5&css&js代码 024 响应式布局示例

html5&css&js代码 024 响应式布局示例

一、代码

二、解释

微信扫一扫：分享