zoukankan      html  css  js  c++  java
  • 标准CSS 列表写法

    前台的HTML代码如下: 

                             <div class="last">
                                      
                                      <span class="title">专题教程</span>
                                            
                                             <ul>
                                                  <li><a href="#">Lightroom专题集</a></li>
                                                  <li><a href="#">非主流照片教程集</a></li>
                                                  <li><a href="#">艺术照片效果教程</a></li>
                                                  <li><a href="#">新照旧照老残效果</a></li>
                                                  <li><a href="#">PhotopsCS3专题集</a></li>
                                                  <li><a href="#">Photoshop调出美女照片纯</a></li>
                                                  <li><a href="#">Photoshop为婚片打造出华丽的金色效果</a></li>
                                                  <li><a href="#">照片色调教程专辑</a></li>
                                                  <li><a href="#">照片边框效果教程</a></li>
                                                  <li><a href="#">PS打造出MM照片的柔软淡色艺术效果</a></li>
                                             </ul>
                              </div>
                              <!-- *******************正文内容 .last******************* -->


    CSS代码
    * {
        margin:0px;
        padding:0px
    }
    html,body {
               font-family:Arial, Helvetica, sans-serif;
               font-size:12px;
    }
    span {
             font-size:14px; font-weight:bold; color:#000;
    }                

    ul , ol {
             list-style:none;
             margin:0px;
             padding:0px;
    }
    li {
            display:block;
            float:left;
    }
    a {
            text-decoration:none;
    }
    a:hover {
            text-decoration:underline; color:#000
    }


    .last {
           300px;
           overflow:visible;
           border:1px solid #A2B7DB;
           float:left;
           margin-top:5px
    }
    .last span.title {
                     display:block;
                     100%;
                     height:29px;
                     background:url(../image/title_b_bg.gif) repeat-x;
                     line-height:29px;
    }
    .last span {text-indent:10px; color:#10326B; font-weight:bold}
    .last ul {
               clear:both;
    }
    .last li {
               height:20px;
               290px;
               background:url(../image/ico-2.gif) 5px 8px no-repeat ;
               border:1px dashed #FAFAFA;
              }
    .last li a {
              color:#10326B;
              padding-left:30px;
    }
    .last li a:hover {
                   color:#FF3300;
    }

    效果图如下:

    转贴:http://www.xzitb.com/read.php?tid=127

  • 相关阅读:
    14.18 InnoDB Backup and Recovery 备份和恢复:
    14.18 InnoDB Backup and Recovery 备份和恢复:
    php使用 _before_index() 来实现访问页面前,判断登录
    php使用 _before_index() 来实现访问页面前,判断登录
    查询方式实例演示
    查询方式实例演示
    haproxy timeout server 46000 后台超时时间
    haproxy timeout server 46000 后台超时时间
    14.10.5 Reclaiming Disk Space with TRUNCATE TABLE 回收空间使用TRUNCATE TABLE
    14.10.5 Reclaiming Disk Space with TRUNCATE TABLE 回收空间使用TRUNCATE TABLE
  • 原文地址:https://www.cnblogs.com/smallfa/p/1611300.html
Copyright © 2011-2022 走看看