1、padding的运用:子div继承父div的宽，子div的padding-left值是不会撑大的。

2、背景图片的运用：不平铺、定位

3、ul本身就是一个盒子，它的高度是li中的字体的默认高度撑起来的。

4、li是ul中的子盒子，padding-left可以控制他们的左边距离。

5、li与li之间的距离可以用字体的行高来控制。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

     .news{

         width: 238px;

         height: 166px;

         border:1px solid #D9E0EE;

         border-top: 3px solid #FF8400;

         margin: 0 auto;

     }

     .news-title{

         height: 35px;

         border-bottom: 1px solid #D9E0EE;

         line-height: 35px;

         padding-left: 12px;

     }

     ul,li{

         list-style:none;

         margin: 0;

         padding: 0;

     }

     ul{

         margin-top: 14px;

     }

     li{

         padding-left:19px;

         height: 23px;

         background: url("li_bg.jpg") no-repeat 9px 7px;

         font-size:14px;

     }

    </style>

</head>

<body>

    <div class="news">

        <div class="news-title">行业动态</div>

        <ul>

            <li>气质不错气质不错</li>

            <li>气质不错气质不错</li>

            <li>气质不错气质不错</li>

            <li>气质不错气质不错</li>

            <li>气质不错气质不错</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

    注意:ul中自带padding值,需要清除. <!DOCTYPE html> <html lang="en"> <head> <meta ...

  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. Sql语句中关于如何在like '%?%'中给？赋值

    做模糊查询用户的时候,如果 String sql="select * from users where name like %?%"; String[] param={userna ...

  2. mcp2515 芯片驱动总线错误BUG的解决方法

    http://blog.renren.com/share/221002615/11483613167 来自张涛的日志 现象:CAN总线在线上设备热插拔或长时间运行后出现总线异常情况,有时不能发送和接收 ...

  3. FreeMarker与Spring MVC 4集合的HelloWorld示例

    0.整体的项目结构 1.引入POM <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="ht ...

  4. 《Sams Teach Yourself Windows® Workflow Foundation in 24 Hours》读书笔记目录

    目录 1 Part I - The Basics 1.1 Hour 1 - Understanding Windows Workflow Foundation 1.2 Hour 2 - A Spin ...

  5. 今天又学到了一个很重要的公式，(a+b)^n，组合数的求和，牛逼，为自己鼓掌👏

    另外还有: C(n, 0) + ... + C(n, n) = 2^n 其实从上面的二项式定理,也可以推导出来的.

  6. C/C++异常处理机制

    1.C语言异常处理   1.1 异常终止   标准C库提供了abort()和exit()两个函数,它们可以强行终止程序的运行,其声明处于<stdlib.h>头文件中.这两个函数本身不能检测 ...

  7. Unity3D Asset文件导出3DMax 可编辑格式

    本文章由cartzhang编写,转载请注明出处. 全部权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/60878354 作者:car ...

  8. ZMQ源代码分析（一）-- 基础数据结构的实现

    yqueue 和 ypipe zmq号称是"史上最快的消息队列",由此可见zmq中最重要的数据结构就是队列. zmq的队列主要由yqueue和ypipe实现.yqueue是队列的基 ...

  9. 开源软件Review Board

    开源软件, Review Board 代码审查的. https://www.reviewboard.org/

  10. 精确计算java中float和double的精度

    [本文相关的代码放在github上.地址为:https://github.com/VigourJiang/StructuredFloat] Java中double类型的格式基本遵循IEEE 754标准 ...