freecodecamp_认证项目_致敬页

点击查看代码

<html>
 <head>
   <link rel="stylesheet" href="styles.css">
 </head> 
 <body>
   <main id="main">
        <h1 id="title">Lovely Lin Daiyu<h1>
        <p>The heroine of a dream of Red Mansions</p>
        <figure id="img-div">
            <img id="image" src="./b.jpg" alt="Sister Lin">
            <figcaption id="img-caption">
                Lin Daiyu, the heroine of the Chinese classical novel A Dream of Red Mansions, 
                one of the double first volumes of the 12 Flowers of Jinling 
            </figcaption>
        </figure>
        <section id="tribute-info">
           <h3 id="headline">There are poems written by this lovely girl:</h3> 
           <ul>
                <li>
                     <strong>《葬花吟》</strong>-“侬今葬花人笑痴，他年葬侬知是谁？”
                </li>
                <li>
                     《桃花女儿行》-“一声杜宇春归尽，寂寞帘栊空月痕！”
                </li>
                <li>
                    《秋窗风雨夕》-“谁家秋院无风入? 何处秋窗无雨声？”
                </li>
                <li>
                    《咏白海棠》-“半卷湘帘半掩门，碾冰为土玉为盆。”
                </li>
                <li>
                    《咏菊》-“满纸自怜题素怨，片言谁解诉秋心。”
                </li>
                <li>
                    《问菊》-“孤标傲世偕谁隐，一样花开为底迟？”
                </li>
                <li>
                    《菊梦》-“醒时幽怨同谁诉，衰草寒烟无限情。”
                </li>
                <li>
                    《世外仙源匾额》-“香融金谷酒,花媚玉堂人。”
                </li>
                <li>
                    《杏帘在望》-“盛世无饥馁,何须耕织忙。”
                </li>
                <li>
                    《宝玉参禅》-“无端弄笔是何人？剿袭南华庄子文。”
                </li>
           </ul>
           <h3>
            If you have time, please learn more about Lin Daiyu in <a id="tribute-link" target="_blank" href="https://so.gushiwen.cn/guwen/book_46653FD803893E4F3F8B9229F3CD9433.aspx">
                the dream of Red Mansions</a>.
           </h3>
        </section>
   </main>
 </body>
</html>

css样式如下：

点击查看代码

#main{
    margin:30px 8px;
    padding: 15px;
    border-radius: 5px;
    background: #eee;
}
h1{
    font-size: 2rem;
    margin-bottom:0;
    display: block;
}
p{
    font-size: 1.5rem;
}
body{
    font-family: sans-serif,'Helvetica Neue';
    text-align: center;
    color:#333;
    margin: 0;
}
#image{
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
#img-div{
    padding: 10px;
    margin: 0;
    max-width: 100%;
}
#img-caption{
    margin: 15px 0 5px 0;
}
ul{
    display: block;
    max-width: 900px;
    margin: 0 auto 50px auto;
    text-align: center;
    line-height: 2.6;
}
li{
    margin: 16px 0;
}