注意：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. android从sdcard中读取bitmap

    String sdcard_path=Environment.getExternalStorageDirectory().getCanonicalPath(); String file_path=sd ...

  2. MYSQL常用的字符串函数

    #字符串函数 #返回字符串的字符数量,对于此例而言,结果为5SELECT CHAR_LENGTH('计算机编程'); #合并字符串,对于此例而言,结果为‘我喜欢计算机’SELECT CONCAT('我 ...

  3. Ubuntu 16.04安装7zip

    搜索时发现7zip有两个:p7zip,p7zip-full,p7zip-rar.研究发现: p7zip:包含7zr(最小的7zip归档工具),仅仅只能处理原生的7z格式. p7zip-full:包含7 ...

  4. [Vue @Component] Pass Props to Vue Functional Templates

    Functional templates allow you to create components consisting of only the template tag and exposing ...

  5. Solidworks如何导入和使用模板文件

    将模板文件拷贝到Solidworks目录(可以是任意目录)     点击工具-选项-文件位置,然后把文件夹添加进去   新建文件的时候选择高级模式,然后就会看到已经出现了我们导入的模板文件       ...

  6. [学习笔记]JavaScript基础

    JavaScript概述 1. JavaScript定义 JavaScript是Netscape公司开发的一种基于对象和事件驱动的脚本语言.它是弱类型语言.仅仅能由浏览器解释运行. 当中: 脚本语言: ...

  7. geek青年的状态机，查表，纯C语言实现

    geek青年的状态机,查表,纯C语言实现 1. 问题的提出.抽象 建一,不止是他,不少人跟我讨论过这种问题:怎样才干保证在需求变更.扩充的情况下.程序的主体部分不动呢? 这是一个很深刻和艰难的问题.在 ...

  8. Android应用程序相关的文件文件夹具体解释

    一.方法介绍:         每一个Android应用程序都能够通过Context来获取与应用程序相关的文件夹,这些文件夹的功能各异,每一个文件夹都有自己的特点.有时候可能会搞混淆,本文结合andr ...

  9. ZOJ 3888 Twelves Monkeys (预处理+优先队列)

    题目链接:ZOJ 3888 Twelves Monkeys 题意:题目描写叙述起来比較绕,直接讲案例 9 3 3 9 1 6 1 4 1 6 7 2 输入n,m,q.n限制了你询问的年份,m台时光机, ...

  10. android实现跑马灯效果（能够实现两个以上跑马灯）

    本文用了继承自TextView的MarqueeTextView来实现跑马灯效果.原因是,跑马灯效果是须要TextView拥有焦点才会跑动的.而有时候TextView获得焦点会有点耗时,造成要等待一段时 ...