标签:边框 htm ade charset ora color xhtml 1.0 xhtml weight
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>新闻排行</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 li{list-style: none;} 9 body{font-family: 微软雅黑;} 10 .box{ 11 height: 300px; 12 width: 470px; 13 margin: 100px auto; 14 background-color: #fff; 15 } 16 /*顶部导航栏*/ 17 .box .header{ 18 width: 100%; 19 height: 32px; 20 line-height: 32px; 21 background-color: #fff; 22 border-bottom: 5px solid red;/*设置导航栏下的红线*/ 23 } 24 .box .header ul li{ 25 float: left; 26 width: 45px; 27 padding-left: 15px; 28 padding-right: 15px; 29 text-align: center; 30 background-color: #ccc; 31 border-left: 2px solid #F1F1F1;/*设置导航栏左边边框线*/ 32 } 33 .box .header ul li a:link,.box .header ul li a:visited{ 34 text-decoration: none; 35 } 36 .box .header ul li a:hover{ 37 color: gold; 38 } 39 .box .header .news{ 40 width: 80px; 41 padding-left: 30px; 42 padding-right: 20px; 43 text-align: center; 44 border: none; 45 background-color: #fff; 46 font-weight: bold; 47 } 48 .box .header .guonei{ 49 background-color: #f00;/*设置国内两个字的背景颜色*/ 50 border-right: 1px solid #F1F1F1; 51 } 52 .box .header .guonei a:link,.box .header .guonei a:visited{ 53 text-decoration: none; 54 color: #fff; 55 } 56 .box .header .guonei a:hover{ 57 color:gold; 58 } 59 /*新闻版块*/ 60 .box .content{ 61 color: #C3C3C3;/*设置新闻区域文本颜色*/ 62 } 63 .box .content ul{ 64 padding-left: 50px; 65 width: 100%; 66 height: 260px; 67 background: url(bg.gif) no-repeat 20px 5px;/*设置列表前面的图片*/ 68 } 69 .box .content ul a:link,.box .content ul a:visited{ 70 text-decoration:none; 71 color: #C3C3C3; 72 } 73 .box .content ul a:hover{ 74 color: #333; 75 } 76 .box .content ul li{ 77 margin-top: 3px; 78 height: 23px; 79 line-height: 23x; 80 } 81 </style> 82 </head> 83 <body> 84 <div class="box"> 85 <div class="header"> 86 <ul> 87 <li class="news"><a href="#">新闻排行</a></li> 88 <li class="guonei"><a href="#">国内</a></li> 89 <li><a href="#">国际</a></li> 90 <li><a href="#">社会</a></li> 91 <li><a href="#">网评</a></li> 92 </ul> 93 </div> 94 <div style="clear: both;"></div> 95 <div class="content"> 96 <ul> 97 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li> 98 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li> 99 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li> 100 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li> 101 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li> 102 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li> 103 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li> 104 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li> 105 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li> 106 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li> 107 </ul> 108 </div> 109 </div> 110 </body> 111 </html>
标签:边框 htm ade charset ora color xhtml 1.0 xhtml weight
原文地址:http://www.cnblogs.com/CAODADA/p/6132482.html