DIV+CSS层叠式布局（综合篇）
相较前⾯的布局单⼀化，简单⼩⽩上⼿快，本次布局加⼊了层叠样式，以及常见的输⼊框和列表的使⽤，之前都是适应内嵌式的样式，在本次中改⽤⾏内样式+外部样式进⾏样式与代码的分离，对⼩⽩的学习更有帮助。
准备⼯作：
div中的div居中软件 :subline text
1 在硬盘上单独建⽴⼀个⽂件夹以保存所有的⽂件
2 ⽂件内还需新建⼀个⽂件夹⽤以连接CSS样式
注意：⽂件后缀名为.htm/.html
样式的后缀名为.css
快捷键：Ctrl+n 新建⽂件
ctrl+s ⽂件另存为
shift +alt +2 分屏
DIV+CSS层叠式布局：
css四⾏分层布局:
HTML代码如下：
<!DOCTYPE html>
<html>
<head>
<title>css四⾏分层布局</title>
<link rel="stylesheet" type="text/css" href="css/index5.css">
</head>
<body>
<div id="container">
<div id="header">
<form action="index" method="post">
<table width="300px"; height="90px"; align="right";>
<tr>
<td align="right">⽤户名：</td>
<td><input type="text" name="fname" value="⽤户名/邮箱"></td>    </tr>
<tr>
<td align="right">密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录" >
<input type="reset" value="重置">
<input type="submit" value="注册">
</td>
</tr>
</table>
</form>
</div>
<div id="gunbo">
<div id="list"><!--层叠式区域-->
<ul class="list_li">
<li><a href="#">⽬录标签</a> </li>
<li><a href="#">⽬录标签</a> </li>
<li><a href="#">⽬录标签</a> </li>
<li><a href="#">⽬录标签</a> </li>
<li><a href="#">⽬录标签</a> </li>
<li><a href="#">⽬录标签</a> </li>
</ul>
</div>
</div>
<div id="main">
<div id="aside1" class="aside">⼀区</div>
<div id="content">⼆区</div>
<div id="aside2" class="aside">三区</div>
</div>
<div id="botton">
<table width="100%"; height="40px";align="right";>
<!--居中对齐-->
<tr align="center";>
<td align="right"><a href="">三根猴⽑标签</a></td>
<td><a href="">三根猴⽑标签</a></td>
<td align="left"><a href="">三根猴⽑标签</a></td>
</tr>
</table>
<p align="center">版权所有为@三根猴⽑</p>
</div>
</div>
</body>
</html>
CSS代码如下：
*{
margin: 0;
padding: 0;/*浏览器初始化*/
}
body{font-size: 14px;}
#container{
width: 1349px;
height: 1024px;
}
#header{
height: 90px;
background-color: #cf9;
margin-bottom: 5px;
}
#gunbo{
height: 400px;
background-color: #fc9;
margin-bottom: 5px;
}
#list{
position: absolute;/*相对⽗类位置叠加*/
margin-left: 50px;
margin-top: 50px;
width: 200px;
height: 300px;
border: 1px solid red;
}
.list_li{
display: block;
width: 100%;
height: 50px;
list-style: none; /*去掉前⾯的⿊点*/
line-height: 50px;
text-align: center;
}
.
list_li li:hover{background-color: rgb(0,0,255);}/*伪类样式浮上为蓝⾊*/ .list_li li a{
text-decoration: none;
color: rgb(255,0,0);
}
#main{
height: 450px;
margin-bottom: 5px;
}
.aside{
float: left;
width: 400px;
height: 450px;
background-color: #ccc;
}
#content{
float: left;
width: 539px;
height: 450px;
background-color: rgba(0,0,255,0.5);
margin-left: 5px;
}
#aside2{
margin-left: 5px;
}
#botton{
height: 70px;
background-color: #cf9;
background-color: #cf9;
}
#botton a{
text-decoration: none;
}
#botton a:hover{background-color: rgba(255,0,0,0.5);}
css四⾏分层布局:
效果图如下：
布局考虑了登录框+ 层叠菜单+ 轮播台+ 主体部分+ 底部
页⾯较⼤分两次截图：
⼩伙伴可以试试⾃⼰运⾏⼀下，看看效果！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。