Day6——DIV+CSS布局

前言：此文章为在校期间老师所授，记录着课堂知识。

布局

把层先建出来

不难看出，分为四个层，先把层创建。

<div id="container">
			
			<div id="Header">
				
				head
				
			</div>
			
			<div id="PageBody">
				
				<div id="SideBar">SideBar</div>
				
				<div id="MainBody">body</div>
				
			</div>
			
			<div id="Footer">
				
				foot
			
			</div>
			
		</div>

然后再建css。

*{
	margin: 0;
	padding: 0;
}

body{
	font-family: "宋体";
	font-size: 20px;
	color: #575757;
	text-align: center;
	
}
#container{
width: 100%;	
	
}
#Header{
	width: 1200px;
	margin: 0 auto;
	height: 150px;
	background-color: antiquewhite;
	
}

#PageBody{
	width: 1200px;
	margin: 0 auto;
	height: 650px;
	background-color: aquamarine;
	

}
#Footer{
	width: 1200px;
	margin: 0 auto;
	height: 150px;
	background-color: rosybrown;
	

}
#SideBar{
	
	border: 1px solid red;
	width: 330px;
	height: 650px;
	padding-left: 10px;
	text-align: left;/* 文字左对齐 */
	float: left;/* 漂浮左面 */
	clear: left;/* 清空漂浮 */
	box-sizing: border-box;
	overflow: hidden;

}
#MainBody{
	
	border: 1px solid red;
	width: 858px;
	height: 650px;
	padding-left: 10px;
	text-align: left;/* 文字左对齐 */
	float: right;/* 漂浮左面 */
	clear: right;/* 清空漂浮 */
	box-sizing: border-box;
	

}

然后就变成这样。

head 里面的ul li

 < div id="Header">
				
				<div id="Menu">
					
					<ul>
						<li>首页</li>
						<li>博客</li>
						<li>设计</li>
						<li>相册</li>
						<li>论坛</li>
						<li>关于</li>
					</ul>
					
				</div>
				
			</div>

此时不加css就是这样：

都竖排显示，并且前面还有小点点。

成品

（就当做应援战双了（？））

本来想一点点记录在博客当中，但老师让一下午慢慢做出来，这过程记录也没什么用，我感觉，也不是新知识，只是应用一下前几天学过的知识而已。

很容易就完成了，完成了也下课了…