CSS——ul(demo)
2024-10-01 01:02:53
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>
效果:
最新文章
- is_null, empty, isset, unset对比
- linux笔记:shell编程-文本处理命令
- C#编程利器之三:接口(Interface)【转】
- TCommThread -- 在delphi线程中实现消息循环
- ORACLE中大数据量查询实现优化
- 什么是php命名空间
- 原生化:AnDevCon 2014 McVeigh 的主题演讲
- 射频识别技术漫谈(22)——RC系列射频芯片的寄存器操作
- Python全栈【进程、线程】
- Django用自定义cookies 实现登录,注册,退出
- jMeter入门实例
- python掉微信api
- 根据 中序遍历 和 后序遍历构造树(Presentation)(C++)
- JavaWeb学习笔记总结 目录篇
- JAVA_SE基础——2.环境变量的配置&测试JDK
- 启动Docker容器
- 关于怎样获取DevExpress GridView过滤后或排序后的数据集问题(转)
- Codeforces 838 B - Diverging Directions
- MQTT连接服务器返回2
- ZeroClipboard插件,复制到剪切板