相較前面的佈局單一化，簡單小白上手快，本次佈局加入了層疊樣式，以及常見的輸入框和列表的使用，之前都是適應內嵌式的樣式，在本次中改用行內樣式+外部樣式進行樣式與代碼的分離，對小白的學習更有幫助。
準備工作：
軟件 :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;
}
#botton a{
text-decoration: none;
}
#botton a:hover{background-color: rgba(255,0,0,0.5);}
css四行分層佈局:
效果圖如下：
佈局考慮了登錄框+ 層疊菜單+ 輪播臺+ 主體部分+ 底部
頁面較大分兩次截圖：
小夥伴可以試試自己運行一下，看看效果！