初相遇

题目:
        设计如图所示的一个页面

《初相遇》

​​​

代码:
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;

}

运行结果:

《初相遇》

    原文作者:逍遥_9353
    原文地址: https://www.jianshu.com/p/ac8cacd58fc7
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞