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. [bzoj 1047][HAOI2007]理想正方形（单调队列）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1047 分析: 第一感觉二维线段树当然没问题但是挺慢的. 注意到要求的正方形形中的最大最小边长是 ...

  2. spring-cloud-starter-ribbon提供客户端的软件负载均衡算法

    Ribbon是什么? Ribbon是Netflix发布的开源项目,主要功能是提供客户端的软件负载均衡算法,将Netflix的中间层服务连接在一起.Ribbon客户端组件提供一系列完善的配置项如连接超时 ...

  3. 使用jcaptcha插件生成验证码

    1.从官网http://jcaptcha.sourceforge.net/下载插件.将对应jar包导入到lib文件夹下 2.创建一个CaptchaServiceSingleton类用来获取jcaptc ...

  4. 推断给定的IP地址是否是内网IP

    /** * 推断给定的IP地址是否是内网IP * * @author GaoHuanJie */ public class Test{ public boolean isInnerIP(String ...

  5. 【剑指offer】合并两有序单链表

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/25739727 九度OJ上AC,採用归并的思想递归实现. 题目描写叙述: 输入两个单调递增的 ...

  6. ACdream区域赛指导赛之手速赛系列(7)

    A -Dragon Maze Time Limit: 2000/1000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) Submi ...

  7. WPF学习笔记：获取ListBox的选中项

    有代码有J8: UI <UserControl x:Class="UnitViews.UserListUV" xmlns="http://schemas.micro ...

  8. Ubuntu 查看当前目录使用的总空间大小

    查看当前目录使用的总空间大小 du -h --max-depth=0 #du -h --max-depth=0 217M . 查看当前目录使用总空间的大小以及当前目录下一级文件及文件夹各自使用的总空间 ...

  9. Luogu4198 楼房重建

    https://zybuluo.com/ysner/note/1124880 题面 带修改的区间维护最大斜率. 题面 解析 用线段树区间维护斜率. 考虑如何向上合并. 左半段一定有贡献. 如果左半段的 ...

  10. 洛谷 P1312 [ NOIP 2011 ] Mayan游戏 —— 搜索+模拟

    题目:https://www.luogu.org/problemnew/show/P1312 还是不擅长这种题,所以参考了一下TJ: 其实也很好搜,按字典序,先搜右移,再搜左移: 不交换相同颜色的两个 ...