9.1 DIV+CSS概述
9.1.1 认识DIV
div标签在Web标准网页中属于块级元素
9.1.2 DIV的宽高设置
9.1.2.1 宽高属性
9.1.2.2 div标签内直接设置宽高
9.1.2.3 div使用选择器设置宽高
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/* 9.1 DIV+CSS概述 */
/* 9.1.1 认识DIV */
/* 9.1.2 DIV的宽高设置 */
/* 9.1.2.1 宽高属性 */
/* 9.1.2.2 div标签内直接设置宽高 */
/* 9.1.2.3 div使用选择器设置宽高 */
.d1{
width: 300px;
height: 100px;
border: #00aaff solid 3px;
}
</style>
</head>
<body>
<div class="d1">设置宽度高度</div>
</body>
</html>
9.1.2.4 div高度的百分比设置问题
/* 9.1.2.4 div高度的百分比设置问题 */
*{
width: 100%;
height: 100%;
}
#d2{
width: 50%;
height: 30%;
border: #00aaff solid 3px;
}
9.2 DIV+CSS的应用
9.2.1 DIV元素的布局技巧
/* 9.2 DIV+CSS的应用 */
/* 9.2.1 DIV元素的布局技巧 */
#d3{
width: 300px;
height: 100px;
border: #00aaff solid 3px;
/* 左右外边距给它设置为自动,这样的话电脑就会自动将剩下的外边距自动进行平均分配 */
margin-left: auto;
margin-right: auto;
}
9.2.2 DIV元素的宽度自适应
/* 9.2.2 DIV元素的宽度自适应 */
*{
margin: 0px;
padding: 0px;
}
#all{
height: 200px;
border: #00aaff solid 3px;
}
#left{
width: 200px;
height: 100px;
border: #aaff00 solid 3px;
float: left;
}
#right{
height: 200px;
border: #00ffaa solid 3px;
margin-left: 200px;
}
9.2.3 DIV内容的居中
/* 9.2.3 DIV内容的居中 */
#d4{
width: 300px;
height: 100px;
border: #00aaff solid 3px;
text-align: center;
/* 使行高和盒子的高度相同,这样就达到了内容垂直居中的目的 */
line-height: 100px;
}
9.2.4 DIV元素的嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例9.10</title>
<style>
.all{
width: 700px;
height: 700px;
border: 2px solid red;
margin: 0px auto;
}
.top{
width: 700px;
height: 100px;
background-color: lightcyan;
}
.main{
width: 700px;
height: 520px;
}
.main .left{
width: 180px;
height: 500px;
background-color: yellow;
float: left;
margin: 10px;
}
.main .right{
width: 480px;
height: 500px;
background-color: lightgreen;
float: left;
margin: 10px;
}
.footer{
width: 700px;
height: 80px;
background-color: lightgrey;
}
</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的典型布局
9.3.1 左中右布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例9.11</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 上中下布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例9.12</title>
<style>
*{
margin: 0px auto;
padding: 0px auto;
font-size: large;
}
.all{
background-color: red;
text-align: center;
width: 700px;
height: 500px;
}
.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.3.3 混合布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>示例9.13</title>
<style>
*{
margin: 0px auto;
padding: 0px auto;
width: 100%;
height: 100%;
}
.all{
border: 2px dashed red;
width: 95%;
height: 100%;
}
.top{
background-color: pink;
width: 100%;
height: 15%;
}
.main{
width: 100%;
height: 75%;
}
.left{
background-color: yellow;
width: 20%;
float: left;
}
.center{
background-color: lightcyan;
width: 60%;
float: left;
}
.right{
background-color: yellow;
}
.footer{
background-color: pink;
width: 100%;
height: 10%;
}
</style>
</head>
<body>
<div class="all">
<div class="top"></div>
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
9.4 综合案例——众成远程教育
1.整体布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>众成远程教育————布局</title>
<style>
*{
margin: 0px auto;
font-family: "宋体";
font-size: 30px;
text-align: center;
font-weight: 700;
}
.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{
width: 200px;
height: 630px;
float: left;
}
.center{
border-left:2px dashed blue;
border-right: 2px dashed blue;
width: 500px;
height: 630px;
float: left;
}
.right{
width: 250px;
height: 630px;
float: left;
}
.footer{
width: 1000px;
height: 60px;
}
</style>
</head>
<body>
<div class="all">
<div class="top"></div>
<div class="main">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
</body>
</html>
2.完整代码：
<!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;
}
.center{
border-left:2px dashed blue;
border-right: 2px dashed blue;
padding-top: 50px;
width: 500px;
height: 580px;
float: left;
}
.right{
padding-left: 20px;
width: 250px;
height: 630px;
float: left;
}
.footer{
width: 1000px;
height: 60px;
font-family: "楷体";
font-size: 18px;
text-align: center;
line-height: 30px;
}
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="center" 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="selecy2">
<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">意向学习方式：
<label for="select2"></label>
</td>
<td>
<select name="select" id="selecy">
<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 />
此网站信息最终解释权©众成远程教育
</div>
</div>
</body>
</html>
