CSS考试题目

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 <head>

     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

     <title>新闻排行</title>

     <style>

     *{margin: 0;padding: 0;}

     li{list-style: none;}

     body{font-family: 微软雅黑;}

     .box{

         height: 300px;

         width: 470px;

         margin: 100px auto;

         background-color: #fff;

     }

     /*顶部导航栏*/

     .box .header{

         width: 100%;

         height: 32px;

         line-height: 32px;

         background-color: #fff;

         border-bottom: 5px solid red;/*设置导航栏下的红线*/

     }

     .box .header ul li{

         float: left;

         width: 45px;

         padding-left: 15px;

         padding-right: 15px;

         text-align: center;

         background-color: #ccc;

         border-left: 2px solid #F1F1F1;/*设置导航栏左边边框线*/

     }

     .box .header ul li a:link,.box .header ul li a:visited{

         text-decoration: none;

     }

     .box .header ul li a:hover{

         color: gold;

     }

     .box .header .news{

         width: 80px;

         padding-left: 30px;

         padding-right: 20px;

         text-align: center;

         border: none;

         background-color: #fff;

         font-weight: bold;

     }

     .box .header .guonei{

         background-color: #f00;/*设置国内两个字的背景颜色*/

         border-right: 1px solid #F1F1F1;

     }

     .box .header .guonei a:link,.box .header .guonei a:visited{

         text-decoration: none;

         color: #fff;

     }

     .box .header .guonei a:hover{

         color:gold;

     }

     /*新闻版块*/

     .box .content{

         color: #C3C3C3;/*设置新闻区域文本颜色*/

     }

     .box .content ul{

         padding-left: 50px;

         width: 100%;

         height: 260px;

         background: url(bg.gif) no-repeat 20px 5px;/*设置列表前面的图片*/

     }

     .box .content ul a:link,.box .content ul a:visited{

         text-decoration:none;

         color: #C3C3C3;

     }

     .box .content ul a:hover{

         color: #333;

     }

     .box .content ul li{

         margin-top: 3px;

         height: 23px;

         line-height: 23x;

     }

     </style>

 </head>

 <body>

     <div class="box">

         <div class="header">

             <ul>

                 <li class="news"><a href="#">新闻排行</a></li>

                 <li class="guonei"><a href="#">国内</a></li>

                 <li><a href="#">国际</a></li>

                 <li><a href="#">社会</a></li>

                 <li><a href="#">网评</a></li>

             </ul>

         </div>

         <div style="clear: both;"></div>

         <div class="content">

             <ul>

                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>

                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>

                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>

                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>

                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>

                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>

                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>

                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>

                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>

                 <li><a href="#">美军高官:不排除和中国发生直接军事对抗可能会输.....</a></li>

             </ul>

         </div>

     </div>

 </body>

 </html>
巴特西

CSS考试题目

最新文章

热门文章
