第八课--列表
程序员文章站
2022-03-09 18:20:50
...
a.
list-style-type:circle /*圆圈*/
list-style-type:square /*方块*/
list-style-type:upper-roman/*希腊数字*/
list-style-type:lower-alpha/*英文排序*/
list-style-image: url('demo.png');/*标记加图片*/
b.
兼容
ul
{
list-style-type:none;
padding:0px;
margin:0px;
}
ul li
{
background-image:url('demo.png');
background-repeat:no-repeat;
background-position:0px 5px;
padding-left:14px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<link rel="stylesheet" href="demo.css">
</head>
<body>
<p>无序列表实例:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>/*圆圈*/
/*ul.a {*/
/*list-style-type: circle;*/
/*}*/
/*!*方块*!*/
/*ul.b {*/
/*list-style-type: square;*/
/*}*/
/*!*希腊数字*!*/
/*ol.c {*/
/*list-style-type: upper-roman;*/
/*}*/
/*!*英文排序*!*/
/*ol.d {*/
/*list-style-type: lower-alpha;*/
/*}*/
/*!***/
/*标记加图片*/
/**!*/
/*ul {*/
/*list-style-image: url('demo.png');*/
/*}*/
/*!***/
/*兼容*/
/**!*/
/*ul {*/
/*list-style-type: none;*/
/*padding: 0px;*/
/*margin: 0px;*/
/*}*/
/*ul li {*/
/*background-image: url('demo.png');*/
/*background-repeat: no-repeat;*/
/*background-position: 0px 5px;*/
/*padding-left: 14px;*/
/*}*/
上一篇： 常用Linux命令总结