列表样式<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>task-7-1</title>
<meta name="description" content="">
padding: 10px;
border:dotted 1px #999;
border-right: solid 3px #666;
border-bottom: solid 3px #666;
border-radius:10px;
}
.
list-style div h3{
color:#333;
border-bottom: dashed 1px #666;        margin-bottom: 5px;
}
.list-style ol{
list-style-position: inside;
}
.decimal ol{
list-style-type: decimal;
}
.disc ol{
list-style-type: disc;
}
.circle ol{
list-style-type: circle;
}
.square ol{
list-style-type: square;
}
.decimal-leading-zero ol{
list-style-type: decimal-leading-zero;    }
.lower-roman ol{
list-style-type: lower-roman;
}
.upper-roman ol{
list-style-type: upper-roman;
}
.lower-alpha ol{
div border属性list-style-type: lower-alpha;
}
.upper-alpha ol{
list-style-type: upper-alpha;
}
.
img ol{
list-style-image: url("1.png");
}
.gou-zi ol{
list-style: none;
}
.gou-zi ol div.left{
width:0;
height:0;
border:#555 solid 10px;
border-top-color:#fff ;
border-right-color:#fff;
border-bottom-color: #fff;
display: inline-block;
position: relative;
top:5px;
left:0px;
}
.gou-zi ol div.right{
width:0;
height:0;
border:#555 solid 10px;
border-top-color:#fff ;
border-left-color:#fff;
border-bottom-color: #fff;
display: inline-block;
position: relative;
top:5px;
right:2px;
}
}
.user-style dt{
font-size: 18px;
font-weight: bold;
color:#333;
border-bottom: dashed 1px #555;        padding-bottom: 10px;
}
.user-style dd:first-of-type{
margin-top: 10px;
color:red;
}
.user-style dd:last-child{
color:rgba(123,345,23,0.5);
}
.
user-style dd:nth-child(3){
color:purple;
}
</style>
</head>
<body>
<div class="list-style">
<h3>常见列表样式</h3>
<div class="decimal">
<h3>decimal</h3>
<ol>
<li>list-lab</li>
<li>list-lab</li>
<li>list-lab</li>
</ol>
</div>
<div class="disc">
<h3>disc</h3>
<ol>
<li>list-lab</li>
<li>list-lab</li>
<li>list-lab</li>
</ol>
</div>
<div class="circle">
<h3>circle</h3>
<ol>
<li>list-lab</li>
<li>list-lab</li>
<li>list-lab</li>
</ol>
</div>
<div class="square">
<h3>square</h3>
<ol>
<li>list-lab</li>
<li>list-lab</li>
<li>list-lab</li>
</ol>
</div>
<div class="decimal-leading-zero">            <h3>decimal-leading-zero</h3>            <ol>
<li>list-lab</li>
<li>list-lab</li>
<li>list-lab</li>
</ol>
</div>
<div class="lower-roman">
<h3>lower-roman</h3>
<ol>
<li>list-lab</li>
<li>list-lab</li>
<li>list-lab</li>
</ol>
</div>
<div class="upper-roman">
<h3>upper-roman</h3>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。