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. 消息传递(cogs 1001)

    问题描述WZland开办了一个俱乐部(这里面可以干任何的事情),这引来了许多的人来加入.俱乐部的人数越来越多,关系也越来越复杂……俱乐部的人来自各个地方,为了增加友谊,俱乐部举行了一次晚会.晚会上又进 ...

  2. hust 1017

    题意:求01矩阵的精确覆盖. 分析:本来想学习dancing links来解决数独问题,发现dancing links最初解决的问题是精确覆盖,于是就找到这道题来做了.这种NPC问题只能用DFS暴搜的 ...

  3. java ee开发常用类和接口

    1.javax.Validation接口,做mvc传入数据验证用 2.javax.servlet接口 3.javax.datasource接口 4.javax.session接口 5.javax.ht ...

  4. Cannot update identity column &#39;XXX&#39;

    Sqlserver -- 怎样改动设置主键的id能够手动更新? #1 打开表的设计界面 #2 将主键id的is Identity的属性改成No 这样就能够通过Update语句来更新表的主键id了. 怎 ...

  5. [LeetCode][Java] Palindrome Number

    题目: Determine whether an integer is a palindrome. Do this without extra space. Some hints: Could neg ...

  6. HR系统-人员申请单

    部门在人员缺失时,须要进行人员申请, 申请会涉及到单据的建立及审核.单据建立界面例如以下:

  7. swift 2.0 语法 函数

    //: Playground - noun: a place where people can play import UIKit /*: 函数 * 格式 func 函数名称(形参名称1: 形参类型, ...

  8. [Java] 实验6參考代码

    1. 大家的.java程序都须要在一个"缺省包"(default package)下编写\执行\提交,不要去命名新的package     - 系统不支持package contr ...

  9. Magento 模块开发之DispatchEvent

    在这一章节中.我们来了解 Magento 中的事件分发机制 Mage::dispatchEvent() 在创建自己的模块时, Event 事件的分发将会变成十分实用且有效 以个人的经验. 事件的分发使 ...

  10. Codeforces #2B The least round way(DP)

    Description 有一个n*n的正整数矩阵,要你求一条从第一行第一列的格子到第n行第n列的路,使得你走过的格子里面的数乘起来的值末尾的零的个数最小.输出最小个数. Input 第一行包括1个数n ...