CSS——ul（demo）
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）的更多相关文章
- CSS Ul（列表样式）
CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表 ...
- 谈谈一些有趣的CSS题目（七）-- 消失的边界线问题
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 谈谈一些有趣的CSS题目（四）-- 从倒影说起，谈谈 CSS 继承 inherit
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- 谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- [bzoj1507][Usaco2009 Hol]Transmission Delay 传输谍延时_动态规划
Transmission Delay 传输谍延时 bzoj-1581 Usaco-2009 Hol 题目大意:题目链接. 注释:略. 想法: 动态规划. 首先我们考虑从后往前dp.(最近好多题都是从后 ...
- zoj——2588 Burning Bridges
Burning Bridges Time Limit: 5 Seconds Memory Limit: 32768 KB Ferry Kingdom is a nice little cou ...
- 四则运算结对编程（GUI）
四则运算GUI coding地址:https://git.dev.tencent.com/qyj814/GUI.git 结对伙伴:李梦宇 一.题目要求 定制出题要求.每次出题时用户都可以在界面上定制如 ...
- 线程调度策略SCHED_RR（轮转法）和SCHED_FIFO（先进先出）之对照
我们在用pthread创建线程时,能够指定调度策略policy--SCHED_OTHER(默认).SCHED_RR和SCHED_FIFO.这里TALK一下两个实时策略--SCHED_RR和SCHED_ ...
- hdu 1248 寒冰王座（暴力）
寒冰王座 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- mysql 多日志表结果集合拼接存储过程
通常单天的日志 仅仅记录当天的日志信息,假设须要查看一月内的日志信息须要对每天的日志表结果集合进行拼接,通经常使用到 union . 储存过程: drop PROCEDURE if EXISTS un ...
- 将分布式-队列的实现交给redis
import requestsimport reimport timefrom redis import Redisimport threading REDIS_HOST, REDIS_PORT, P ...
- Office 修改语言
- 主表a主表b 从表c中有ab两个表中各一个字段a1,b1 从表d中有ab两个表中各一个字段a2,b2
a1和a2在a表中具有唯一性 b1和b2在b表中具有唯一性 现在需要连接c表和d表 需要分两步来做 1.先让c表join表a和表b select c.*,a.a2,b.b2 from c inner ...
- 在Java中实现UDP协议编程（DatagramSocket/DatagramPacket）
1.什么是UDP协议? UDP( User Datagram Protocol )协议是用户数据报,在网络中它与TCP协议一样用于处理数据包.在OSI模型中,在第四层——传输层,处于IP协议的上一层. ...