DIV+CSS层叠式布局（综合篇）

相较前面的布局单一化，简单小白上手快，本次布局加入了层叠样式，以及常见的输入框和列表的使用，之前都是适应内嵌式的样式，在本次中改用行内样式+外部样式进行样式与代码的分离，对小白的学习更有帮助。

准备工作：

软件 :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四行分层布局:

效果图如下：

布局考虑了登录框+ 层叠菜单+ 轮播台+ 主体部分+ 底部

页面较大分两次截图：

小伙伴可以试试自己运行一下，看看效果！

DIV+CSS层叠式布局（综合篇）

猜你喜欢