王小明同学

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>考试</title>
  6     <style type="text/css">
  7         *{
  8             margin:0;
  9             padding: 0;
 10         }
 11         .main{
 12             width: 320px;
 13             height: 300px;
 14             margin:100px auto;
 15         }
 16         .nav{
 17             height: 20px;
 18             border-bottom: 3px solid #c2130e;
 19         }
 20         .nav h6{
 21             width: 90px;
 22             line-height: 20px;
 23             float: left;
 24             text-align: center;
 25         }
 26         .nav ul li{
 27             list-style: none;
 28             width: 45px;
 29             line-height: 20px;
 30             float: left;
 31             font-size: 8px;
 32             text-align: center;
 33             margin-left: 5px;
 34         }
 35         .nav ul li a{
 36             text-decoration: none;
 37             color: #000;
 38             background-color: #dcdcdc;
 39             display: block;
 40         }
 41         .nav ul li a.first{
 42             background-color: #c2130e;
 43             color: #fff;
 44         }
 45         .nav ul li a:hover{
 46             background-color: #c2130e;
 47             color: #fff;
 48         }
 49         .clear{
 50             clear: both;
 51         }
 52         .list ul{
 53             background: url(bg.gif) no-repeat 11px 12px;
 54             padding-top: 11px;
 55         }
 56         .list ul li{
 57             list-style: none;
 58             font-size: 10px;
 59             padding-left: 39px;
 60             height: 26px;
 61         }
 62         .list ul li a{
 63             text-decoration: none;
 64             color:#cacaca;
 65         }
 66         .list ul li a:hover{
 67             text-decoration:underline;
 68             color:#c2130e;
 69         }
 70     </style>
 71 </head>
 72 <body>
 73     <div class="main">
 74         <div class="nav">
 75             <h6>新闻排行</h6>
 76             <ul>
 77                 <li><a href="#" class="first">国内</a></li>
 78                 <li><a href="#">国际</a></li>
 79                 <li><a href="#">社会</a></li>
 80                 <li><a href="#">网评</a></li>
 81             </ul>
 82         </div>
 83         <div class="clear"></div>
 84         <div class="list">
 85             <ul>
 86                 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
 87                 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
 88                 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
 89                 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
 90                 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
 91                 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
 92                 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
 93                 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
 94                 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
 95                 <li><a href="#">新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</a></li>
 96             </ul>
 97         </div>
 98     </div>
 99 </body>
100 </html>

 

posted on 2016-12-05 20:49  王小明同学  阅读(91)  评论(1)    收藏  举报