列表属性
ol,ul{
/*list-style: disc;*/
/*
实心圆点*/
/*list-style: square;*/
/*实心小方块*/
/*list-style: circle;*/
/*空心圆点*/
/*list-style: decimal;*/
/*1/2/3数字排序*/
/*list-style: decimal-leading-zero;*/
/*01/02/03数字排序*/
/*list-style: upper-alpha;*/
/*大写ABC排序*/
/*list-style: lower-alpha;*/
/*小写abc排序*/
list-style: none;
/*无任何排序符*/
padding: 0;
/*去掉列表前面的空格*/
}
<ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
<!--ol有序列表默认1/2/3进行排序-->
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
<!--ul无序列表默认实心圆点进行排序-->
display属性
E{
display: inline;
/*inline把块级标签设置成
内联标签，不
独占一行且不能设置宽高*/
display: block;
/*block把内联标签设置成块级标签，独占一行且可以设置宽高*/
display: inline-block;
/*inline-block既有内联标签的不独占一行又有块级标签的可设置宽高，inline-block默认设置了间隙*/
display: none;
/*none隐藏该元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="css列表属性和display属性">
<meta name="description" content="studying">
<meta http-equiv="Refresh" content="1800;https://www.baidu.com">
<meta http-equiv="x-ua-compatible" content="IE=EmulateIE7">
<title>标题</title>
<link rel="stylesheet" href="day110.css">
<link rel="icon" href="https://www.baidu.com/favicon.ico">
<!--<script src="js.js"></script>-->
</head>
<body>
<ol>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
</ol>
<!--默认1/2/3进行排序-->
<ul>
<li>第一节</li>
<li>第二节</li>
<li>第三节</li>
</ul>
<!--默认实心圆点进行排序-->
<dl>
<dt>总述</dt>
<dd>第一分述</dd>
<dd>第二分述</dd>
</dl>
<div >divvvv</div>
<p>pppppp</p>
<div >
<span>spannn</span>
<a href="">aaaaaa</a>
<!--将span和a标签内嵌于div标签，然后对div标签利用word-spacing去除文字间隔达到去间隙效果-->
</div>
</body>
</html>
ol,ul{
/*list-style: disc;*/
/*实心圆点*/
/*list-style: square;*/
/*实心小方块*/
/*list-style: circle;*/
/*空心圆点*/
/*list-style: decimal;*/
/*1/2/3数字排序*/
/*list-style: decimal-leading-zero;*/
/*01/02/03数字排序*/
/*list-style: upper-alpha;*/
/*大写ABC排序*/
/*list-style: lower-alpha;*/
/*小写abc排序*/
list-style: none;
/*无任何排序符*/
padding: 0;
/*去掉列表前面的空格*/
}
div,p,span,a{
height: 100px;
width: 100px;
}
div{
background-color: yellow;
/*display: inline;*/
}
p{
background-color: #d900ff;
/*display: inline;*/
/*inline把块级标签设置成内联标签，不独占一行且不能设置宽高*/
}
span{
background-color: red;
/*display: block;*/
/*block把内联标签设置成块级标签，独占一行且可以设置宽高*/
display: inline-block;
}
a{
background-color: green;
/*display: block;*/
display: inline-block;
/*inline-block既有内联标签的不独占一行又有块级标签的可设置宽高，inline-block默认设置了间隙*/
}
.outer{
width: 200px;
height: 100px;
word-spacing: -5px;
}
.div1{
display: none;
/*none隐藏该元素，且隐藏的元素不会占用任何空间。也就是shuo，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失*/
}
css列表属性和display属性
微信扫一扫
支付宝扫一扫
评论列表（0条）