用web前端所学知识创建一个简单版的个人介绍页面

最新推荐文章于 2024-06-05 10:30:43 发布

网民阿三

最新推荐文章于 2024-06-05 10:30:43 发布

阅读量1w

点赞数 6

分类专栏： web前端文章标签： web前端个人介绍页面

本文链接：https://blog.csdn.net/weixin_43386439/article/details/99623878

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

完成第一部分简单的学习，现在进行前端的简单项目实践。并记录下来！本文记录第一个静态页面的制作！
PS：这是在freecodecamp上的第一个入门级测试项目。
现有要求如下：
需求 1：我的致敬页应有对应id="main"的元素，其中包含其他的所有元素
需求 2：我应该看到一个具有相应id="title"的元素，其中包含描述致敬页主题的字符串（即文本），如 “Dr. Norman Borlaug”。
需求 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="http://pic.rmb.bdstatic.com/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="https://baike.baidu.com/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;
		}

4.完善html+css代码,这里直接放完工后的项目地址。可以看看！
https://codepen.io/dachaoger/pen/MWgymdL