注意：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;

        width: 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{

         width: 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>

效果：

CSS——宠物demo的更多相关文章

  1. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  2. 时间轴CSS的Demo

    一.CSS代码(HTML5支持) /*time-line.css*/ .timeline { position: relative; padding: 20px 0 20px; list-style: ...

  3. css小demo

    span{ color: #ccc; float: right; font-weight: bold; display: inline-block; border-right: solid 1px # ...

  4. css sprite demo

    一张图片,用CSS分割成多个小图标. css样式: .icon{ background:url(../images/tabicons.png) no-repeat;width:18px; line-h ...

  5. CSS——行业动态demo

    1.padding的运用:子div继承父div的宽,子div的padding-left值是不会撑大的. 2.背景图片的运用:不平铺.定位 3.ul本身就是一个盒子,它的高度是li中的字体的默认高度撑起 ...

  6. 在线前端 JS 或 HTML 或 CSS 编写 Demo 处 JSbin 与 jsFiddle 比较

    JSBin 该编辑器的特点是编写可直接编写 HTML.CSS.JavaScript 并且可以在 output 中实时观察编写效果:可设置自动运行 JavasScript 代码,其中最大的好处是有一个 ...

  7. css样式DEMO

    <!-- 导入框 --> <div id="importWin" class="easyui-window" title="服务封装 ...

  8. 用CSS制作带图标的按钮

    先上一张效果图

  9. CSS float

    我们来看看CSS重要属性--float. 以下内容分为如下小节: 1:float属性 2:float属性的特性     2.1:float之文字环绕效果 2.2:float之父元素高度塌陷 3:清除浮 ...

随机推荐

  1. jQuery下拉列表操作(转)

    转地址:http://www.cnblogs.com/yaoshiyou/archive/2010/08/24/1806939.html jQuery获取Select选择的Text和Value:语法解 ...

  2. [bzoj4987]Tree_树形dp

    Tree bzoj-4987 题目大意:给定一颗n个点的有边权的树,选出k个点,使得:$\sum\limits_{i=1}^{k-1}dis_idis_j$最小. 注释:$1\le n\le 3000 ...

  3. Ubuntu 16.04下没有“用户和组”功能的问题解决

    在16.04以前的版本会自带“用户和组”的功能,但是在16.04发现系统只自带了“用户账户”的功能. 问题解决: 1.安装gnome-system-tools sudo apt-get install ...

  4. mvc使用mongodb时objectId序列化与反序列化

    前面有写使用自己的mvc 序列化工具即jsonNetResult.我这里结合之前写的jsonNetResult来做一个Json序列化工具,而且序列化ObjectId成一个字符串.详细代码例如以下 us ...

  5. ios逆向工程

    原 ios逆向工程-内部钩子(Method Swizzling)   Method+Swizzling ios hook Method Swizzling(方法调配) 怎么说呢,先了解什么是钩子为什么 ...

  6. [WebGL入门]二十一，从平行光源发出的光

    注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语.假设翻译有误,欢迎大家指 ...

  7. bzoj2243【SDOI2011】染色

    2243: [SDOI2011]染色 Time Limit: 20 Sec  Memory Limit: 512 MB Submit: 4537  Solved: 1702 [id=2243" ...

  8. BeautifulSoup中各种html解析器的比較及使用

    Beautiful Soup解析器比較 ·Beautiful Soup支持各种html解析器.包含python自带的标准库.还有其它的很多第三方库模块. 当中一个就是lxml parser,至于lxm ...

  9. 数据库html 数据的分句

    Python 中文分句 - CSDN博客 https://blog.csdn.net/laoyaotask/article/details/9260263 # 设置分句的标志符号:可以根据实际需要进行 ...

  10. C# 获得资源文件下图片的路径

    最终实现正确的代码是: button8.Image = System.Drawing.Image.FromFile(@"..\\..\\Resources\\GAOJIBAN.png&quo ...