一.項目實戰
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>仿360囧圖</title>
<link rel="stylesheet" type="text/css" href="css/style1.css">
</head>
<body>
<header>
<nav>
<h1>360笑話</h1>
<ul>
<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>
</nav>
</header>
<aside><img src="img/2.jpg"> </aside>
<section class="switch">
<div class="sw">
<ul class="swi">
<li class="swi1"><a href=""><img src="img/11.jpg" alt=""></a><p>一招制敵</p></li>
<li class="swi1"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="swi1"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
</ul>
<ul class="swi">
<li class="swi1"><a href=""><img src="img/21.jpg" alt=""></a><p>一招制敵</p></li>
<li class="swi1"><a href=""><img src="img/22.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/23.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/24.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/25.jpg" alt=""></a><p>fghj</p></li>
<li class="swi1"><a href=""><img src="img/22.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/23.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/24.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/25.jpg" alt=""></a><p>fghj</p></li>
</ul>
<ul class="swi">
<li class="swi1"><a href=""><img src="img/31.jpg" alt=""></a><p>一招制敵</p></li>
<li class="swi1"><a href=""><img src="img/32.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/33.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/34.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/35.jpg" alt=""></a><p>fghj</p></li>
<li class="swi1"><a href=""><img src="img/32.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/33.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/34.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/35.jpg" alt=""></a><p>fghj</p></li>
</ul>
<ul class="swi">
<li class="swi1"><a href=""><img src="img/11.jpg" alt=""></a><p>一招制敵</p></li>
<li class="swi1"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="swi1"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="swi1"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="swi1"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="swi1"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
</ul>
</div>
</section>
<section class="mid">
<div class="mid-nav">
<a href="" class="all">全部</a>
<a href="" class="all1">推薦</a>
<a href="" class="all1">熱門</a>
<a href="" class="all1">內涵</a>
</div>
<div class="maoo">
<ul class="mimg">
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/12.jpg" alt=""></a><p>cvbnfdf</p></li>
<li class="mimgg"><a href=""><img src="img/13.jpg" alt=""></a><p>ghjtyuj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
<li class="mimgg"><a href=""><img src="img/14.jpg" alt=""></a><p>rtyujk</p></li>
<li class="mimgg"><a href=""><img src="img/15.jpg" alt=""></a><p>fghj</p></li>
</ul>
</div>
<div style="clear:both;"></div>
<div class="more"><a href="">點擊加載更多圖片</a></div>
</section>
<div style="clear:both;"></div>
<footer>
<section class="footer1">
<nav class="footnav footnav1">
<h3>輕松生活</h3>
<ul class="foot-list foot-list1">
<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>
</nav>
<nav class="footnav footnav2">
<h3>消磨時間</h3>
<ul class="foot-list foot-list2">
<li><a href="">小說</a></li>
<li><a href="">NBA</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>
<li><a href="">曲藝</a></li>
</ul>
</nav>
<nav class="footnav footnav3">
<h3>消磨時間</h3>
<ul class="foot-list foot-list2">
<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>
</nav>
</section>
<section class="footer2">
<div class="foot">
<a href="">關於我們</a>|
<a href="">廣告</a>|
<a href="">投訴建議</a>|
<a href="">掛馬監測</a>|
<a href="">手機版</a>|
<span class="rights">Copyright @360.cn. ...</span>
<a href="">京ICP證080047號</a>
<a href="">京公網安備11000000006號</a>
</div>
</section>
</footer>
</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;}*/
.mimgg{background:white;margin:5px 5px;text-align:center;float:left;margin:10px 14px 10px 14px;}