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. new出来的对象无法调用@Autowired注入的Spring Bean

    @Autowired注入Spring Bean,则当前类必须也是Spring Bean才能调用它,不能用new xxx()来获得对象,这种方式获得的对象无法调用@Autowired注入的Bean. 1 ...

  2. 6、Java并发性和多线程-并发性与并行性

    以下内容转自http://tutorials.jenkov.com/java-concurrency/concurrency-vs-parallelism.html(使用谷歌翻译): 术语并发和并行性 ...

  3. stl空间配置器alloc

    new运算包含两阶段操作: 1) 调用::operator new分配内存     2) 调用构造函数构造对象内容 delete运算包含两阶段操作: 1)调用析构函数将对象析构    2)调用::op ...

  4. cisco路由器上的DHCP

    一.实验拓扑 二.具体配置 Router(config)#do sh run Building configuration...   Current configuration : 604 bytes ...

  5. 你不知道的JavaScript--Item34 大白话解说Promise

    去年6月份. ES2015正式公布(也就是ES6.ES6是它的乳名),当中Promise被列为正式规范.作为ES6中最重要的特性之中的一个,我们有必要掌握并理解透彻.本文将由浅到深,解说Promise ...

  6. C++之：友元类

    一.文章来由 上一篇写了友元函数,这一次写一个姊妹篇,继续深入探究一下友元类. 二.定义 友元类的全部成员函数都是还有一个类的友元函数.都能够訪问还有一个类中的隐藏信息(包含私有成员和保护成员). 当 ...

  7. configure: error: mysql configure failed. Please check config.log for more information.

    为php添加mysql模块时报错 configure: error: mysql configure failed. Please check config.log for more informat ...

  8. LeetCode 961. N-Repeated Element in Size 2N Array (重复 N 次的元素)

    题目标签:HashMap 题目给了我们一个size 为 2N 的int array,其中有 N + 1 个唯一的 数字,让我们找出那个重复的数字. 利用hashset,把每一个数字存入,一旦发现有重复 ...

  9. Codeforces Round #273 (Div. 2) B . Random Teams 贪心

    B. Random Teams   n participants of the competition were split into m teams in some manner so that e ...

  10. 数据库操作语句大全(sql)

    一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...