freecodecamp//响应式 Web 设计//项目实战——1制作一个致敬业（Build a Tribute Page）

最新推荐文章于 2022-11-02 14:30:16 发布

爱吃松果的美美

最新推荐文章于 2022-11-02 14:30:16 发布

阅读量1.1k

点赞数 2

分类专栏：实战文章标签： css html

本文链接：https://blog.csdn.net/weixin_37877794/article/details/108104213

版权

实战专栏收录该内容

6 篇文章 2 订阅

订阅专栏

文章目录

一、项目的具体要求见：
二、我的代码详情在：

一、项目的具体要求见：

https://learn.freecodecamp.one/responsive-web-design/responsive-web-design-projects/build-a-tribute-page/

二、我的代码详情在：

https://codepen.io/janmie-cjm/pen/MWyeZbp
在这里插入图片描述

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>致敬业</title>
</head>
<body>
  <div id="main">
    <h1 id="title">Dr. Norman Borlaug</h1>
    <div id="img-div">
      <img id="img" src="http://image1.wulinsoso.com/hdpic/16sucai/2014/01/12/0311471111.jpg">
      <br>
      <figcaption>自然人物照</figcaption>
    </div>
    <div id="tribute-info">
      <a href="https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Data_form_validation" target="_blank"><em>我是致敬业主题额外信息的外部网页</em></a>
    </div>
  </div>
</body>
</html>

CSS

body {
  width: 500px;
  height: 500px;
  font-size: 12px;
}
#img-div{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 20px;
}
#img {
  width: 250px;
  height: auto;
}
a {
  color: black;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: red;
}

*代码尚存在很多不足，望提出不同的意见，互相交流。*