Web公路，新手上路！NO.3 [ 亂做一通的基本視頻網頁]
阿新 • • 發佈：2017-07-26
分布 big footer 規則 新手上路 n) radius lan black 
這個頁面主要是三部分，導航，內容，頁尾。
一、導航；
一般有三種方式，
垂直導航欄， 橫向導航欄，復合導航欄。
這裏主要講橫向導航欄， 這種有兩種基本方式： display:inline 和 float：left 兩種。
Lz用的是的 float方式， 這種方式會有一個小問題； 就是窗口縮小時，導航欄會往下掉，這裏就要把 navbar類設置為 width: 100%;
還有一個，導航欄字體不在正中間，可用 line-heigth 來調整。
但這裏會出現整個頁面都不會往下掉，例如窗口縮小後文字不會自動換行，這個萌新還在學習，再看看，以後再補充。
二、內容部分，
就是 圖片的類似九宮格的分布。用的也是float 方式，然後通過width,heigth 來調整 圖片大小 ，padding,margin來調整位置。
這裏圖片下方的文字位置則用text-align調整，
三、翻頁按鍵，
邊角 ： border-radius；
邊緣：border ；
把 a, span設置成 display：inline-block；方便設置寬高
註意優先度問題， .pre_next_page a.a2 > .pre_next_page a > .a2
四、頁尾和定位圖標，
頁尾基本和翻頁按鍵一樣只是沒有邊緣。
懸浮定位圖標：
一般放最後，因為多數是頁面完整後才有使用價值。
利用position , bottem, right 來固定懸浮圖標。
上代碼：
1<!DOCTYPE html> 2 <html> 3 <head lang="en-US"> 4 <meta charset="UTF-8"> 5 <title>MyBlog</title> 6 <link rel="stylesheet" type="text/css" href="./css/mode1.css"/> 7 </head> 8 <body> 9 <div class=header> 10 <div class="logo"> 11 <img src="img/logo2.png" alt="logo"/> 12 </div> 13 <div class="navber"> 14 <ul> 15 <li><a href="https://cn.bing.com">HOME</a></li> 16 <li><a href="https://cn.bing.co">HOME</a></li> 17 <li><a href="https://cn.bing.cm">HOME</a></li> 18 <li><a href="https://cn.bing.om">HOME</a></li> 19 <li><a href="https://cn.big.com">HOME</a></li> 20 </ul> 21 </div> 22 </div> 23 24 <div class=main> 25 <div class=image> 26 <a href="https://cn.bing.com" target="_blank"> 27 <img src="img/1.jpg"/> 28 <span>image 1</span> 29 </a> 30 </div> 31 <div class=image> 32 <a href="cn.bing.com"> 33 <img src="img/logo.png"/> 34 <span>image 1</span> 35 </a> 36 </div> 37 <div class=image> 38 <a href="cn.bing.com"> 39 <img src="img/logo.png"/> 40 <span>image 1</span> 41 </a> 42 </div> 43 <div class=image> 44 <a href="cn.bing.com"> 45 <img src="img/logo.png"/> 46 <span>image 1</span> 47 </a> 48 </div> 49 <div class=image> 50 <a href="cn.bing.com"> 51 <img src="img/logo.png"/> 52 <span>image 1</span> 53 </a> 54 </div> 55 56 </div> 57 <div class="pre_next_page"> 58 <span class="a1">上一頁</span> 59 <span class="curPage">1</span> 60 <a href="1/2.html">2</a> 61 <a href="1/3.html">3</a> 62 <a href="1/4.html">4</a> 63 <a href="1/5.html">5</a> 64 <a class="a2" href="1/1.html">下一頁</a> 65 </div> 66 <div class="footer"> 67 <div class="footmenu"> 68 <a href="https://www.baidu.com">百度</a> 69 <span>|</span> 70 <a href="https://cn.bing.com">必應</a> 71 <span>|</span> 72 <a href="...">一二三</a> 73 <span>|</span> 74 <a href="...">Aoute Us</a> 75 </div> 76 <div class="footned"> 77 <a class="linkend" href="www.w3c.com">W3C</a> 78 © 2017 MY.com 79 </div> 80 </div> 81 <div class="side-bar"> 82 <a href="#" class="toTop"><img src="img/toTop.png" alt="goToTop"/></a> 83 </div> 84 </body> 85 </html>
CSS
1 .logo{ 2 background-color:#2D2D30; 3 } 4 .logo img{ 5 height:100px; 6 7 } 8 .navber{ 9 height:40px; 10 width: 100%; /*這裏設置成100%，navber就不會因為瀏覽器大小變化導致menu item 往下掉*/ 11 background-color:#000000; 12 } 13 .navber ul{ 14 list-style-type:none; 15 margin:0; 16 padding:0; 17 } 18 /*.navber li{*/ 19 /*display: inline;*/ 20 /*}*/ 21 .navber a:link,.navber a:visited{ /*這裏兩個a statu要寫次類選擇器*/ 22 background-color:#000000; 23 text-align:center; 24 display:block; 25 float: left; 26 width:150px; 27 height: 40px; 28 padding: 0px 45px; 29 text-decoration: none; 30 color: #6ac; 31 line-height: 37px; 32 } 33 .navber a:hover{ 34 background-color:#2D2D30; 35 } 36 37 .image{ 38 float:left; 39 margin:25px; 40 width:190px; 41 height:260px; 42 text-align:center; 43 } 44 .image img{ 45 width:180px; 46 height:240px; 47 } 48 .image a:link,.image a:visited{ 49 text-decoration: none; 50 /*color: #fff;*/ 51 } 52 .image a:hover{ 53 /*text-decoration: none;*/ 54 /*color: #000;*/ 55 } 56 body{ 57 background-color:#696969; 58 width: 1200px; 59 /*text-align: center;*/ 60 margin: 0 auto; 61 } 62 .pre_next_page{ 63 clear: both; 64 padding: 40px 0px; 65 text-align: center; 66 } 67 .pre_next_page a, .pre_next_page span{ 68 display: inline-block; 69 width: 32px; 70 height: 32px; 71 border: 2px solid black; 72 border-radius: 8px 0 8px 0; /*定義邊角圓角大小*/ 73 margin: 0 5px; 74 background-color:#f2f2f2; 75 text-decoration: none; 76 line-height: 30px; 77 } 78 .pre_next_page span.a1, .pre_next_page a.a2{ /*這裏不能直接用a1,a2， 因為類(a1,a2)的優先度小於元素(a,span),會被上面規則覆蓋*/ 79 width: 56px; 80 } 81 .pre_next_page a:hover { 82 background-color: #000000; 83 text-decoration: none; 84 } 85 .pre_next_page span.curPage{ 86 /*color: darkgray;*/ 87 background: palevioletred; 88 cursor: default; 89 } 90 .a1{ 91 cursor: default; 92 } 93 .footer{ 94 text-align: center; 95 font-size: 12px; 96 } 97 .footer .footmenu a{ 98 display: inline-block; 99 width: 100px; 100 margin: 10px; 101 color: #000; 102 text-decoration: none; 103 } 104 .footned{ 105 display: block; 106 margin-bottom: 20px; 107 color: #ffffff; 108 } 109 .footned a{ 110 color: #ffffff; 111 text-decoration: none; 112 } 113 .side-bar{ 114 position: fixed; /*position 是固定*/ 115 bottom: 20px; /*bottom, right 是定位到頁面什麽位置*/ 116 right: 20px; 117 } 118 119 .toTop img{ 120 width: 60px; 121 height: 60px; 122 }View Code
以上是新手所作，請多多指教！
Web公路，新手上路！NO.3 [ 亂做一通的基本視頻網頁]