第九章DIV+CSS布局-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_80528053/article/details/143728890

9.1 DIV+CSS概述

9.1.1 认识DIV

标签在W标准的网页中使用非常频繁，属于块状元素。div标签是双标签，即以<dir></小v>的形式存在，中间可以放置任何内容，包括其他的div标签。但是在没有 Css 的影响下，每个div标签只占据一行，即一行只能容纳一个 div 标签
9.1.2 DIV的宽高设置

9.1.2.1 宽高属性

宽度:width
width: 250px--设置宽值为 250像素。
width:50%--设置宽值为父元素的百分之五十
高度:height
height:250px--设置高值为 250像素。
height:50%--设置高值为父元素的百分之五十

9.1.2.3 div使用选择器设置宽高

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第九章</title>
		<style>
			.di{
				width: 100px;
				height: 80px;
				border: 3px solid seagreen;
			}
			#d2{
				width: 150px;
				height: 100px;
				border: 3px solid seagreen;
			}
		</style>
	</head>
	<body>
		<div class="di">此div宽度100px 高80px</div>
		<div id="d2">此div宽度150px 高100px</div>
	</body>
</html>

9.1.2.4 div高度的百分比设置问题

如果div的宽度设置了百分比，则相对其父元素相应改变宽度。但是div的高度则无法根据百分比相应改变。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第九章</title>
		<style>
			*{
				width: 100%;
				height: 100%;
			}
			.di{
				width: 100px;
				height: 80px;
				border: 3px solid seagreen;
			}
			#d2{
				width: 70%;
				height: 50%;
				border: 3px solid seagreen;
			}
		</style>
	</head>
	<body>
		<div class="di">此div宽度100px 高80px</div>
		<div id="d2">此div宽度70% 高50%</div>
	</body>
</html>

9.2 DIV+CSS的应用

9.2.1 DIV元素的布局技巧

由于用户的计算机显示屏分辨率不同，因此在布局页面时，要充分考虑页面内容的布局宽度情况，并保证页面整体内容在页面居中。一旦内容宽度超过显示宽度，页面将出现水平滚动条。应尽量保证网页只有垂直滚动条，才符合用户的习惯，所以高度不需要考虑，一般都是由页面内容决定网页高度即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第九章</title>
		<style>
			*{
				width: 100%;
				height: 100%;
			}
			.di{
				width: 100px;
				height: 80px;
				border: 3px solid seagreen;
			}
			#d2{
				width: 70%;
				height: 50%;
				border: 3px solid seagreen;
			}
			.d3{
				width: 50%;
				height: 100px;
				border: 3px solid seagreen;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</head>
	<body>
		<div class="di">此div宽度100px 高80px</div>
		<div id="d2">此div宽度70% 高50%</div>
		<div class="d3">div元素居中</div>
	</body>
</html>

9.2.2 DIV元素的宽度自适应

有时会用到浮动效果，实现DIV元素的宽度自适应。宽度自适应是指两个并排的div其中左边的 div为固定宽度，右边div则根据浏览器的宽度自动调整，这种用法常用于文章列表和文章内容的页面布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第九章</title>
		<style>
			*{
				width: 100%;
				height: 100%;
			}
			.all{
				height: 200px;
				border: 2px solid crimson;
			}
			.left{
				width: 200px;
				height: 100px;
				float: left;
				border: 2px solid greenyellow;
			}
			.right{
				margin-left: 200px;
				background-color: aqua;
				height: 100%;
			}
			/* .di{
				width: 100px;
				height: 80px;
				border: 3px solid seagreen;
			}
			#d2{
				width: 70%;
				height: 50%;
				border: 3px solid seagreen;
			}
			.d3{
				width: 50%;
				height: 100px;
				border: 3px solid seagreen;
				margin-left: auto;
				margin-right: auto;
			} */
		</style>
	</head>
	<body>
		<!-- <div class="di">此div宽度100px 高80px</div>
		<div id="d2">此div宽度70% 高50%</div>
		<div class="d3">div元素居中</div> -->
		<div class="all">
			<div class="left">左边DIV</div>
			<div class="right">右边DIV宽度自适应</div>
		</div>
	</body>
</html>

9.2.3 DIV内容的居中

平时说的 div 内容居中，只是保持div内容的水平居中。但是很多网站需要用到的是水平和垂直居中。这里用行高(line-height)属性来实现，当行高的值等于容器的高度值，内容便垂直居中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第九章</title>
		<style>
			/* .di{
				width: 100px;
				height: 80px;
				border: 3px solid seagreen;
			}
			#d2{
				width: 70%;
				height: 50%;
				border: 3px solid seagreen;
			}
			.d3{
				width: 50%;
				height: 100px;
				border: 3px solid seagreen;
				margin-left: auto;
				margin-right: auto;
			} */
			/* *{
				width: 100%;
				height: 100%;
			}
			.all{
				height: 200px;
				border: 2px solid crimson;
			}
			.left{
				width: 200px;
				height: 100px;
				float: left;
				border: 2px solid greenyellow;
			}
			.right{
				margin-left: 200px;
				background-color: aqua;
				height: 100%;
			} */
			
			#d4{
				width: 300px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				border: 2px solid greenyellow;
			}
		</style>
	</head>
	<body>
		<!-- <div class="di">此div宽度100px 高80px</div>
		<div id="d2">此div宽度70% 高50%</div>
		<div class="d3">div元素居中</div> -->
		<!-- <div class="all">
			<div class="left">左边DIV</div>
			<div class="right">右边DIV宽度自适应</div>
		</div> -->
		<div id="d4">DIV内容居中</div>
	</body>
</html>

9.2.4 DIV元素的嵌套

传统的表格布局中，搜索引擎如果遇到多层表格嵌套时，可能抓取不到3层以上的内容，或者会跳过嵌套的内容直接放弃整个页面。
而 DIV+CSS布局则不会存在这样的问题，为了实现复杂的布局结构，div元素也需要互相嵌套。但在布局页面时尽量少嵌套，否则将影响浏览器对代码的解析速度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第九章</title>
		<style>
			.all{
				width: 700px;
				width: 700px;
				border: 2px solid red;
				margin: 0px auto;
			}
			.top{
				width: 700px;
				height: 100px;
				background-color: lightcyan;
			}
			.main{
				width: 700px;
				height: 520px;
			}
			.left{
				width: 180px;
				height: 500px;
				background-color: yellow;
				float: left;
				margin: 10px;
			}
			.right{
				width: 480px;
				height: 500px;
				background-color: lightgreen;
				float: left;
				margin: 10px;
			}
			.footer{
				width: 700px;
				height: 80px;
				background-color: lightgray;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top"></div>
			<div class="main">
				<div class="left"></div>
				<div class="right"></div>
			</div>
			<div class="footer"></div>
		</div>
	</body>
</html>

9.3 DIV+CSS的典型布局

设计者为了让页面外观与结构分离，就要用CSS样式来规范布局。使用CSS样式可以让代码更加简洁和结构化，使站点的访问和维护更加容易。
网页设计的第一步是版面布局的设计。通过前面的学习，我们已经对页面布局的技巧有了基本理解。本节将结合前面知识，展示目前较为常用的CSS布局样式:

9.3.1 左中右布局

左中右布局在网页设计时最为常用，即div-let 是导航菜单，div-main是视觉集中点，放置主要内容，div-right 是表单或链接等。而左中右三个区域一并被包含在一个大的 div-all中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第九章</title>
		<style>
			*{
				margin: 10px auto;
				padding: 0px auto;
				font-size: large;
			}
			.all{
				background-color: red;
				width: 700px;
				height: 500px;
			}
			.left,.main,.right{
				text-align: center;
				height: 480px;
				line-height: 480px;
				float: left;
			}
			.left{
				background-color: antiquewhite;
				width: 150px;
			}
			.main{
				background-color: lightcyan;
				width: 400px;
			}
			.right{
				background-color: antiquewhite;
				width: 150px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="left">导航菜单栏</div>
			<div class="main">视觉集中区，主要内容</div>
			<div class="right">表单或链接</div>
		</div>
	</body>
</html>

9.3.2 上中下布局

上中下布局符合许多网站共同的特点，即div-top是导航或者横幅广告、.v-main 是视觉集中点，放置主要内容，div-footer是版权信息等。而上中下三个区域
一并被包含在一个大的div-all中。


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第九章</title>
		<style>
			*{
				margin: 10px auto;
				padding: 0px auto;
				font-size: large;
			}
			.all{
				background-color: red;
				width: 700px;
				height: 500px;
				text-align: center;
			}
			.top{
				background-color: antiquewhite;
				width: 680px;
				height: 80px;
				line-height: 80px;
			}
			
			.main{
				background-color: lightcyan;
				width: 680px;
				height: 340px;
				line-height: 340px;
			}
			.footer{
				background-color: antiquewhite;
				width: 680px;
				height: 80px;
				line-height: 80px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">导航菜单栏</div>
			<div class="main">视觉集中区，主要内容</div>
			<div class="footer">表单或链接</div>
		</div>
	</body>
</html>

9.4 综合案例——众成远程教育


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>众成远程教育</title>
		<style>
			*{
				margin: 0px auto;
				
			}
			.all{
				
				width: 1000px;
				height: 840px;
				background-image: url(img/9-bg.jpg);
			}
			.top{
				
				width: 1000px;
				height: 150px;
				
			}
			
			.main{
				background-color: aliceblue;
				width: 1000px;
				height: 630px;
				
			}
			.left{
				padding-top: 30px;
				padding-left: 20px;
				width: 200px;
				height: 570px;
				float: left;
				line-height: 60px;
			}
			.right{
				width: 250px;
				height: 630px;
				float: left;
				padding-left: 20px;
			}
			.center{
				border-left: 2px dashed blue;
				border-right: 2px dashed blue;
				width: 500px;
				height: 580px;
				float: left;
				padding-top: 50px;
			}
			.footer{
				width: 1000px;
				height: 60px;
				text-align: center;
				line-height: 30px;
				font-family: "楷体";
				font-size: 18px;
			}
			a,span{
				color: red;
				font-weight: 700;
				text-align: center;
			}
			p{
				font-family: "黑体";
				font-weight: 700px;
				color: brown;
				font-size: 28px;
				text-align: center;
			}
			table{
				font-family: "黑体";
				font-weight: 700px;
				color: blue;
				font-size: 20px;
				line-height: 55px;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="top">
				<img src="img/9-logo.jpg" width="708px" height="150px"/>
			</div>
			<div class="main">
				<div class="left">
					<p><img src="img/but2.jpg"/></p>
					<p><img src="img/but3.jpg"/></p>
					<p><img src="img/but4.jpg"/></p>
					<p><img src="img/but5.jpg"/></p>
					<p>相关信息</p>
					<a href="#">4大学历提升方案</a><br />
					<a href="#">新报考政策解读击</a><br />
					<a href="#">6 大类专业报考指南</a><br />
					<a href="#">更多信息请点击</a>
				</div>
				<div class="center">
					<p>入学报名表</p>
					<form id="form2" name="form2" method="post" action="">
						<table width="400" border="0" align="cneter" cellpadding="0" cellspacing="0">
							<tr>
								<td width="158" align="right">姓名：<label for="textfield"></label></td>
								<td width="242"><input type="text" name="textfield" id="textfield"/></td>
							</tr>
							<tr>
								<td align="right">联系电话：</td>
								<td><input type="text" name="textfield2" id="textfield2"/></td>
							</tr>
							<tr>
								<td align="right">邮箱：</td>
								<td><input type="text" name="textfield3" id="textfield3"/></td>
							</tr>
							<tr>
								<td align="right">资料邮寄地址：</td>
								<td><input type="text" name="textfield4" id="textfield4"/></td>
							</tr>
							<tr>
								<td align="right">最高学历：</td>
									<td><select name="select2" id="select2">
									<option>大学本科</option>
									<option>大专</option>
									<option>高中</option>
									<option>初中</option>
									<option>小学</option>
									</select>
								</td>
							</tr>
							<tr>
								<td align="right">选择的课程：</td>
								<td><input type="text" name="textfield6" id="textfield6"/></td>
							</tr>
							<tr>
								<td align="right">意向学习方式：</td>
								<td><label for="select2"></label></td>
								<td>
									<select name="select" id="select">
										<option>网络授课</option>
										<option>周末班</option>
										<option>全日制</option>
									</select>
								</td>
							</tr>
							<tr>
								<td colspan="2" align="center">
									<input type="image" name="imageField" id="imageField" src="img/but1.jpg"/>
								</td>
							</tr>
						</table>
					</form>
				</div>
				<div class="right">
					<img src="img/pho1.jpg"/>
					<img src="img/pho2.jpg"/>
					<img src="img/pho3.jpg"/>
					<img src="img/pho4.jpg"/>
				</div>
			</div>
			<div class="footer">
				<span>免费电话：</span>400-XXX-XXX(18条线)||
				<span>(北京校区)</span>北京路XX大厦一楼0000号；||
				<span>(上海校区)</span>上海路XX科技园7栋9999号<br />
				此网站信息最终解释权&copy;众成远程教育
			</div>
		</div>
	</body>
</html>