响应式网页设计项目

制作一个致敬页

需求 1： 此 app 中应存在一个 id=”main” 的元素，页面上的所有元素都应置于这个元素中。

需求 2： 此 app 中应存在一个 id=”title” 的元素，其中包含描述致敬页主题的字符串文本，如 “Dr. Norman Borlaug”。

需求 3： 此 app 中应存在一个 id=”img-div” 的 div 元素。

需求 4： 在 img-div 元素内，应存在一个 id=”image” 的 img 元素。

需求 5： 在 img-div 元素内，应存在一个相应的 id=”img-caption” 的元素，其中包含对 img-div 中图像的描述文本。

需求 6： 此 app 中应存在一个 id=”tribute-info” 的元素，其中应包含描述致敬页主题的内容文本。

需求 7： 此 app 中应存在一个 id=”tribute-link” 的 a 元素，它应链接到一个包含有关致敬页主题额外信息的外部网页。 提示：你必须为 a 元素提供 target 属性，并将其属性值设置为 _blank（即 target=”_blank”），这样才可以在新选项卡中打开链接。

需求 8： img 元素应相对于其父元素的宽度自动调整大小，但不超过图片的原始大小。

需求 9： img 应在其父元素内居中。

需求8

img {
    max-width: 100%;
    <--!为什么需要下面的？-->
    display: block;
    height: auto;
    margin: 0 auto;
}

需求9

body {
    text-align: center;
}

HTML

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<main id="main">
  <h1 id="title">雫るる<h1/>
  <p>雫Lulu（日语：雫るる）是一名活跃于bilibili、QQ群的虚拟UP主，原隶属于フェレット女学院（雪貂女学院），现转为个人势</p>
  <figure id="img-div">
    <img id="image" src = "https://cdn.jsdelivr.net/gh/kiritosan/pic@master/img/lulu%E6%95%AC%E7%A4%BC.png"/>
    <figcaption id="img-caption">Lulu敬礼</figcaption>
  </figure>

  <section id="tribute-info">
    <h3>简介</h3>
    <ul>
      <li>人设是多余的，实际上就是一个顶着动态头像的普通（沙雕）网友。

自由的女人。

喜欢脑控。

表面上是清楚大小姐，实际上可能是快递员。[1]

🎀 胸前的蝴蝶结可能是Kanna的……

帽子下是猫耳。(于2020年5月23日新衣服实装。)

53岁，是抖M（本人语，用中文）。

阅读更多：雫Lulu（https://zh.moegirl.org.cn/%E9%9B%ABLulu ）
本文引自萌娘百科(https://zh.moegirl.org.cn )，文字内容默认使用《知识共享 署名-非商业性使用-相同方式共享 3.0》协议。</li>
    </ul>
  </section>
   <h3>
      阅读更多，<a id="tribute-link" href="https://zh.moegirl.org.cn/%E9%9B%ABLulu" target="_blank">了解lulu</a>.
   </h3>
    
    
</main>

CSS

body {
  text-align: center;
}


img {
    max-width: 100%;
    display: block;
    height: auto;
    margin: 0 auto;
}

链接

codepen