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. js控制frameset的rows

    window.parent.document.getElementById("MainWork").rows="*,0" ;

  2. alpha版出炉，实现win2008 service的session 0穿透

    指定用户名,拿最小session,实现和用户ui交互. 这样,搞windows的自动化部署,就可以向前一大步啦. 比以前用psexec要用户名密码,指定session要先进多啦. 安全保密性也提高了. ...

  3. AI小记-K近邻算法

    K近邻算法和其他机器学习模型比,有个特点:即非参数化的局部模型. 其他机器学习模型一般都是基于训练数据,得出一般性知识,这些知识的表现是一个全局性模型的结构和参数.模型你和好了后,不再依赖训练数据,直 ...

  4. PHP中错误与异常的日志记录用法分析

    原文:http://www.jb51.net/article/89548.htm ----------------------------------------------------------- ...

  5. C#邮件发送(含附件)

    class SendEmail { static void Main(string[] args) { string from = "发件人@yingu.com"; string ...

  6. Hibernate基于注解的双向one-to-many映射关系的实现

    在项目中用到了一对多的实体类关系映射,之前接触的都是基于配置文件的映射实现.可是公司的大部分都是基于注解的.因此自己參考之前的代码捣鼓了基于注解的一对多的映射关系实现. 背景: 一的一端:QingAo ...

  7. Unity3d中相应各平台Path

    IOS: Application.dataPath :                      Application/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/xx ...

  8. Intellij热部署插件JRebel使用方法（转载）

    Intellij热部署插件JRebel帮助开发者在项目处于运行状态下任意修改Java文件并动态反馈到运行的项目中.插件官方下载地址:https://plugins.jetbrains.com/plug ...

  9. 处理new分配内存失败情况

    转自:http://www.51testing.com/html/70/n-827070.html 在C++语言中,我们经常会使用new给一个对象分配内存空间,而当内存不够会出现内存不足的情况.C++ ...

  10. Delphi中ARC内存管理的方向

    随着即将发布的10.3版本,RAD Studio R&D和PM团队正在制作Delphi在内存管理方面的新方向. 几年前,当Embarcadero开始为Windows以外的平台构建新的Delph ...