一.项目实战
1.创新从模仿开始，咱们的第一综合实例就从模仿网页-360囧图开始，网址：http://xiaohua.360.cn/jiongtu
2.第一个项目采用固定浮动布局，单位为像素。
3.由于录制课程的时候使用1024*768的分辨率，所以项目设定屏幕分辨率为：1024*768
二.学习要点
1.常用快捷方式
2.清除浮动的技巧
3.利用css3的动画实现图片轮播
4.综合应用我们之前学过的知识来构建一个完整的web页面
三.开始
1.创建项目文件夹存放相应的素材、文档等。
将网页另存在桌面上，这样网站的图片素材都会存储在文件夹中。
2.对页面进行结构分析。
3.准备素材。
4.开始编写代码。
四.
1.常用快捷方式
1）乘法 *： ul>li*5
在编辑器中输入缩写代码： ul>li*5 ,然后按下拓展键（默认为tab），即可得到代码片段
2）后代 >： nav>ul>li
3）兄弟 +： div+h3+p*3
4）缩写 ： div>dl>(dt+dd)*3+footer>p
5）自增符号： $
6）缩写 ： #header
7）缩写 ： p.class1.class2.class3
8）缩写 ： ul>.class
9）其他百度
2.清除浮动的技巧
消除子元素浮动对父元素背景/边框/不能被子元素撑开的方法
1） 父元素结尾处增加一空元素div，并清除其浮动。缺点：如果布局复杂，需要增加许多空标签。
2）在父元素定义overflow:hidden（浏览器会自动检查浮动区域的高度）
注：不必理会原理，知道用法即可。缺点：超出部分会被隐藏
3）利用伪类：after 父元素内容后增加空元素，并清除浮动。
3.利用css3的动画实现图片轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lunbo</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
.d0{width:100px;height:100px;margin:100px;
border:1px solid red; position:relative;}
.d1{width:400px;height:100px;position:absolute;
animation:lunbo 5s linear infinite;animation-direction:normal;}
.d2{background:green;}
.d3{background:red;}
.d4{background:blue;}
.d2,.d3,.d4{width:100px;height:100px;float:left;/*display:inline-block;*/}
@keyframes lunbo{
0%{left:0px;}
55%{left:-100px;}
75%{left:-200px;}
100%{left:-300px;}
}
</style>
<body>
<div class="d0"><!--100-->
<div class="d1"><!--400-->
<div class="d2">1</div><!--100-->
<div class="d3">2</div>
<div class="d4">3</div>
<div class="d2">1</div>
</div>
</div>
</body>
</html>
4.综合应用我们之前学过的知识来构建一个完整的web页面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lunbo</title>
</head>
<style type="text/css">
*{margin:0;padding:0;}
.d0{width:100px;height:100px;margin:100px;
border:1px solid red; position:relative;}
.d1{width:400px;height:100px;position:absolute;
animation:lunbo 5s linear infinite;animation-direction:normal;}
.d2{background:green;}
.d3{background:red;}
.d4{background:blue;}
.d2,.d3,.d4{width:100px;height:100px;float:left;/*display:inline-block;*/}
@keyframes lunbo{
0%{left:0px;}
55%{left:-100px;}
75%{left:-200px;}
100%{left:-300px;}
}
</style>
<body>
<div class="d0"><!--100-->
<div class="d1"><!--400-->
<div class="d2">1</div><!--100-->
<div class="d3">2</div>
<div class="d4">3</div>
<div class="d2">1</div>
</div>
</div>
</body>
</html>
style1.css
*{margin:0;padding:0;}
body{ background:whitesmoke;}
ul{list-style-type:none;}
a{text-decoration:none; }
header{height:50px;width:100%;background:url(../img/1.png) repeat-x; }
nav{width:1000px;height:50px;margin:0 auto; }
nav a{color:#fff;}
h1{color:#fff; font:bold 40px 隶书; float:left;margin-left:50px;}
nav li{float:left; font-size:20px; height:50px; line-height:50px;letter-spacing:5px; margin-right:5px;
width:100px; text-align:center;}
/*左浮动部分*/
aside{ position:fixed; left:100px; top:100px;}
/*图片轮播部分*/
.switch{width:1000px; margin:0 auto;background:white;margin-top:15px;
boder:2px solid red; overflow:hidden;}
.swi{width:1000px; float:left;}
.swi1{float:left; text-align:center;margin:10px 15px 10px 15px;}
/*.switch:after{content:""; display:block; clear:both;}*/
.swi1:hover,.swi1:active{
color:orange;
}
.sw{width:4000px;position:relative;animation:swimg 9s linear infinite normal;}
@keyframes swimg{
0%{left:0px;}
5%{left:0px;}
30%{left:-1000px;}
40%{left:-1000px;}
60%{left:-2000px;}
70%{left:-2000px;}
95%{left:-3000px;}
100%{left:-3000px;}
}
.mid{ width:1000px;margin:0 auto;margin-top:15px; }
.mid-nav{height:50px;line-height:50px;font-size:20px;}
.more{ width:1000px;line-height:50px;height:50px;
text-align:center; background:white;font-size:24px;margin:20px auto 20px auto;}
.more a{color:black;}
.all{color:orange;}
.all1{color:black;}
footer{width:100%;background:gray;}
.footer1{width:1000px;
text-align: center; margin:0 auto; background:darkgray;display:flex;}
.footnav{height:180px; border-right:1px solid rgba(60,60,30,0.3)}
.footnav h3{font-weight:normal;color:rgba(30,30,30,0.8);}
.footnav1{}
.footnav2{}
.footnav3{}
.foot-list{}
.foot-list1{}
.foot-list2{}
.footer2{width:100%;height:50px; ;margin:0 auto;background:rgba(50,50,50,0.6);}
.foot{width:1000px;margin:0 auto;color:#c2c2c2;font-size:14px; line-height:50px;}
.maoo{background:white;width:100%;}
.mimg{background:white;width:1000px;}
.mimg li a{color:black;}
.mimg li{text-align:center;float:left;margin:10px 14px 10px 14px;}
原文：http://www.cnblogs.com/liao13160678112/p/6437916.html