用html写一个自我评价网页,要求美观
时间: 2024-09-13 15:07:38 浏览: 51
创建一个美观的自我评价HTML页面,你可以按照以下步骤进行:
首先,确定基本结构:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人自我评价</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入样式表 -->
</head>
<body>
<header>
<h1>个人自我评价</h1>
</header>
<section id="about">
<div class="profile-image">
<img src="avatar.jpg" alt="个人头像">
</div>
<div class="intro-text">
<p>在这里写下你的基本信息和专业特长...</p>
</div>
</section>
<section id="skills">
<h2>技能展示</h2>
<ul>
<li><span>技能一</span>: 描述技能一及其重要性</li>
<li><span>技能二</span>: 描述技能二</li>
<li><span>技能三</span>: 描述技能三</li>
</ul>
</section>
<section id="experience">
<h2>工作经历</h2>
<div class="work-item">
<h3>职位名称</h3>
<p>简述经验内容...</p>
</div>
</section>
<footer>
<p>版权所有 &copy; 你的名字</p>
</footer>
</body>
</html>
接下来,创建一个styles.css
文件,添加一些美化样式:
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #f2f2f2;
padding: 20px;
text-align: center;
}
#about {
display: flex;
justify-content: space-between;
align-items: center;
height: 250px;
}
.profile-image img {
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover;
}
.skill-list {
list-style-type: none;
padding: 0;
}
.skill-list li {
margin-bottom: 10px;
}
footer p {
color: gray;
}