• 标准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

  • 相关阅读:
    FlashDevelop视频教程三:多工程的使用及编译SWC
    FlashDevelop插件ASCompletion
    c#实现MD5加密
    FlashDevelop视频教程一:简介及安装
    FlashDevelop4 快捷键
    FlashDevelop视频教程四:FLA工程调试和一些技巧
    一个简单的c#操作XML文件的类,只能操作一层的节点
    验证用户的存储过程
    MOSS模态窗口应用
    二进制图片格式转换
  • 原文地址:https://www.cnblogs.com/smallfa/p/1611300.html
Copyright © 2020-2023  润新知