响应式网页设计项目
Willem Zhang Lv5

制作一个致敬页

需求 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

1
2
3
4
5
6
7
img {
max-width: 100%;
<--!为什么需要下面的?-->
display: block;
height: auto;
margin: 0 auto;
}

需求9

1
2
3
body {
text-align: center;
}

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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

1
2
3
4
5
6
7
8
9
10
11
body {
text-align: center;
}


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

链接

codepen

  • Post title:响应式网页设计项目
  • Post author:Willem Zhang
  • Create time:2021-03-25 03:30:49
  • Post link:https://ataraxia.top/2021/03/24/响应式网页设计项目/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments