注意：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. gn3 --iou

    http://www.wyzc.com/Course/Course/learnAction/id/14049/center/0#lesson/400847 http://www.mamicode.co ...

  2. 非常适合新手的jq/zepto源码分析06 -- 事件模型

    复习下事件的有关内容: 1.现在用的绑定/删除: obj.addEventListener(type,fn,false) obj.removeEventListener(type) obj.attac ...

  3. 编译Linux使用的.a库文件

    编译Linux使用的.a库文件 首先是须要编译成.a的源文件 hello.h: #ifndef __INCLUDE_HELLO_H__ #define __INCLUDE_HELLO_H__ void ...

  4. 走进windows编程的世界-----画图相关

    Windows画图 1 图形绘制      1.1 图形绘制的方式      获取到画图句柄-设备描写叙述表(DC),使用对应的画图的API,在设备上绘制图形.          1.2 颜色     ...

  5. 从hbase读取数据优化策略和实验对照结果

    起因:工作须要.我须要每5分钟从hbase中.导出一部分数据,然后导入到ES中.可是在開始阶段编写的python脚本,我发现从hbase读取数据的速度较慢,耗费大量的时间.影响整个导数过程,恐怕无法在 ...

  6. C#之插入排序

    算法描述 1.假定数组第一位为有序序列,抽出后一位元素与有序序列中元素依次比较: 2.如果有序序列元素大于抽出元素,将该元素向后移位: 3.重复前面步骤依次抽取无序序列中首位元素进行比较,直到所有数值 ...

  7. UITableView和UITableViewCell的几种样式

    UITableView和UITableViewCell的几种样式 转至  http://blog.csdn.net/crazyzhang1990/article/details/12503163 一. ...

  8. 数据结构之---C语言实现图的邻接表存储表示

    // 图的数组(邻接矩阵)存储表示 #include <stdio.h> #include <stdlib.h> #include <string.h> #defi ...

  9. LeetCode 21. Merge Two Sorted Lists （合并两个有序链表）

    Merge two sorted linked lists and return it as a new list. The new list should be made by splicing t ...

  10. 【Eclipse提高开发速度-插件篇】安装VJET插件，JS等提示开发插件

    1.安装Apache Batik CSS 一般安装VJET插件会出现 Cannot complete the install because one or more required items co ...