实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.21作业</title>
<style type="text/css">
div {
background-image: url(../images/timg.jpg);
width: 700px;
height: 500px;
border-radius: 15px;
letter-spacing: 0.4em;
padding: 15px;
background-size: 730px 530px;
text-align: center;
line-height: 2.2em;
font-size: 18px;
}
#i1{
color: red;
}
.i1{
background-color: lightgreen;
}
#i1+li{
color: green;
}
.i3~li{
color: blue;
}
*[id]{
background-color: yellow;
}
li[class="i3"]{
color: white;
}
li[class~="i3"]{
background-color: red;
}
li[class*="2"]{
color: orange;
}
li[class^="r"]{
background-color: orange;
}
li[class$="n"]{
background-color: white;
}
</style>
</head>
<body>
<div>
<ul type="none">
<li><h3>沁园春·雪</h3></li>
<li id="i1">北国风光，千里冰封，万里雪飘。</li>
<li id="i2">望长城内外，惟余莽莽；大河上下，顿失滔滔。</li>
<li class="i1">山舞银蛇，原驰蜡象，欲与天公试比高。</li>
<li class="i2 i3">须晴日，看红装素裹，分外妖娆。</li>
<li class="red">江山如此多娇，引无数英雄竞折腰。</li>
<li class="i3">惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</li>
<li class="i1">一代天骄，成吉思汗，只识弯弓射大雕</li>
<li id="blue">俱往矣，数风流人物，还看今朝。</li>
<li class="green">作者：毛泽东</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
