网页布局：以 DIV + CSS 引领设计革新，打造高效、美观的网页体验
在当今数字化时代，网页设计与开发不仅是技术的展现，更是艺术与功能的完美融合。其中，网页布局作为核心环节，承载着精准定位功能、提升展示效果、优化用户体验的重任。合理的网页布局，宛如精心编排的舞台，能让用户在纷繁复杂的网络世界中，迅速锁定目标元素，享受流畅且愉悦的浏览之旅。
一、DIV + CSS 布局：网页设计的革新力量
DIV + CSS 布局技术的出现，无疑是网页设计领域的一次重大突破。它摒弃了传统图层、表格布局的诸多弊端，以一种更为灵活、高效、语义化的方式，重新定义了网页的构建方式。
（一）精准定位与灵活调整
DIV + CSS 布局赋予了设计人员前所未有的自由度。通过 <div> 元素划分页面区域，再利用 CSS 进行样式设计和布局控制，开发者可以像编辑 Word 文档一样轻松调整网页中的元素位置、大小、间距等属性。无论是简单的两栏布局，还是复杂的多区域设计，DIV + CSS 都能轻松应对，精准定位每一个元素，确保页面结构清晰、层次分明。
（二）降低维护难度
在传统的布局方式中，一旦页面结构需要调整，往往需要对大量代码进行修改，费时费力。而 DIV + CSS 布局将结构与样式分离，HTML 负责页面结构，CSS 负责视觉表现。这种分离使得维护工作变得异常简单。当需要修改页面样式时，只需调整 CSS 文件，无需改动 HTML 代码，大大降低了维护成本，提高了开发效率。
（三）提升性能表现
网页的加载速度直接影响用户体验。DIV + CSS 布局通过减少冗余代码、优化页面结构，显著提升了网页在服务器中的下载速率及其在网络中的传输速率。轻量化的代码不仅加快了页面加载速度，还降低了服务器的负担，提高了网站的整体性能，让网页在各种网络环境下都能快速响应用户的请求。
二、DIV + CSS 布局方法
（一）DIV 标签控制方法
DIV 标签是网页设计中最常采用的方式，无属性的特点使其需要借助 CSS 代码进行网页布局控制，这样也可以让网页设计更加标准。
示例代码：
在CSS代码控制DIV中，可以在ID选择符中加入css代码，让DIV拥有背景宽度
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#No1, #No2 { background-color: aqua; }
#No3, #No4 { background-color: aquamarine; width: 300px; }
</style>
</head>
<body>
<div id="No1">第一个 div 标签</div>
<div id="No2">第二个 div 标签</div>
<div id="No3">第三个 div 标签</div>
<div id="No4">第四个 div 标签</div>
</body>
</html>（二）元素的样式设置
DIV 在网页布局设计中需要借助 CSS 代码来实现。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#No1 { background-color: blanchedalmond; border: 1px solid #000; width: 200px; }
#No2 { background-color: aquamarine; border: 1px solid salmon; width: 50%; height: 25px; }
</style>
</head>
<body>
<div id="No1">固定 DIV 的宽度和高度</div>
<div id="No2">自适应 DIV 的宽度和高度</div>
</body>
</html>三、常见的网页布局技术分析
（一）上中下布局
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
* { padding: 0px; margin: 0px; }
body { background: #999; }
#head { height: 30px; background: #0CF; font-size: 18px; font-weight: bolder; padding: 10px 0px; }
#content { height: 200px; background: #FFF; }
#footer { height: 30px; background: #0CF; font-size: 18px; font-weight: bolder; padding: 10px 0px; }
</style>
</head>
<body>
<div id="head">网页头部</div>
<div id="content">
<h1>正文</h1>
<h1>正文</h1>
<h1>正文</h1>
</div>
<div id="footer">底端</div>
</body>
</html>
（二）二列固定宽度
DIV 可以多层进行嵌套使用，嵌套的目的是实现更为复杂的页面排版。
示例代码：
实现中部左右固定宽度布局
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#header { height: 30px; background-color: azure; width: 900px; }
#left { width: 400px; height: 200px; float: left; background-color: cornflowerblue; }
#right { width: 500px; height: 200px; float: left; background-color: darksalmon; }
</style>
</head>
<body>
<div id="header">头部</div>
<div id="center">
<div id="left">左</div>
<div id="right">右</div>
</div>
</body>
</html>（三）二列宽度自适应
自适应效果主要通过宽度的百分比来实现。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
#left { width: 40%; height: 200px; float: left; background-color: cornflowerblue; }
#right { width: 60%; height: 200px; float: left; background-color: darksalmon; }
</style>
</head>
<body>
<div id="center">
<div id="left">左</div>
<div id="right">右</div>
</div>
</body>
</html>
（四）二列宽度自适应居中
设置居中只需要一个 margin: auto 即可，在二列分栏中，需要控制使用 DIV 的嵌套设计来完成。可以使用一个居中的 DIV 来作为容器，将二列分栏的 DIV 放置在容器中。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body { background-color: aliceblue; }
#nav { width: 90%; margin: auto; }
#header { height: 30px; background-color: aqua; }
#left { width: 40%; height: 200px; float: left; background-color: cornflowerblue; }
#right { width: 60%; height: 200px; float: left; background-color: darksalmon; }
</style>
</head>
<body>
<div id="nav">
<div id="header">头部</div>
<div id="center">
<div id="left">左</div>
<div id="right">右</div>
</div>
</div>
</body>
</html>
（五）中间三列浮动布局
实现设置三列浮动布局效果。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
body { background-color: aliceblue; }
#nav { width: 900px; margin: auto; }
#header { height: 30px; background-color: aqua; }
#left { width: 200px; height: 200px; float: left; background-color: cornflowerblue; }
#mid { width: 400px; height: 200px; float: left; background-color: hotpink; }
#right { width: 300px; height: 200px; float: left; background-color: darksalmon; }
</style>
</head>
<body>
<div id="nav">
<div id="header">头部</div>
<div id="center">
<div id="left">左</div>
<div id="mid">中</div>
<div id="right">右</div>
</div>
</div>
</body>
</html>
（六）UL + CSS 布局
在上述案例中，导航使用 UL + CSS 在头部使用。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/1.css">
</head>
<body>
<div id="nav">
<div id="header">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">CSDN</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">论坛</a></li>
</ul>
</div>
<div id="center">
<div id="left">左</div>
<div id="mid">中</div>
<div id="right">右</div>
</div>
</div>
</body>
</html>body{ background-color: aliceblue;}
#nav{width: 900px;margin: auto;}
#header{height: 30px;background-color: aqua;}
#center{clear: both;}
#left{ width: 200px;height: 200px;float: left;background-color: cornflowerblue}
#mid{width: 400px;height: 200px;float: left;background-color:hotpink;}
#right{ width: 300px;height: 200px;float: left;background-color: darksalmon}
#header li{ float: left;list-style-type: none;}
#header li a{display: block;padding: 6px 20px; color: #ffaa00; text-decoration: none;}
#header ul{ padding: 0px; margin: 0px;}
#center{clear: both;}
（七）Clear 清除浮动
clear 清除浮动，表示是否允许在某个元素周围有浮动元素。当前面元素有浮动时，会影响后面的元素也产生浮动，也可以使用 clear 来清除该元素的浮动。
（八）绝对定位与相对定位
绝对定位
采用 position: absolute; 对象便开始进行绝对定位，绝对定位主要通过设置对象的 top、right、bottom 和 left 四个方向的边距来实现。一旦设置了绝对定位，它就完全脱离了文档流与浮动模型，独立于其他对象，并且普通流中其他元素的布局就像绝对定位的元素不存在一样。
相对定位
相对定位使得被设置保持元素与其原始位置相对，并不破坏其原始位置的信息。
采用position:absolute;对象便开始进行绝对定位，绝对定位主要通过设置对象的top、right、bottom和left四个方向的边距来实现。一但设置了绝对定位，它就完全脱离了文档流与浮动模型，独立于其他对象，并且普通流中其他元素的布局就像绝对定位的元素不存在一样
由于绝对定位的位置由自身的边距决定，因此会出现一个问题，元素的重叠，这种情况下，CSS允许我们通过设置对象的z-index属性，以设置其重叠的先后顺序，也就是z轴的顺序。
#a,#b,#c,#d{ width: 200px; height: 200px; border: 2px solid #aaaaff; background-color: #ffaa7f;}
#a{ float: left;}
#c{ float: left;}
#b{ position: absolute;
top:80px;
left: 100px;
z-index: 1;
}
#d{ position: absolute;
top: 70px;
left: 160px;
z-index: 0;
}
相对定位
实际上相对定位就是浮动定位与绝对定位的拓展方式。相对定位使得被设置保持元素与其原始位置相对，并不破坏其原始位置的信息
例如，我们将上述b元素设置为相对定位时，他将相对于自身的原始位置进行定位，而其原始的占位信息依然存在，所以c和d继续浮动在b的右侧。
#a,#b,#c,#d{ width: 100px; height: 100px; border: 2px solid #aaaaff;
background-color: #ffaa7f;float: left;}
#b{ position: relative;
top:80px;
left: 100px;
z-index: 1;
}
如果b和c发生了嵌套，那么b和c都同时发生相对定位
<body>
<div id="a">a</div>
<div id="b">b
<div id="c">c</div>
<div id="d">d</div>
</div>
</body>
盒子模型
（九）盒子模型
在 CSS3 中，一个独立的盒子由 content（内容）、padding（内边距）、border（边框）和 margin（外边距）组成。
-
外边距（Margin） 一幅画与另一幅画之间的距离，即一个盒子与另一个盒子之间的距离就是外边距。
-
边框（Border） 网页中，用于分离和隔开不同元素的线（有粗细之分）就是边框。
-
内边距（Padding） 元素和边框之间的距离就是内边距。元素距离边框的远近可以被控制。
-
内容（Content） 盒子里装的东西就是内容，它是网页中最主要的部分。网页中的主要元素，如文字、图像、动画、音视频、表单等，都需要不断输出。
（十）浮动式布局
浮动式网页布局是网页制作中常用的方法。浮动就是对网页元素使用 float 属性，属性值为 left 或 right，浮动后的元素则脱离文档流，呈现出漂浮状态，直到遇到父元素的包含框或是其他浮动元素拦截为止，可以实现良好的布局效果，从而使网页的布局和结构更加丰富、自由、合理。
（十一）清除浮动的方式
-
使用
clear来清除浮动 选择器{ clear: left | right | both; }可以实现：不允许左侧有浮动，不允许右侧有浮动，同时清除左右两侧浮动。 -
使用
overflow属性清除浮动 对某元素应用overflow: hidden;样式来设置，也可以消除浮动对该元素的影响。 -
使用
after伪元素清除浮动 该方法只适用于 IE8.0 及以上版本的浏览器和其他非 IE 浏览器。
（十二）标准流
在没有为网页元素添加 CSS 定位或浮动等属性的情况下，这些元素会自然地按照从上到下的顺序依次显示。标准流是默认的布局模式，适用于单列布局的子页面。在 HTML 代码基础上，CSS 代码需要给出每个 div 盒子里面的 id 选择器的 width、height 和 background-color。通常情况下，页面的整体布局大都采用标准流方式。
（十三）单列布局
<div id="article">
<div id="header">页头部分</div>
<div id="content">正文部分</div>
<div id="footer">页尾部分</div>
</div>（十四）图像小部件
图像小部件可以用来展示图片、图标等元素，增强网页的视觉效果。
四、结语
DIV + CSS 布局技术以其强大的灵活性、高效的维护性、卓越的性能表现和出色的视觉效果，已经成为现代网页设计的主流选择。它不仅取代了传统的布局方式，还为设计人员提供了更广阔的设计空间，让网页设计变得更加简单、高效、富有创意。在未来的网页设计中，DIV + CSS 将继续引领潮流，助力开发者打造更加精美、高效的网页作品，为用户提供更优质的网络体验。
扫一扫
1165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
