注意：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. [K/3Cloud]K3Cloud平台开发之Python插件

    有时候我们的表单可能很简单,只是一个简单交互的表单,但有可能还是要劳师动众的给它建个工程写个插件,是不是很不爽?例如我有如下一个表单: 功能很简单就是选个业务对象,收集绑定几个字段名,然后确定返回一个 ...

  2. windows开启3306端口并用可视化工具访问远程mysql(授权访问)

    开启 MySQL 的远程登陆帐号有两大步: 1.确定服务器上的防火墙没有阻止 3306 端口. MySQL 默认的端口是 3306 ,需要确定防火墙没有阻止 3306 端口,否则远程是无法通过 330 ...

  3. 临时起异，要进入C++领域耍一个程序

    没办法.两周之内可以搞定吧. 就一个SESSION 0的问题. 网上有类似源码,调一下应该就可以吧..保佑顺利. 基本语法都还记得,快N年啦... #include <iostream> ...

  4. [CH#56]过河（贪心）

    题目:http://ch.ezoj.tk/contest/CH%20Round%20%2356%20-%20%E5%9B%BD%E5%BA%86%E8%8A%82%E6%AC%A2%E4%B9%90% ...

  5. Ubuntu 16.04解决在虚拟终端（Ctrl+Alt+F1）下显示菱形中文乱码问题

    在安装Ubuntu时,如果默认选择了中文,那么以后进去到虚拟终端就会出现菱形的中文乱码. 其实这个是无解的,但是可以通过以下技巧去实现: 1.把系统转成英文的 sudo gedit /etc/defa ...

  6. python 类、模块、包的区别

    学习python的时候,碰到了import 和 from xx import xx的问题, 为了弄清楚什么是 module 和package ,这篇文章讲解的不错!! 原文: http://www.c ...

  7. golang 的GOPATH设置的问题

    go run footer.go 的时候呢, go会依次去GOPATH 和GOROOT设置的对应路径下面找对应的包(目录和文件) 找的时候呢, 会在GoPATH 和GOROOT对应的目录后面再加一层路 ...

  8. git bash here真牛！

    git bash here真牛! 在Windows上面安装了git,在文件夹里面空白处右键点击,选择git bash here: 随手敲了几个命令:ls,ls -a,which ls,who, fin ...

  9. 行香子&#183;过尽千山

    <行香子·过尽千山> 文/天地尘埃2020 过尽千山.水瘦山寒. 思来路.地咽天玄. 千金散尽,欲补穹天. 但孟春暖,仲春炫.暮春喧. 三皇五帝,魏武挥鞭. 朴无欲.衡玉玑璿. 金生丽水, ...

  10. ADO.NET .net core2.0添加json文件并转化成类注入控制器使用 简单了解 iTextSharp实现HTML to PDF ASP.NET MVC 中 Autofac依赖注入DI 控制反转IOC 了解一下 C# AutoMapper 了解一下

    ADO.NET   一.ADO.NET概要 ADO.NET是.NET框架中的重要组件,主要用于完成C#应用程序访问数据库 二.ADO.NET的组成 ①System.Data  → DataTable, ...