<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="0703.css"></link><!---- 外部样式 链接CSS样式 ----->
</head>
<body>
<div>
<div></div>
</div>
<div>
<ul>
<li>今</li>
<li>天</li>
<li>是</li>
<li>7</li>
<li>月</li>
<li>5</li>
<li>日</li>
<li>天</li>
<li>气</li>
<li >热</li>
</ul>
</div>
</body>
</html>
css属性代码：
.box1{
background-color:red;
height:200px;
width:200px;
padding:20px;
border:6px dotted green;
border-radius:50%;
}
ul{
margin:0;
padding-left:0;
border:2px solid red;
width:700px;
}
ul li{
list-style:none;
width:40px;
height:40px;
background-color:DarkViolet;
border:2px solid red;
text-align:center;
line-height:40px; /*行高*/
border-radius:50%;/*设置圆角的角度*/
display:inline-block;/*设置内联块,使多个块元素可以显示在同一行*/
margin-left:20px;/*设置小球之间距离*/
}
.bg-color{
background-color:LightGreen;
}
ul :nth-last-child(3){ /* 倒数第3个子元素, */
background-color:DeepSkyBlue;
}
ul :nth-of-type(6){ /* 选择第6个li类型的元素 */
background-color:green;
}
实例如下：
