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. Remmarguts’ Date（poj 2449）

    求第k短路的长度,如果没有,输出-1. /* k短路模板 注意当s=t时,k++. */ #include<iostream> #include<cstdio> #includ ...

  2. 【BZOJ4398】福慧双修（二进制，最短路）

    题意: 此题中S=1 思路:Orz ManGod秒切此题 我觉得出入边权互换不太直观,就改了一下写法 第一次默认与1有关的第一条出边只出不入,第二次默认只入不出 ..]of longint; head ...

  3. 洛谷——P2212 [USACO14MAR]浇地Watering the Fields

    P2212 [USACO14MAR]浇地Watering the Fields 题目描述 Due to a lack of rain, Farmer John wants to build an ir ...

  4. 晶振虚焊导致TI 28335 DSP 烧写FLASH后，连接仿真器时正常工作，拔掉仿真器却不能启动运行

    遇到个诡异的问题,28335的DSP,之前程序调试一切正常,但是烧写FLASH后,拔掉仿真器却始终部工作. 解决思路: 1) 检查配置文件貌似没什么问题,复制到其他工程,在开发板上拔掉仿真器启动正常. ...

  5. MySQL: How to support full Unicode in MySQL databases

    How to support full Unicode in MySQL databases Published 30th July 2012 · tagged with MySQL, securit ...

  6. Open Flash Chart2 常用的参数

    http://fyzeng.diandian.com/post/2011-07-29/3339982 {   /* 图表标题 */   "title" : {     " ...

  7. 新博客有了，文章转移到 http://www.iosxxx.com/

    文章转移到 http://www.iosxxx.com/ ,敬请大家关注

  8. 数学之路-python计算实战(17)-机器视觉-滤波去噪(中值滤波)

    Blurs an image using the median filter. C++: void medianBlur(InputArray src, OutputArray dst, int ks ...

  9. Codeforces Round #311 (Div. 2)A Ilya and Diplomas

    [比赛链接]click here~~ [题目大意] n个人,获取一到三等文凭,每门文凭有大小范围.求最后文凭各颁发多少 [解题思路]直接枚举了, 看完题,赶紧写了一发代码,发现竟然错过注冊时间.系统提 ...

  10. P1830 轰炸III

    P1830 轰炸III 84通过 145提交 题目提供者wanglichao1121 标签模拟矩阵洛谷原创 难度普及/提高- 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目背景 一个大小为N ...