一.项目实战
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的动画实现图片轮播
lunbo 1231
4.综合应用我们之前学过的知识来构建一个完整的web页面
index.html
仿360囧图
一招制敌
cvbnfdf
ghjtyuj
rtyujk
fghj
cvbnfdf
ghjtyuj
rtyujk
fghj
一招制敌
cvbnfdf
ghjtyuj
rtyujk
fghj
cvbnfdf
ghjtyuj
rtyujk
fghj
一招制敌
cvbnfdf
ghjtyuj
rtyujk
fghj
cvbnfdf
ghjtyuj
rtyujk
fghj
一招制敌
cvbnfdf
ghjtyuj
rtyujk
fghj
cvbnfdf
ghjtyuj
rtyujk
fghj
cvbnfdf
ghjtyuj
rtyujk
fghj
cvbnfdf
ghjtyuj
rtyujk
fghj
cvbnfdf
ghjtyuj
rtyujk
fghj
cvbnfdf
ghjtyuj
rtyujk
fghj
cvbnfdf
ghjtyuj
rtyujk
fghj
cvbnfdf
ghjtyuj
rtyujk
fghj
cvbnfdf
ghjtyuj
rtyujk
fghj
rtyujk
fghj
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;}*/.mimgg{background:white;margin:5px 5px;text-align:center;float:left;margin:10px 14px 10px 14px;}