使用html5 制作一个大学生自我介绍网页要求有纯色背景线条装饰和轮毂划分区域个人图片以及附加的介绍可以通过点击页面中的图片从而实现页面的跳转功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大学生自我介绍</title>
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#header {
background-color: #2c3e50;
color: #fff;
padding: 20px;
text-align: center;
}
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
}
.section {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
margin: 10px;
padding: 20px;
width: 300px;
}
.section h2 {
border-bottom: 1px solid #ddd;
margin-top: 0;
padding-bottom: 10px;
}
.section img {
border-radius: 50%;
display: block;
margin: 0 auto;
width: 150px;
}
.section p {
text-align: justify;
}
.section a {
color: #2c3e50;
text-decoration: none;
}
.section a:hover {
color: #c0392b;
}
</style>
</head>
<body>
<div id="header">
<h1>大学生自我介绍</h1>
</div>
<div id="container">
<div class="section">
<img src="https://via.placeholder.com/150" alt="个人照片">
<h2>姓名</h2>
<p>大学专业：计算机科学与技术</p>
<p>兴趣爱好：编程、篮球</p>
<p>自我评价：热爱技术、勤奋好学、具有团队合作精神</p>
<a href="#">更多信息</a>
</div>
<div class="section">
<img src="https://via.placeholder.com/150" alt="个人照片">
<h2>姓名</h2>
<p>大学专业：英语</p>
<p>兴趣爱好：阅读、旅游</p>
<p>自我评价：英语口语流利、具有良好的沟通能力、善于发现问题并解决问题</p>
<a href="#">更多信息</a>
</div>
<div class="section">
<img src="https://via.placeholder.com/150" alt="个人照片">
<h2>姓名</h2>
<p>大学专业：会计</p>
<p>兴趣爱好：唱歌、跳舞</p>
<p>自我评价：具有较强的逻辑思维能力、细心认真、善于总结归纳</p>
<a href="#">更多信息</a>
</div>
</div>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/gCGm 著作权归作者所有。请勿转载和采集!