css新闻趣图.html

来源：互联网发布：苹果电脑重装mac系统编辑：程序博客网时间：2024/05/16 05:42

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="utf-8">
       <style type="text/css">
       * {   /*清空默认的内外边距 css几乎必须要写的*/
           margin: 0;
           padding: 0;
       }
       ul {
           list-style: none; /*取消列表自带的小点默认的样式*/
       }
       .search {
           width: 238px;
           height: 294px;
           border: 1px solid #D9E0EE;
           border-top: 3px solid #FF8400; /*这句话一定要写下边*/
           margin: 100px;

       }
       .search h3 {
           height: 35px;
           border-bottom: 1px solid #D9E0EE;
           font-size: 16px;
           font-weight: normal;   /*不加粗*/
           line-height: 35px;   /*垂直居中*/
           padding-left: 12px;   /*h3没给宽度所以不会影响盒子大小*/
       }
       .search img {
          margin: 7px 0 0 8px; /*上右下左*/
       }
       .search ul li a {
          font-size: 12px;
          color: #666;
          text-decoration: none;   /*取消下划线*/
       }
       .search ul {
          margin-left: 8px;
       }
       .search ul li{
          padding-left: 10px;
          height: 26px;
          line-height: 26px;
          background: url(dian.png) no-repeat left center;   /*背景设置*/
       }
          .search ul li a:hover {
           text-decoration: underline; /*下划线*/
           color: #FF8400;
          }
       </style>
   </head>
   <body>
   <div class="search">
       <h3>搜索趣图</h3>
       <img src="xinwen.jpg" height="160" width="218" alt="#" />
       <ul>
           <li><a href="#">中国再次登顶</a></li>
           <li><a href="#">中国工程院停止孟伟院士资格</a></li>
           <li><a href="#">新政出台车贷将有重大变化</a></li>


       </ul>
   </div>
   </body>
</html>

阅读全文

0 0