效果图:
一丶类
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
.p1{
color: red;
size: 20px
}
.r1{
color: red;
size: 20px
}
.p2{
color: red;
size: 20px
}
</style>
</head>
<body>
<h1>本周末任务计划</h1>
<ul class="p1">
<li>去书店买书</li>
<li>去逛街,给爸爸妈妈买新衣服</li>
<li>周六早上9点去见客户</li>
<li>周日带着乐乐去去公园画画</li>
</ul>
<h1>老哥排行榜</h1>
<ul class="r1">
<li>海阔天空</li>
<li>甜蜜蜜</li>
<li>一路上有你</li>
<li>我是一只小小鸟</li>
</ul>
<h1>友情链接</h1>
<ul class="p2">
<li>购书指南</li>
<li>账户管理</li>
<li>配送方式</li>
</ul>
</body>
</html>
二丶 id
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css" media="screen">
#p1{
color: red;
size: 20px
}
#r1{
color: #0DFC8B;
size: 20px
}
#p2{
color: #F806D8;
}
</style>
</head>
<body>
<h1>本周末任务计划</h1>
<ul id="p1">
<li>去书店买书</li>
<li>去逛街,给爸爸妈妈买新衣服</li>
<li>周六早上9点去见客户</li>
<li>周日带着乐乐去去公园画画</li>
</ul>
<h1>老哥排行榜</h1>
<ul id="r1">
<li>海阔天空</li>
<li>甜蜜蜜</li>
<li>一路上有你</li>
<li>我是一只小小鸟</li>
</ul>
<h1>友情链接</h1>
<ul id="p2">
<li>购书指南</li>
<li>账户管理</li>
<li>配送方式</li>
</ul>
</body>
</html>