利用CSS+DIV进行网页布局

网页布局是网页设计开发工作的重要组成部分，通过合理的网页布局能够实现网页页功能的精准定位，增强网页展示效果，使用户能够在较短的时间内找到目标元素。此外，合理的功能布局、图像搭配可以增强网页视觉表现力，给用户带来强烈的视觉感受，DIV+CSS布局技术可以让用户像编辑Word文档一样调整网页中的元素，同时还可以精准定位网页中的位置，不但降低了网页维护的难度，而且还提高了网页在服务器中的下载速率及其在网

文章共3,268字 · 阅读需要大约11分钟

一键AI生成摘要，助你高效阅读

问答

F2022697486

12600人浏览 · 2023-03-25 17:26:45

F2022697486 · 2023-03-25 17:26:45 发布

1 DIV+CSS布局方法

1.1DIV标签控制方法

DIV标签是网页设计中最常采用的方式，无属性的特点使其需要借助CSS代码进行网页布局控制，这样也可以让网页设计更加标准。

例如在CSS代码控制DIV中，可以在ID选择符中加入css代码，让DIV拥有背景宽度

		<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>

1.2 元素的样式设置

DIV 在网页布局设计中需要借助 css 代码来实现

		<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: 25;}
		</style>
	</head>
	<body>
		<div id="No1">固定DIV的宽度和高度</div>
		<div id="No2">自适应DIV的宽度和高度</div>

常见的网页布局技术分析

上中下布局

<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可以多层进行嵌套使用，嵌套的目的是实现更为复杂的页面排版

下列代码中的center部分为左右结构的布局

实现中部左右固定宽度布局，实现代码如下：

<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>

二列宽度自适应

自适应效果主要通过宽度的百分比来实现

<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放置在容器中

实现设置两列宽度自适应宽度，且整体居中效果，实现代码如下：

<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>
	</body>
</html>

中间三列浮动布局

实现设置三列浮动布局效果，实现代码如下

<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>
	</body>
</html>

UL+CSS布局

在上述案例中导航使用UL+CSS在头部使用

<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>
	</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来清除该元素的浮动。

绝对定位与相对定位

绝对定位

采用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（外边距）组成

1.外边距（Margin）

一幅画与另一幅画之间的距离，即一个盒子与另一个盒子之间的距离就是外边距。

2.边框（Border）

网页中，用于分离和隔开不同元素的线（有粗细之分）就是边框。

3.内边距（Padding）

元素和边框之间的距离就是内边距。元素距离边框的远近可以被控制。

4. 内容（Content）

盒子里装的东西就是内容，它是网页中最主要的部分。网页中的主要元素，如文字、图像、动画、音视频、表单等，都需要不断输出。

浮动式布局

浮动式网页布局是网页制作中常用的方法。浮动就是对网页元素使用float属性,属性值为left或right，浮动后的元素则脱离文档流，呈现出漂浮状态，直到遇到父元素的包含框或是其他浮动元素拦截为止，可以实现良好的布局效果，从而使网页的布局和结构更加丰富、自由、合理。浮动元素会影响标准流中的网页元素，掌握浮动元素盒子模型的计算方法，根据不同的浮动方案灵活设计HTML结构，在CSS中采用浮动法的块元素将重新设置宽度，否则将按照实际大小呈现在网页上

设置了网页元素浮动之后，由于浮动元素不再占用原文档的位置，所以它会对相邻的固定元素产生影响。为了避免浮动对其他元素产生影响，我们要设置命令来清除浮动。

清除浮动的方式通常有三种：

（1）使用 clear 来清除浮动选择器｛clear：left＼right＼both；｝可以实现：不允许左侧有浮动＼不允许右侧有浮动＼同时清除左右两侧浮动。

（2）使用 overflow 属性清除浮动对某元素应用 overflow：hidden；样式来设置，也可以消除浮动对该元素的影响

（3）使用 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>

图像小部件

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/