注意：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. 洛谷—— P2504 [HAOI2006]聪明的猴子

    P2504 [HAOI2006]聪明的猴子 题目描述 在一个热带雨林中生存着一群猴子,它们以树上的果子为生.昨天下了一场大雨,现在雨过天晴,但整个雨林的地表还是被大水淹没着,部分植物的树冠露在水面上. ...

  2. 用 Arduino Uno 给 Arduino Mini（Pro）烧录程序

    用 Arduino Uno 给 Arduino Mini(Pro)烧录程序 准备 Arduino Uno Arduino Mini(Pro) 杜邦线若干 接线 首先去掉 Arduino 上的芯片ATM ...

  3. uva 11212 - Editing a Book(迭代加深搜索 IDA*) 迭代加深搜索

    迭代加深搜索 自己看的时候第一遍更本就看不懂..是非常水,但智商捉急也是没有办法的事情. 好在有几个同学已经是做过了这道题而且对迭代加深搜索的思路有了一定的了解,所以在某些不理解的地方询问了一下他们的 ...

  4. poj 1331 Multiply

    Multiply Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5179   Accepted: 2773 Descript ...

  5. C#根据规则生成6位随机码

    #region 获得6位优惠码 zhy public static string CreatePromoCode(string code) { if (code == "") { ...

  6. Android首次启动时间长优化之预编译提取Odex

        提示!应用程序的安装有两种情况,第一:首次启动系统时安装.第二:系统启动完毕后安装. 本篇博文基于第一种安装场景.在系统首次启动的场景中,系统会对/system/app./system/pri ...

  7. Datazen自己定义地图

     Datazen的地图数据定义主要以ESRI的Shape文件格式为主,这是现现在被广泛使用的一种地图数据格式.在Datazen中,自己定义地图须要提供例如以下两个地图数据定义文件: SHP文件提供 ...

  8. keepalived+nginx安装配置

    软件版本号: pcre8.36 ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.36.tar.gz keepalived1.2 ...

  9. java无状态登录实现方式之ThreadLocal+Cookie

    注:本文提到的无状态指的是无需session完毕认证.取用户封装信息. 无状态的优点: 1.多应用单点登录:在多应用的时候仅仅需在登录server登录后.各子应用无需再次登录. 2.多server集群 ...

  10. jQuery Uploadify在ASP.NET MVC3中的使用

    1.Uploadify简介 Uploadify是基于jQuery的一种上传插件,支持多文件.带进度条显示上传,在项目开发中常被使用. Uploadify官方网址:http://www.uploadif ...