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

  • 相关阅读:
    python PyQt5
    传入一张图,生成它的油画版!(python实现)(转 )
    Python——画一棵漂亮的樱花树(不同种樱花+玫瑰+圣诞树喔)(转)
    Python3.7实现自动刷博客访问量(只需要输入用户id)(转)
    Python3 多线程的两种实现方式
    图片生成字符
    SqlServer性能优化 通过压缩与计算列提高性能(十一)
    json与bson的区别
    浅析Redis 和MongoDB
    Solr DocValues详解
  • 原文地址:https://www.cnblogs.com/smallfa/p/1611300.html
Copyright © 2011-2022 走看看