⽤web前端所学知识创建⼀个简单版的个⼈介绍页⾯
完成第⼀部分简单的学习，现在进⾏前端的简单项⽬实践。并记录下来！本⽂记录第⼀个静态页⾯的制作！
PS：这是在freecodecamp上的第⼀个⼊门级测试项⽬。
现有要求如下：
需求 3：我应该看到⼀个带有对应id="img-div"的div元素。
需求 4：在img-div元素内，我应该看见有对应id="image"的img元素。
需求 5：在img-div元素内，我应该看见⼀个具有相应id="img-caption"的元素，其中包含对img-div中图像的描述。
需求 6：我应该看见具有对应id=“tribute-info"的元素，其中包含描述致敬页主题的⽂本内容
需求 7：我应该看见具有对应id=“tribute-link"的元素，它链接到⼀个包含有关致敬页主题额外信息的外部⽹页，提⽰：你必须为元素提供target属性，并设置为_blank以便在新选项卡中打开连接（例target=”_blank”）。
需求 8：img元素应相对于其⽗元素的宽度响应地调整⼤⼩，但不超过其原始⼤⼩。
需求 9：img在其⽗元素内居中。
//*创建⼀个以“周杰伦”个⼈的简单介绍页⾯，页⾯素材来均源于百度。
1.创建html⽂件，包含页⾯标题、关键词、描述的<head>标签：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>致敬周杰伦，⼀位伴随8090青春的⾳乐⼈-⼩单车blog</title>
<meta name="Keywords" content="周杰伦，致敬周杰伦，周杰伦⾳乐历程">
<meta name="Description" content="周杰伦（Jay Chou），1979年1⽉18⽇出⽣于台湾省新北市，毕业于淡江中学，流⾏乐男歌⼿、⾳乐⼈、演员、导演、编剧等。">
</head>
<body>
</body>
</html>
2.创建全局框架：包含所有ID⽂件
<body id="main"> <!--对应id="main"的元素，其中包含其他的所有元素-->
<header id="title"><!--具有相应id="title"的元素，其中包含描述致敬页主题的字符串-->
<h1>周杰伦（Jay Chou）</h1>
<p>致敬周杰伦，⼀位伴随8090青春的⾳乐⼈.</p>
</header>
<main>
<div id="img-div"><!--对应id="img-div"的div元素-->
<img src="b.bdstatic/bb967520ea98667b783920ab03cc53b9.jpeg" alt="周杰伦" id="image">
<!--在img-div元素内，我应该看见有对应id="image"的img元素。 -->
<p id="img-caption"> <!--在img-div元素内，具有相应id="img-caption"的元素，其中包含对img-div中图像的描述。-->
周杰伦（Jay Chou），1979年1⽉18⽇出⽣于台湾省新北市，毕业于淡江中学，流⾏乐男歌⼿、⾳乐⼈、演员、导演、编剧等。</p>
</div>
<div id="tribute-info"><!--具有对应id="tribute-info"的元素，其中包含描述致敬页主题的⽂本内容-->
<div id="tribute-footer">
<a href="baike.baidu/item/%E5%91%A8%E6%9D%B0%E4%BC%A6" target="_blank" id="tribute-link">
<!--具有对应id="tribute-link"的元素，并赋予target属性“_blank”--><button>了解更多</button></a>
</div>
</div>
</main>
3.创建css：实现img元素应相对于其⽗元素的宽度响应地调整⼤⼩，但不超过其原始⼤⼩。实现img居中。
周杰伦的所有歌曲#img-div{
background-color: #fff;
border: 0px solid rgba(145,145,145,0.5); padding: 3%;
margin-bottom: 5%;
}
#img-div img{
max-width: 100%;
display: block;
border-radius: 5px;
margin: 0 auto;
}
发布评论