項目實戰——仿360囧圖
一.項目實戰css
1.創新從模仿開始，我們的第一綜合實例就從模仿網頁-360囧圖開始，網址：http://xiaohua.360.cn/jiongtuhtml
2.第一個項目採用固定浮動佈局，單位爲像素。css3
3.因爲錄製課程的時候使用1024*768的分辨率，因此項目設定屏幕分辨率爲：1024*768web
二.學習要點瀏覽器
1.經常使用快捷方式編輯器
2.清除浮動的技巧ide
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;}
相關文章
- 1. java仿抖項目實戰(完整)
- 2. Android項目實戰-高仿拉手網
- 3. NDK項目實戰—高仿360手機助手之卸載監聽
- 4. Android項目之仿360手機助手項目
- 5. 360項目-07
- 6. 360項目-10
- 7. 360項目-08
- 8. 360項目-03
- 9. 360項目-06
- 10. 360項目-13
- 更多相關文章...
- • Thymeleaf項目實踐 - Thymeleaf 教程
- • Mozilla 項目 - 瀏覽器信息
- • Docker容器實戰(一) - 封神Server端技術
- • Docker容器實戰(八) - 漫談 Kubernetes 的本質
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. java仿抖項目實戰(完整)
- 2. Android項目實戰-高仿拉手網
- 3. NDK項目實戰—高仿360手機助手之卸載監聽
- 4. Android項目之仿360手機助手項目
- 5. 360項目-07
- 6. 360項目-10
- 7. 360項目-08
- 8. 360項目-03
- 9. 360項目-06
- 10. 360項目-13