html5--項目實戰-仿360囧圖
html5--項目實戰-仿360囧圖
實例：
代碼css
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>仿360囧途</title> 6 <link rel="stylesheet" type="text/css" href="css/f360.css"> 7 </head> 8 <body> 9 <header> 10 <nav> 11 <h1>360笑話</h1> 12 <ul> 13 <li><a href="#">首頁</a></li> 14 <li><a href="#">精選</a></li> 15 <li><a href="#">囧圖</a></li> 16 <li><a href="#">視頻</a></li> 17 <li><a href="#">導姐</a></li> 18 <li><a href="#">娛聞</a></li> 19 </ul> 20 </nav> 21 </header> 22 <aside><img src="img/fixed.jpg" alt=""></aside> 23 <section class="switch"> 24 <div class="sw"> 25 <ul class="swi"> 26 <li class="swi1"><a href=""><img src="img/p1.jpg" alt=""></a><p>一招制敵</p></li> 27 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麥霸的鮮爲人知的一面</p></li> 28 <li class="swi1"><a href=""><img src="img/s2.jpg" alt=""></a><p>每一個妹子內心都有夢想</p></li> 29 <li class="swi1"><a href=""><img src="img/s3.jpg" alt=""></a><p>妹子把糉子的棗藏哪了</p></li> 30 <li class="swi1"><a href=""><img src="img/s4.jpg" alt=""></a><p>妹子我來餵你吧</p></li> 31 <li class="swi1"><a href=""><img src="img/s5.jpg" alt=""></a><p>讓我辨別下是否有凶兆</p></li> 32 <li class="swi1"><a href=""><img src="img/s7.jpg" alt=""></a><p>原來這纔是正解</p></li> 33 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麥霸的鮮爲人知的一面</p></li> 34 <li class="swi1"><a href=""><img src="img/s8.jpg" alt=""></a><p>只想安靜的吃個飯而已</p></li> 35 </ul> 36 <ul class="swi"> 37 <li class="swi1"><a href=""><img src="img/p21.jpg" alt=""></a><p>一招制敵</p></li> 38 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麥霸的鮮爲人知的一面</p></li> 39 <li class="swi1"><a href=""><img src="img/s2.jpg" alt=""></a><p>每一個妹子內心都有夢想</p></li> 40 <li class="swi1"><a href=""><img src="img/s3.jpg" alt=""></a><p>妹子把糉子的棗藏哪了</p></li> 41 <li class="swi1"><a href=""><img src="img/s4.jpg" alt=""></a><p>妹子我來餵你吧</p></li> 42 <li class="swi1"><a href=""><img src="img/s5.jpg" alt=""></a><p>讓我辨別下是否有凶兆</p></li> 43 <li class="swi1"><a href=""><img src="img/s7.jpg" alt=""></a><p>原來這纔是正解</p></li> 44 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麥霸的鮮爲人知的一面</p></li> 45 <li class="swi1"><a href=""><img src="img/s8.jpg" alt=""></a><p>只想安靜的吃個飯而已</p></li> 46 </ul> 47 <ul class="swi"> 48 <li class="swi1"><a href=""><img src="img/p31.jpg" alt=""></a><p>一招制敵</p></li> 49 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麥霸的鮮爲人知的一面</p></li> 50 <li class="swi1"><a href=""><img src="img/s2.jpg" alt=""></a><p>每一個妹子內心都有夢想</p></li> 51 <li class="swi1"><a href=""><img src="img/s3.jpg" alt=""></a><p>妹子把糉子的棗藏哪了</p></li> 52 <li class="swi1"><a href=""><img src="img/s4.jpg" alt=""></a><p>妹子我來餵你吧</p></li> 53 <li class="swi1"><a href=""><img src="img/s5.jpg" alt=""></a><p>讓我辨別下是否有凶兆</p></li> 54 <li class="swi1"><a href=""><img src="img/s7.jpg" alt=""></a><p>原來這纔是正解</p></li> 55 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麥霸的鮮爲人知的一面</p></li> 56 <li class="swi1"><a href=""><img src="img/s8.jpg" alt=""></a><p>只想安靜的吃個飯而已</p></li> 57 </ul> 58 <ul class="swi"> 59 <li class="swi1"><a href=""><img src="img/p1.jpg" alt=""></a><p>一招制敵</p></li> 60 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麥霸的鮮爲人知的一面</p></li> 61 <li class="swi1"><a href=""><img src="img/s2.jpg" alt=""></a><p>每一個妹子內心都有夢想</p></li> 62 <li class="swi1"><a href=""><img src="img/s3.jpg" alt=""></a><p>妹子把糉子的棗藏哪了</p></li> 63 <li class="swi1"><a href=""><img src="img/s4.jpg" alt=""></a><p>妹子我來餵你吧</p></li> 64 <li class="swi1"><a href=""><img src="img/s5.jpg" alt=""></a><p>讓我辨別下是否有凶兆</p></li> 65 <li class="swi1"><a href=""><img src="img/s7.jpg" alt=""></a><p>原來這纔是正解</p></li> 66 <li class="swi1"><a href=""><img src="img/s1.jpg" alt=""></a><p>麥霸的鮮爲人知的一面</p></li> 67 <li class="swi1"><a href=""><img src="img/s8.jpg" alt=""></a><p>只想安靜的吃個飯而已</p></li> 68 </ul> 69 </div> 70 </section> 71 <section class="mid"> 72 <div class="midnav"> 73 <a href="" class="all">所有</a> 74 <a href="">推薦</a> 75 <a href="">熱門</a> 76 <a href="">內涵</a> 77 </div> 78 <div class="more"> 79 <a href="">點擊加載更多圖片</a> 80 </div> 81 </section> 82 <div class="mid"> 83 <div class="mid-nav"> 84 <a href="" class="all" style="color: orange">所有</a> 85 <a href="">推薦</a> 86 <a href="">熱門</a> 87 <a href="">內涵</a> 88 </div> 89 <div id="main"> 90 <ul class="mimg "> 91 <li> 92 <a href=""> 93 <img src="img/t01e9dcc801f3b3c6ec.jpg" alt="妹子你回頭，跟你說點事"> 94 <p>妹子你回頭，跟你說點事</p> 95 </a> 96 </li> 97 </li> 98 <li> 99 <a href=""> 100 <img src="img/t01ad56ca632896bdcb.jpg" alt="這樣吃會消化不良的"> 101 <p>這樣吃會消化不良的</p> 102 </a> 103 </li> 104 <li> 105 <a href=""> 106 <img src="img/t0154db49ae752416fa.jpg" alt="真是個不拘小節的妹子"> 107 <p>真是個不拘小節的妹子</p> 108 </a> 109 </li> 110 <li> 111 <a href=""> 112 <img src="img/t010906de779e161557.jpg" alt="羨慕那隻豬"> 113 <p>羨慕那隻豬</p> 114 </a> 115 </li> 116 <li> 117 <a href="d"> 118 <img src="img/t013835a8b868e1a8a1.jpg" alt="妹子，你手放哪兒了？"> 119 <p>妹子，你手放哪兒了？</p> 120 </a> 121 </li> 122 <li> 123 <a href=""> 124 <img src="img/t019fecc6bf3b299f3f.jpg" alt="誰能把筆拿開！"> 125 <p>誰能把筆拿開！</p> 126 </a> 127 </li> 128 <li> 129 <a href=""> 130 <img src="img/t01bbb9d4b9730cb927.jpg" alt="這叫痛並快樂着"> 131 <p>這叫痛並快樂着</p> 132 </a> 133 </li> 134 <li> 135 <a href=""> 136 <img src="img/t01878bf50603df8cf9.jpg" alt="我這手法對嗎？"> 137 <p>我這手法對嗎？</p> 138 </a> 139 </li> 140 <li> 141 <a href=""> 142 <img src="img/t017090ab205397ae73.jpg" alt="今天這臥鋪買對了"> 143 <p>今天這臥鋪買對了</p> 144 </a> 145 </li> 146 <li> 147 <a href=""> 148 <img src="img/t01665e60d5cca843cf.jpg" alt="啊呀，姐的蛋蛋呢"> 149 <p>啊呀，姐的蛋蛋呢</p> 150 </a> 151 </li> 152 <li> 153 <a href=""> 154 <img src="img/t01d67de6296364e96b.jpg" alt="就喜歡乳臭未乾的妹妹"> 155 <p>就喜歡乳臭未乾的妹妹</p> 156 </a> 157 </li> 158 <li> 159 <a href=""> 160 <img src="img/t0134f57159102d2a54.jpg" alt="姑娘這是洗泡泡浴吶"> 161 <p>姑娘這是洗泡泡浴吶</p> 162 </a> 163 </li> 164 <li> 165 <a href=""> 166 <img src="img/t01c0db71ad3effb8a5.jpg" alt="不摸腿根本無法開車"> 167 <p>不摸腿根本無法開車</p> 168 </a> 169 </li> 170 <li> 171 <a href=""> 172 <img src="img/t01fc261d409c9d603e.jpg" alt="男生當教練的當心機"> 173 <p>男生當教練的當心機</p> 174 </a> 175 </li> 176 <li> 177 <a href=""> 178 <img src="img/t01b5f40006f291f226.jpg" alt="熊孩子理想有點長"> 179 <p>熊孩子理想有點長</p> 180 </a> 181 </li> 182 <li> 183 <a href=""> 184 <img src="img/t01e9dcc801f3b3c6ec.jpg" alt="妹子你回頭，跟你說點事"> 185 <p>妹子你回頭，跟你說點事</p> 186 </a> 187 </li> 188 </li> 189 <a href=""> 190 <img src="img/t01ad56ca632896bdcb.jpg" alt="這樣吃會消化不良的"> 191 <p>這樣吃會消化不良的</p> 192 </a> 193 </li> 194 </ul> 195 </div> 196 <div class="more"> 197 <a href="">點擊加載更多圖片</a> 198 </div> 199 </div> 200 <footer> 201 <section class="footer1"> 202 <nav class="footnav footnav1"> 203 <h3>輕鬆生活</h3> 204 <ul class="foot-list foot-list1"> 205 <li><a href="">星座運程</a></li> 206 <li><a href="">周公解夢</a></li> 207 <li><a href="">美女圖庫</a></li> 208 <li><a href="">彩票開獎</a></li> 209 <li><a href="">旅遊景點</a></li> 210 <li><a href="">心理測試</a></li> 211 </ul> 212 </nav> 213 <nav class="footnav footnav2"> 214 <h3>消磨時間</h3> 215 <ul class="foot-list foot-list2"> 216 <li><a href="">小說</a></li> 217 <li><a href="">NBA</a></li> 218 <li><a href="">八卦</a></li> 219 <li><a href="">交友</a></li> 220 <li><a href="">新聞</a></li> 221 <li><a href="">軍事</a></li> 222 <li><a href="">時尚</a></li> 223 <li><a href="">曲藝</a></li> 224 </ul> 225 </nav> 226 <nav class="footnav footnav3"> 227 <h3>遊戲大全</h3> 228 <ul class="foot-list foot-list3"> 229 <li><a href="">連連看</a></li> 230 <li><a href="">棋牌</a></li> 231 <li><a href="">雙人遊戲</a></li> 232 <li><a href="">休閒遊戲</a></li> 233 <li><a href="">射擊遊戲</a></li> 234 <li><a href="">三國遊戲</a></li> 235 </ul> 236 </nav> 237 </section> 238 <section class="footer2"> 239 <div class="foot"> 240 <a href="">關於咱們</a> | 241 <a href="">廣告合做</a>| 242 <a href="">投訴建議</a> | 243 <a href="">掛馬監測</a> | 244 <a href="">手機版</a> | 245 <span class="rights">Copyright ©360.cn. ...</span> 246 <a href="">京ICP證080047號</a> 247 <a href="">京公網安備110000000006號</a> 248 </div> 249 </section> 250 </footer> 251 </body> 252 </html>
1 @charset "utf-8"; 2 /* CSS Document */ 3 *{ 4 margin: 0; 5 padding: 0; 6 } 7 8 body{ 9 background: rgba(20,20,20,0.2); 10 } 11 12 ul{ 13 list-style-type: none; 14 } 15 16 a{ 17 /* color: #fff;*/ 18 text-decoration: none; 19 } 20 21 header{ 22 height: 50px; 23 width: 100%; 24 background: url(../img/bj.png) repeat-x; 25 } 26 27 nav{ 28 width: 1000px; 29 height: 50px; 30 margin: 0 auto; 31 /* background: #AD6162;*/ 32 } 33 34 nav a{ 35 color: #fff; 36 } 37 38 39 h1{ 40 color: #fff; 41 font: bold 40px 隸書; 42 float: left; 43 margin-left: 50px; 44 } 45 46 nav li{ 47 float: left; 48 font-size: 20px; 49 height: 50px; 50 line-height: 50px; 51 letter-spacing: 5px; 52 margin-right: 5px; 53 /* background: red;*/ 54 width: 100px; 55 text-align: center; 56 } 57 58 /***********************第二課***********************/ 59 aside{ 60 position:fixed; 61 left: 100px; 62 top:100px; 63 } 64 65 .switch{ 66 width: 1000px; 67 margin: 0 auto; 68 background: #fff; 69 overflow: hidden; 70 margin-top: 15px; 71 } 72 73 .swi{ 74 width: 1000px; 75 float: left; 76 } 77 78 /* 79 .switch:after{ 80 content: "";display: block;clear: both; 81 } 82 */ 83 84 .swi1{ 85 text-align: center; 86 float:left; 87 margin: 10px 15px 10px 15px; 88 } 89 90 .swi1:hover,.swi1:active{ 91 color: orange; 92 } 93 94 95 96 .sw{ 97 width: 4000px; 98 position: relative; 99 animation:swimg 9s linear infinite normal; 100 } 101 102 @keyframes swimg{ 103 0% {left: 0px} 104 5% {left: 0px} 105 106 30% {left: -1000px} 107 40% {left: -1000px} 108 109 60%{left: -2000px;} 110 70% {left: -2000px} 111 112 95%{left:-3000px;} 113 100%{left:-3000px;} 114 } 115 116 117 /************************第三節課***********************/ 118 .mid{ 119 width: 1000px; 120 margin: 0 auto; 121 margin-top: 15px; 122 } 123 124 .all{ 125 color: orange; 126 } 127 128 .midnav{ 129 height: 50px; 130 line-height: 50px; 131 /* background: green;*/ 132 font-size: 20px; 133 } 134 .more{ 135 width: 1000px; 136 height: 50px; 137 line-height: 50px; 138 background: #fff; 139 text-align: center; 140 font-size: 24px; 141 margin: 20px auto 20px auto; 142 } 143 144 .more a{ 145 color: #000; 146 } 147 148 149 /*****************footer部分********************/ 150 151 footer{ 152 width: 100%; 153 background: rgba(60,60,60,0.2); 154 155 } 156 157 .footer2{ 158 width: 100%; 159 height: 50px; 160 background: rgba(50,50,50,0.6); 161 162 } 163 164 165 166 .footer1 { 167 width: 1000px; 168 margin:0px auto; 169 background: rgba(50,50,50,0.3); 170 display: flex; 171 text-align: center; 172 } 173 174 .footnav { 175 height: 180px; 176 border-right: 1px solid rgba(60,60,30,0.3); 177 } 178 179 .footnav h3{ 180 font-weight: normal; 181 color: rgba(30,30,30,0.8); 182 } 183 184 .footnav3{ 185 border: none; 186 } 187 188 .foot{ 189 width: 1000px; 190 margin: 0px auto; 191 height:50px; 192 line-height:50px; 193 font-size:12px; 194 color:#c2c2c2; 195 } 196 197 .mimg{ 198 background: #fff; 199 } 200 201 .mimg li a{ 202 color: #000; 203 } 204 205 .mimg li{ 206 text-align: center; 207 float: left; 208 margin: 10px 14px 10px 14px; 209 210 } 211 212 .foot a{ 213 color: #FFF; 214 }
學習要點
- 經常使用快捷方式
- 清除浮動的技巧
- 利用css3的動畫實現圖片輪播。
- 綜合運用咱們以前學過的知識來構建一個完整的web頁面。
更換你的裝備html
經常使用快捷方式
- 乘法*: ul>li*5 在編輯器中輸入縮寫代碼：ul>li*5 ，而後按下拓展鍵（默認爲tab），便可獲得代碼片斷：
- 後代 >：nav>ul>li
- 兄弟 +:div+h3+p*3
- 縮寫：(div>dl>(dt+dd)*3)+footer>p
- 自增符號：$: ul>li.item$*5
- 縮寫：#header
- 縮寫：p.class1.class2.class3
- 縮寫：ul>.class
- 其餘還有不少，你們能夠本身去百度下
內功心法前端
學習技巧：高手是怎樣煉成的
- 觀摩優秀的網站，能夠F12鍵查看它的源代碼。
- 分析優秀做品的頁面結構。
- 模仿優秀的做品,嘗試着本身去作一下。
- 嘗試着創新，在模仿做品中加入本身的創意思路。
- 反覆進行以上四個步驟，直到你本身能夠創做出優秀的做品，把本身變成高手
江湖經驗html5
網站開發流程
網站的基本開發流程以下，明白流程，能夠明確本身的職責和項目環節，有重點的學習。css3
- 網站策劃--交互設計--網頁設計（視覺設計）- 前端開發（前端工程師）-測試網頁--網站發佈--後期維護
- 溝通的重要性：多與後端技術，美工設計等協做人員溝通。
小技巧
清除浮動的技巧：消除子元素浮動對父元素背景/邊框/不能被子元素撐開的方法：web
- 父元素結尾處增長一空元素 div；並清除其浮動。缺點：若是佈局複雜須要增長許多空標籤
- 在父元素定義overflow:hidden（瀏覽器會自動檢查浮動區域的高度，注.沒必要理會原理，知道用法便可。缺點：超出部分會被隱藏
- 利用僞類：after 父元素內容後增長空元素，並清除浮動。
戰鬥開始啦算法
- 建立項目文件夾存放相應的素材、文檔等
- 對頁面進行結構分析
- 準備素材
- 開始編寫代碼
項目實戰後端
- 創新從模仿開始，我們的第一綜合實例就從模仿網頁-360囧圖開始，網址：http://xiaohua.360.cn/jiongtu
- 第一個項目採用固定浮動佈局，單位爲像素.
- 因爲錄製課程的時候使用1024*768的分別率；因此項目設定屏幕分辨率爲：1024*768
未完，待續...........瀏覽器
- ...
代碼優化前端工程師
優化代碼使更加符合HTML5大綱算法.步驟以下
- 查看頁面目錄結構，逐項修改有問題部分。
- nav中添加標題並將它隱藏。
小技巧
- 當width爲100%時。可用用min-width來規定一個最小寬度，防止縮放時變形，尤爲是背景圖片。
- 將定位和外邊距結合讓圖片以中心點居中。
- 用opcity設置半透明遮罩層。
- inline-block能夠使用text-align 居中；
- 能夠給background同時設置半透明漸變和背景圖片，來增長背景圖片的模糊度來突出背景上的文字。
- 用ul列表作導航的好處:邏輯清楚，有條理。
分離css代碼
- 將代碼重用部分好比header footer分離出來，其餘須要的文件重複引用便可
相關文章
- 1. HTML5 - 5.項目實戰
- 2. java仿抖項目實戰(完整)
- 3. Android項目實戰-高仿拉手網
- 4. HTML5前端教程：jQuery項目實戰
- 5. NDK項目實戰—高仿360手機助手之卸載監聽
- 6. Android項目之仿360手機助手項目
- 7. HTML5 Canvas實現360度全景圖
- 8. 移動端h5直播項目|html5直播實戰開發|h5仿陌陌
- 9. 360項目-07
- 10. 360項目-10
- 更多相關文章...
- • Thymeleaf項目實踐 - Thymeleaf 教程
- • Mozilla 項目 - 瀏覽器信息
- • Docker容器實戰(一) - 封神Server端技術
- • Docker容器實戰(八) - 漫談 Kubernetes 的本質
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章