列表属性
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 class="div1">divvvv</div> <p>pppppp</p> <div class="outer"> <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，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失*/ }