demo02ex1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#p1{
color: red;
font-size: 18px;
}
#p2{
color: red;
font-size: 12px;
}
#p3{
font-size: 12px;
}
</style>
</head>
<body>
<p id="p1">破阵子·为陈同甫赋壮词以寄之</p>
<hr />
<p id="p2">
醉里挑灯看剑，梦回吹角连营。<br />
八百里分麾下炙，五十弦翻塞外声。<br />
沙场秋点兵。
</p>
<p id="p3">
马作的卢飞快，弓如霹雳弦惊。<br />
了却君王天下事，赢得生前身后名。<br />
可怜白发生!
</p>
</body>
</html>
demo02ex2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#p1{
font-size: 30px;
}
#p1 font{
color: red;
}
#f1{
color:red;
}
#p4{
font-weight: bold;
}
</style>
</head>
<body>
<p id="p1">
<font>花千骨</font>大结局
</p>
<p>
xxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxx
</p>
<p>
gggggggggggggggggggggggg
ggggggggggg<font id="f1">gghhh</font>gggggg
gggggggggggg
</p>
<p id="p4">dddddddddddd</p>
</body>
</html>
demo02ex3.html
<!DOCTYPE html>
<html><!--类选择器,id选择器,文本样式-->
<head>
<meta charset="UTF-8">
<title></title>
<style>
.p1 {
color: green;
font-size: 2;
}
#p2 {
color: blue;
font-size: 2;
}
</style>
</head>
<body>
<h2>原谅</h2>
<p class="p1">
春天来了<br /> 我去小溪边砸冰
<br /> 把春天砸的头破血流
<br /> 直淌眼泪
<br /> 到了花开的时候
<br /> 它就把那些事儿忘了
<br /> 真正原谅了我
</p>
<p id="p2">出自:
<孩子们的诗>
</p>
<!--id选择器-->
<p class="p1">
<!--类选择器-->
<孩子们的诗>qqqqqqqqqqqqqqqq
</p>
</body>
</html>
demo02ex4.html
<!DOCTYPE html>
<html><!--后代选择器,图片标签,p标签-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Document</title>
</head>
<style>
.title1 {
font-size: 30px;
<li class="li3">美术基础</li>
}
.title2 {
font-size: 30px;
}
.contant1 {
text-indent: 2em;
}
.contant2 {
text-indent: 2em;
}
</style>
<body>
<img src="img/01.jpg" alt="" width="50px" height="50px" />
<p class="title1">游戏背景</p>
<p class="contant1">是一款什么什么样的游戏购物迪欧委员会把我hi越第五课打咯婉菡的不赖都会变</p>
<p class="title2">游戏特色</p>
<p class="contant2">叮叮叮叮叮叮叮叮叮购物迪欧委员会把我hi越第五课打咯婉菡的不赖都会变为上QUI我巴哈可惜我卡机 不看声卡和ID卡还贷款IE的可能吃不死
</p>
<a href="">我要提产品建议</a>
</body>
</html>
demo02ex5.html
<!DOCTYPE html>
<html>
<!--标签嵌套,后代选择器-->
<head>
<meta charset="UTF-8">
<title>东软睿道学习平台</title>
<style>
#u1 .li {
color: #0000FF;
}
#u2 .li2 {
color: #FF0000;
}
#ol .li3 {
color: #008000;
}
</style>
</head>
<body>
<h2>小婉菡学习平台</h2>
<font>欢迎来到小婉菡学习平台,这里将为您提供丰富的学习内容</font>
<ul id="u1">
<li class="li">网页制作
<ul>
<li class="li">使用Dreameaver制作网页</li>
<li class="li">使用css布局和美化页面
<ul id="u2">
<li class="li2">css初级</li>
<li class="li2">css中级</li>
<li class="li2">css高级</li>
</ul>
</li>
<li>使用JavaScript制作网页特效</li>
</ul>
</li>
<li class="li">平面设计
<ol id="ol">
<li class="li3">美术基础</li>
<li class="li3">使用Photoshop处理图形技术</li>
<li class="li3">使用illustor设计图形</li>
<li class="li3">制作flash动画</li>
</ol>
</li>
</ul>
<font>如果您有任何问题,欢迎给我们留言</font>
</body>
</html>
