目录
任务一：使用ID选择器
任务二：设置单一背景和重复背景
任务三：使用CSS进行无序列表的修饰
任务四：使用超链接
扩展训练_CSS选择器
扩展训练_列表修饰风格
扩展训练_超链接
任务一：使用ID选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ID选择器的应用</title>
<style type="text/css">
#first {
font-size: 16px;
}
#second {
font-size: 24px;
}
</style>
</head>
<body>
<h1>北京欢迎你</h1>
<p id="first">北京欢迎你，有梦想谁都了不起！</p>
<p id="second">有勇气就会有奇迹。</p>
<p>北京欢迎你，为你开天辟地</p>
<p>流动中的魅力充满朝气。</p>
</body>
</html>
任务二：设置单一背景和重复背景
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> background-repeat</title>
<style>
div{
width: 400px;
height: 400px;
border: 1px solid red;
background-image: url("image/1.jpg");
}
.div1{
background-repeat: repeat-x;
}
.div2{
background-repeat: repeat-y;
}
.div3{
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
任务三：使用CSS进行无序列表的修饰
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表样式</title>
<link href="css/background.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h2 class="title">全部商品分类</h2>
<ul>
<li><a href="#">图书</a> <a href="#">音像</a> <a href="#">数字商品</a></li>
<li><a href="#">家用电器</a> <a href="#">手机</a> <a href="#">数码</a></li>
<li><a href="#">计算机</a> <a href="#">办公</a></li>
<li><a href="#">家居</a> <a href="#">家装</a> <a href="#">厨具</a></li>
<li><a href="#">服饰鞋帽</a> <a href="#">个护化妆</a></li>
<li><a href="#">礼品箱包</a> <a href="#">钟表</a> <a href="#">珠宝</a></li>
<li><a href="#">食品饮料</a> <a href="#">保健食品</a></li>
<li><a href="#">彩票</a> <a href="#">旅行</a> <a href="#">充值</a> <a href="#">票务</a>
</li>
</ul>
</body>
</html>
任务四：使用超链接
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图书列表页</title>
<style>
p{
font-size: 14px;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
color: orange;
}
</style>
</head>
<body>
<!--图片超链接-->
<a href="#" >
<img src="image/img1.png" alt="姑娘，欢迎降落在这残酷的世界" title="姑娘，欢迎降落在这残酷的世界" />
</a>
<!--文字超链接-->
<p><a href="#" >海底两万里</a></p>
<p><a href="#" >作者：儒勒·凡尔纳</a></p>
<p>￥58</p>
</body>
</html>
扩展训练_CSS选择器
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<title>内嵌样式表</title>
<style type="text/css">
P{
font-family:"隶书";
font-size:18px;
color:#FF0000;
text-align:left;
}
.bg {
background-color: #CCFF33;
}
#content{
border:solid 1px #999;
height:220px;
width:300px
}
</style>
</head>
<body>
<h2>静夜思</h2>
<div id="content">
<h3>作者：李白</h3>
<p class="bg">床前明月光，</p>
<p>疑是地上霜。</p>
<p class="bg">举头望明月，</p>
<p>低头思故乡。</p>
</div>
</body>
</html>
扩展训练_列表修饰风格
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<title>所有列表修饰风格</title>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
</style>
</head>
<body>
<ul class="circle">
<li>Circle 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="square">
<li>Square 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="decimal">
<li>Decimal 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="decimal-leading-zero">
<li>Decimal-leading-zero 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="lower-roman">
<li>Lower-roman 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="upper-roman">
<li>Upper-roman 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="lower-alpha">
<li>Lower-alpha 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="upper-alpha">
<li>Upper-alpha 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="lower-greek">
<li>Lower-greek 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="lower-latin">
<li>Lower-latin 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="upper-latin">
<li>Upper-latin 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="hebrew">
<li>Hebrew 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="armenian">
<li>Armenian 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="georgian">
<li>Georgian 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="cjk-ideographic">
<li>Cjk-ideographic 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="hiragana">
<li>Hiragana 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="katakana">
<li>Katakana 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="hiragana-iroha">
<li>Hiragana-iroha 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
<ul class="katakana-iroha">
<li>Katakana-iroha 类型</li>
<li>茶</li>
<li>可口可乐</li>
</ul>
</body>
</html>
扩展训练_超链接
<! DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" / >
<title>表格和超链接样式</title>
<style type="text/css">
<!--
table {
background-color:#FFCCFF;
}
td {
color: #2A1FFF;
font-size: 14px;
padding:5px;
}
.style2 {color: #FF0000}
.style3 {
font-size: 16px;
font-weight: bold;
}
A{
color:#333333;
text-decoration:none;
}
A:hover
{
color:#FF5500;
text-decoration:underline;
}
-->
</style>
</head>
<body>
<table width="300" border="0" >
<tr>
<td colspan="4" class="style3">
珠宝首饰</td>
</tr>
<tr>
<td><a href="#">首饰套装</a></td>
<td><a href="#">流行饰品</a></td>
<td><a href="#">仿真饰品</a></td>
<td><a href="#">钻饰</a></td>
</tr>
<tr>
<td><a href="#">天然水晶</a></td>
<td class="style2"><a href="#" class="style2">翡翠手表</a></td>
<td><a href="#">仿真饰品</a></td>
<td> <a href="#">戒指</a></td>
</tr>
</table>
</body>
</html>
279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
