zoukankan      html  css  js  c++  java
  • CSS——宠物demo

    注意:ul中自带padding值,需要清除。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
        body,ul,li{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul{
            background-color: #fff;
            height: 279px;
             210px;
            margin-left: 10px;
            padding: 0 15px;
        }
        li{
            height: 30px;
            border-bottom: 1px dashed #666;
            line-height: 30px;
            background: url("tb.gif") no-repeat left center;
            padding-left: 16px;
    
        }
        li a{
            text-decoration: none;
        }
         .box{
              260px;
             height: 327px;
             border: 1px solid #009900;
             margin: 10px auto;
             background: url("bg.gif");
         }
         .box .title{
             height: 23px;
             margin:10px 0 5px 10px ;
             border-left: 4px solid #C9E143;
             font: 16px/23px 微软雅黑;
             color: #fff;
             padding-left: 11px;
    
         }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="title">爱宠知识</div>
            <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>
            </ul>
        </div>
    </body>
    </html>

    效果:

  • 相关阅读:
    沟通的5个步骤
    安家博客园,发表感想
    postman 简单教程-实现简单的接口测试
    Postman的基本使用
    面试题-如何测试一个APP
    Fiddler快捷方式导出jmeter脚本,傻瓜式
    Servlet学习(三)
    scala学习(一)
    白底抠图
    Servlet学习(二)
  • 原文地址:https://www.cnblogs.com/wuqiuxue/p/7792327.html
Copyright © 2011-2022 走看看