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. Java的动态代理(DynamicProxy)

    代理的概述 代理是一种常用的设计模式,其目的就是为其他对象提供一个代理以控制对某个对象的访问.代理类负责为委托类预处理消息,过滤消息并转发消息,以及进行消息被委托类执行后的后续处理. 代理模式UML图 ...

  2. Ubuntu 16.04修复PDF默认使用ImageMagick打开无法设置其它默认的问题（默认打开程序设置）

    打开:~/.config/mimeapps.list 去掉以下几项: image/pdf=display-im6.desktop image/pdf=display-im6.q16.desktop;d ...

  3. 将完整的Maven远程存储库下载到本地存储库（别试了，不太可取）

    别试了,这种方式不太可取. 要解决可以有如下思路: 1.做成镜像站点,有如下命令: wget -m http://site.to.mirror.com #-m代表“镜子”. rsync repo1.m ...

  4. Android GIS开发系列-- 入门季（1） 起点

    前言 这个系列,待最终完成更新,大家体谅点,第一版本全部是参考的网络教程,最近会逐步的细化更新为可以直接使用的情况. 本系列的开发基于AS (  Android Studio ), 和ArcGIS 的 ...

  5. 1. 找出数组中的单身狗OddOccurrencesInArray Find value that occurs in odd number of elements.

    找出数组中的单身狗: 1. OddOccurrencesInArray Find value that occurs in odd number of elements. A non-empty ze ...

  6. 扩展VirtualBox中的centos硬盘大小

    一.克隆文件 我之前安装的时候建的是centos 6.3.可是后来空间不够,没办法,又不想重装centos.由于好多东西要配置,特麻烦,所以先想到了使用resize命令,可是在win8中运行D:\Pr ...

  7. LeetCode 266. Palindrome Permutation （回文排列）$

    Given a string, determine if a permutation of the string could form a palindrome. For example," ...

  8. BZOJ 2338 HNOI2011 数矩形 计算几何

    题目大意:给定n个点,求一个最大的矩形,该矩形的四个顶点在给定的点上 找矩形的方法是记录全部线段 若两条线段长度相等且中点重合 这两条线段就能够成为矩形的对角线 于是我们找到全部n*(n-1)/2条线 ...

  9. excel 字符串拼接 添加 超链接

    =HYPERLINK("http://"&C2,"http://"&C2)

  10. touch事件的分发机制

    作者:谢昆 一段伪代码反应整个touch事件的分发 public boolean dispatchTouchEvent(MotionEvent event) { boolean consume = f ...