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 [ 亂做一通的基本視頻網頁]