题目:
设计如图所示的一个页面
代码:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>诗《初相遇》</title>
<link rel="stylesheet" href="./css/fontsize.css">
</head>
<body>
<div>
<h1>
初相遇 <span>文/席慕容</span>
</h1>
<p>
<span class="two">美</span>丽的梦和美丽的诗一样,都是可遇而不可求的,常常在最没能料到的时刻里出现。
</p>
<p>我喜欢那样的梦,在梦里,一切都可以重新开始,一切都可以慢慢解释,心里甚至还能感觉到,所有被浪费的时光竟然都能重回时的狂喜与感激。<span class="three">胸怀中满溢着幸福,只因你就在我眼前</span>,对我微笑,一如当年。</p>
<p>
我喜欢那样的梦,明明知道你已为我跋涉千里,却又觉得芳草鲜美,落落英缤纷,好像你我才初相遇。
</p>
</div>
</body>
</html>
css:
div
{
background: -moz-linear-gradient(#CAEFFE,#FFFFED);
width:500px;
}
h1
{
font-size: 24px;
font-weight: lighter;
text-align:center;
color:#06F;
line-height: 1.8;
text-shadow: darkgray 1px 1px 1px;
}
h1 span
{
font-size: 12px;
color:#808080;
font-weight: 200;
text-shadow: darkgray 1px 1px 1px;
}
p
{
font-size: 12px;
text-indent: 2em;
line-height: 22px;
}
p .two
{
color:#FF1493;
font-size: 18px;
font-weight: bold;
text-shadow: black 2px 2px 2px ;
}
p .three
{
font-style: italic;
font-weight: bold;
color:darkorange;
font-size: 16px;
}
p:last-child
{
color:green ;
text-decoration: underline;
}
运行结果: