首页 > 代码库 > Web公路，新手上路！NO.3 [ 乱做一通的基本视频网页]
Web公路，新手上路！NO.3 [ 乱做一通的基本视频网页]
这个页面主要是三部分，导航，内容，页尾。
一、导航；
一般有三种方式，
垂直导航栏， 横向导航栏，复合导航栏。
这里主要讲横向导航栏， 这种有两种基本方式： 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 }
以上是新手所作，请多多指教！
Web公路，新手上路！NO.3 [ 乱做一通的基本视频网页]
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。