1、ul本身是块级元素，在实际运用中，我们不设定宽高的话，它的宽就是父元素的宽，它的高就是内容撑起来的高度。

2、在局部布局的时候，我们可以不用设定ul的宽度和高度，直接使用margin来巧妙布局。

3、上述如果设定了ul或者其他盒子的宽度以后，会出现一个问题就是margin-left的值过大，盒子接近了另外盒子的边缘，再设置margin-right的时候如果值超过显示的距离那么将无效。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        div {

            width: 400px;

            height: 250px;

            border: 1px solid #E4E4E4

        }

        ul {

            list-style: none;

            padding: 0px;

            margin-top: 20px;

            margin-left: 10px;

            border: 1px solid #eee;

            margin-right: 10px;

        }

        li {

            height: 29px;

            line-height: 29px;

            border:1px dashed #eee;

        }

        li.first{

            color:red;

        }

    </style>

</head>

<body>

    <div>

        <ul>

            <li class="first">首页</li>

            <li>首页</li>

            <li>首页</li>

            <li>首页</li>

            <li>首页</li>

        </ul>

    </div>

</body>

</html>

效果：

CSS——ul（demo）的更多相关文章

  1. CSS Ul（列表样式）

    CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表 ...

  2. 谈谈一些有趣的CSS题目（七）-- 消失的边界线问题

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  4. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  6. 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  7. 谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  8. 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  9. 谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. codevs4419 FFF 团卧底的菊花

    题目描述 Description FFF 团卧底在这次出题后就知道他的菊花可能有巨大的危险,于是他提前摆布好了菊花阵,现在菊花阵里有若干朵菊花,出现次数最多的那一朵就是出题人的,你的任务是需要找出出题 ...

  2. java 源码分析2 -List

    1.是一个接口,继承了Collection,提供了size(),isEmpty(),contanis(),iterator(),toArray(),clear()等方法 2.分析常用的ArrayLis ...

  3. Diagnose High-Latency I/O Operations Using SystemTap

    Luca Canali on 28 Jul 2015 Topic: this post is about some simple tools and techniques that can be us ...

  4. OpenCV基础篇之像素操作对照度调节

    程序及分析 /* * FileName : contrast.cpp * Author : xiahouzuoxin @163.com * Version : v1.0 * Date : Tue 29 ...

  5. 未来 Web 设计的 7 大趋势

    1.手势代替点击 还记得曾经是怎样滚动网页的吗?将鼠标移到屏幕的右边缘,然后拖动古代称为"滚动栏"的玩意儿: 略微专业点的可能会使用鼠标滚轮,光标键或触控板,这已经率先于大多数的用 ...

  6. UDEV SCSI Rules Configuration for ASM in Oracle Linux 5 and 6

    UDEV SCSI Rules Configuration for ASM in Oracle Linux 5 and 6 For Oracle Automatic Storage Manager ( ...

  7. 利用rman自己主动备份转储spfile

    利用rman自己主动备份转储spfile [情景简单介绍] 生产环境丢失了server的參数文件,rman已开启自己主动备份设置. [操作过程简述] ----启动rman $rman target / ...

  8. android 之WebView

    (一)使用中遇到的问题: 1.解决webview缓存: WebSettings.LOAD_NO_CACHE   或者直接清除缓存 webView.getSettings().setCatchMode( ...

  9. vim插件ctags的安装和使用【转】

    本文转载自:http://blog.csdn.net/g_brightboy/article/details/16830395 [ctags功能]: 为源码的变量/对象.结构体/类.函数/接口.宏等产 ...

  10. How to: Specify the Web Server for Web Projects in Visual Studio

    https://msdn.microsoft.com/en-us/library/ms178108(v=vs.120).aspx When you run a Web project in Visua ...