静态网页制作（html+css）、css浮动,练习（网页布局），清除浮动

静态网页代码（html+css）

html代码：

	
		
		
		
	
	
		

			
			

				
			
			
			

				

					
首页
					
课程
					
职业规划
				
			
			
			

				
				
			
			
			

				
				qwertyuiop
			
	    
		

			
			

				

					

						
链接1>
						
链接2>
						
链接3>
						
链接4>
						
链接4>
						
链接5>
						
链接6>
						
链接8>
						
链接9>
					
				
				
				

					
我的课程表
					

						

							

								
程序语言设计
								
正在学习-使用对象
							
							

								
程序语言设计
								
正在学习-使用对象
							
							

								
程序语言设计
								
正在学习-使用对象
							
						
						全部课程
					
				
			
		
		
		

			
精品推荐
			

				
jQuery
				
spark
				
MySQL
				
Java
				
JavaScript
			
			修改兴趣
		
		
		

			

				
精品推荐
				查看全部
			
			

				

					

						
						
jQuery实战项目演练
						

							高级 • 1125人在学习
						
					
					

						
						
jQuery实战项目演练
						

							高级 • 1125人在学习
						
					
					

						
						
jQuery实战项目演练
						

							高级 • 1125人在学习
						
					
					

						
						
jQuery实战项目演练
						

							高级 • 1125人在学习
						
					
					

						
						
jQuery实战项目演练
						

							高级 • 1125人在学习
						
					
					

						
						
jQuery实战项目演练
						

							高级 • 1125人在学习
						
					
					

						
						
jQuery实战项目演练
						

							高级 • 1125人在学习
						
					
					

						
						
jQuery实战项目演练
						

							高级 • 1125人在学习
						
					
					

						
						
jQuery实战项目演练
						

							高级 • 1125人在学习
						
					
					

						
						
jQuery实战项目演练
						

							高级 • 1125人在学习
						
					
				
			
		
		
		

			

				

					
					
勤奋是你生命的密码，能译出你一部壮丽的史诗,

					一个有信念者所开发出的力量，大于个只有兴趣者。
					下载app
				
				

					

						
关于网站
						
关于
						
管理团队
						
工作机会
						
客户服务
						
帮助
					
					

						
新手指南
						
如何注册
						
如何选课
						
如何拿到毕业证
						
学分是什么
						
考试未通过怎么办
					
					

						
合作伙伴
						
合作机构
						
合作导师
					
				
			
		
	

css代码：

* {
	margin: 0;
	padding: 0;
}

body {
	background-color: #f3f5f7;
}

li {
	list-style: none;
}

a {
	text-decoration: none;
}

.clearfix:before,.clearfix:after{
	content: "";
	display: table;
}
.clearfix:after{
	clear: both;
}
.clearfix{
	*zoom: 1;
}

.header {
	width: 1200px;
	height: 42px;
	margin: auto;
	margin: 30px auto;
}

.logo {
	float: left;
	width: 198px;
	height: 42px;
}

.nav {
	float: left;
	margin-left: 60px;
}

.nav ul li {
	float: left;
	margin: 0 15px;
}

.nav ul li a {
	display: block;
	height: 42px;
	padding: 0 10px;
	line-height: 42px;
	font-size: 18px;
	color: black;
}

.nav ul li a:hover {
	border-bottom: 2px solid gold;
	color: gold;
}

.search {
	float: left;
	width: 412px;
	height: 42px;
	margin-left: 50px;
}

.search input {
	float: left;
	width: 345px;
	height: 40px;
	border: 1px solid gold;
	border-right: 0;
	color: gray;
	font-size: 14px;
	padding-left: 15px;
}

.search button {
	float: left;
	width: 50px;
	height: 42px;
	border: 0;
	background: url(../img/搜索.jpg);
}

.user {
	display: block;
	float: left;
	line-height: 42px;
	margin-left: 30px;
	font-size: 14px;
	color: gray;
}

.user span {
	display: block;
	float: right;
	width: 100px;
	height: 42px;
}

.banner {
	height: 421px;
	background-color: cornsilk;
}

.banner .w {
	width: 1200px;
	height: 421px;
	margin: auto;
	background: url(../img/大图.jpg) no-repeat top center;
}

.banner .w .subnav {
	float: left;
	width: 190px;
	height: 421px;
	background-color: gold;
}

.subnav ul li {
	height: 45px;
	line-height: 45px;
	padding: 0 20px;
}

.subnav ul li a {
	font-size: 14px;
	color: white;
}

.subnav ul li a span {
	float: right;
}

.subnav ul li a:hover {
	color: skyblue;
}

.course {
	float: right;
	width: 230px;
	height: 300px;
	background-color: cornsilk;
	margin-top: 50px;
}

.course h2 {
	height: 48px;
	background-color: gold;
	text-align: center;
	line-height: 48px;
	font-size: 18px;
	color: white;
}

.bd {
	padding: 0 20px;
}

.bd ul li {
	padding: 12px 0;
	border-bottom: 1px solid gainsboro;
}

.bd ul li p {
	color: gray;
}

.bd .more {
	display: block;
	height: 38px;
	border: 1px solid gold;
	margin-top: 5px;
	text-align: center;
	line-height: 38px;
	color: gold;
	font-size: 16px;
	font-weight: 700;
}

.goods {
	width: 1200px;
	height: 60px;
	margin: auto;
	margin-top: 10px;
	box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.1);
	line-height: 60px;
}

.goods h3 {
	float: left;
	margin-left: 30px;
	font-size: 16px;
}

.goods ul {
	float: left;
	margin-left: 30px;
}

.goods ul li {
	float: left;
}

.goods ul li a {
	color: #000000;
	padding: 0 30px;
	border-left: 1px solid gainsboro;
}

.mod {
	float: right;
	margin-right: 30px;
	font-size: 16px;
	color: #000000;
}

.box{
	margin-top: 30px;
}

.box-hd{
	height: 45px;
	width: 1225px;
	margin: 0 auto;
}

.box-hd h3{
	margin-left: 15px;
	float: left;
	font-size: 20px;
}

.box-hd a{
	float: right;
	font-size: 12px;
	color: gray;
	margin-top: 10px;
	margin-right: 30px;
}

.box-bd ul{
	width: 1225px;
	margin: auto;
}
.box-bd ul li{
	float: left;
	width: 228px;
	height: 270px;
	background-color: cornsilk;
	margin-left: 15px;
	margin-bottom: 15px;
}

.box-bd ul li img{
	width: 100%;
}

.box-bd ul li h4{
	margin: 0 20px 0 25px;
	font-size: 18px;
	font-weight: 400;
}

.box-bd .info{
	padding-top: 20px;
	margin: 0 20px 0 25px;
	font-size: 12px;
	color: gray;
}

.box-bd .info span{
	color: orangered;
}

.footer{
	height: 415px;
	background-color: cornsilk;
}

.footer .t{
	padding-top: 35px;
	
}

.copyleft{
	float: left;
	margin-left: 30px;
}

.copyleft p{
	padding-left: 30px;
	font-size: 12px;
	color: gray;
	margin: 20px 0 15px 0;
}

.copyleft .app{
	margin-left: 30px;
	width: 118px;
	height: 33px;
	border: 1px solid gold;
	text-align: center;
	line-height: 33px;
	color: skyblue;
	font-size: 16px;
}

.linksright{
	float: right;
	margin-right: 30px;
}

.linksright dl{
	float: left;
	margin-left: 100px;
}

.linksright dl dt {
	font-size: 16px;	
	margin-bottom: 5px;
}

.linksright dl dd a{
	font-size: 12px;
	color: #000000;
}

效果图：

传统网页布局的三种方式：普通流（标准流）、浮动、定位

 （1）标准流（普通流 / 文档流）

标准流：标签按照规定好默认方式排列

1.块元素会独占一行，从上往下顺序排列

常用元素： div, hr, p, h1~h6, ul, ol, dl, form, table

2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

常用元素： span, a, i, em等

标准流是最基本的布局方式

浮动（float）：

浮动可以改变元素标签默认的排列方式

浮动最典型的应用：可以让多个块元素在一行内排列显示

网页布局第一准则：多个块元素纵向排列找标准流，多个块元素横向排列找浮动

网页布局的第二准则：先设置盒子大小，之后设置盒子的位置

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

语法格式：

属性值	描述
none	元素不浮动（默认）
left	元素向左浮动
right	元素向右浮动

浮动特性：

1.浮动的元素会脱离标准流

2.浮动的元素会一行内显示并且元素顶部对齐

3.浮动的元素会具有行内块元素的特性

设置了浮动（float）的元素最重要特性

1.脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）

2.浮动的盒子不再保留原先的位置

浮动练习：

练习1：

	
		
		
		
	
	
		

			
左
			
右
		
	

结果图：

练习2：

	
		
		
		
	
	
		

			
1
			
2
			
3
			
4
		
	

结果图：

练习3：

	
		
		
		
	
	
		

			
左
			

				
1
				
2
				
3
				
4
				
5
				
6
				
7
				
8
			
		
	

结果图：

整体网页布局：

	
		
		
		
	
	
		
top
		
banner
		

			

				
1
				
2
				
3
				
4
			
		
		
footer
	

 结果图：

浮动布局注意点：

1.浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2.一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟元素也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

清除浮动：

语法格式：

                选择器{clear:属性值;}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

清除浮动的方法：

1.额外标签法也称为隔墙法，是w3c推荐的做法

额外标签法会在浮动元素末尾添加一个空的标签。

例：

2.父级添加overflow属性

可以给父级添加overflow属性，将其属性值设置为hidden,  auto或scroll

3.父级添加after伪元素

.clearfix:after{
				content: "";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			.clearfix{
				*zoom: 1;
			}

4.父级添加双伪元素

.clearfix:before, .clearfix:after{
				content: "";
				display: table;
			}
			.clearfix:after{
				clear: both;
			}
			.clearfix{
				*zoom: 1;
			}