初相遇

最新推荐文章于 2025-01-19 17:38:05 发布

梦逸雨涵

最新推荐文章于 2025-01-19 17:38:05 发布

阅读量2.3k

点赞数 3

分类专栏： web 文章标签： HTML CSS

本文链接：https://blog.youkuaiyun.com/qq_41943578/article/details/88418490

版权

web 专栏收录该内容

9 篇文章

订阅专栏

题目：

设计如图所示的一个页面

é¡µé¢å®æææå¾.jpg

代码：

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;
}

运行结果：