用HTML和css设计一个简单的个人主页代码用到图像，列表，音频，视频，表格
时间: 2024-09-25 12:04:05 浏览: 33
制作一个简单HTML传统端午节日网页（HTML+CSS）
在HTML和CSS中设计一个简单的个人主页可以包含多种元素，如图像、列表、音频、视频和表格。下面是一个基础的示例：
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>个人主页</title>
<link rel="stylesheet" href="styles.css"> <!-- 引入样式文件 -->
</head>
<body>
<!-- 顶部导航栏 -->
<header>
<nav>
<ul class="navbar">
<li><a href="#about">关于我</a></li>
<li><a href="#projects">作品集</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</nav>
</header>
<!-- 主体内容 -->
<main>
<!-- 图像展示区 -->
<section id="about">
<div class="profile-pic">
<img src="avatar.jpg" alt="个人头像">
</div>
<h2>简介</h2>
<p>这里放一些自我介绍的文字...</p>
</section>
<!-- 列表部分 -->
<section id="projects">
<h2>我的项目</h2>
<ul class="project-list">
<li>
<h3>项目名称</h3>
<p>简述项目描述...</p>
</li>
<!-- 可以添加更多项 -->
</ul>
</section>
<!-- 音频和视频嵌入 -->
<section id="media">
<h2>音乐/视频</h2>
<audio controls>
<source src="song.mp3" type="audio/mpeg">你的浏览器不支持 audio 元素。
</audio>
<video width="500" height="300" src="video.mp4" poster="preview.jpg" controls></video>
</section>
<!-- 表格显示信息 -->
<section id="resume">
<h2>简历</h2>
<table>
<thead>
<tr>
<th>技能</th>
<th>等级</th>
</tr>
</thead>
<tbody>
<tr>
<td>编程语言</td>
<td>CSS3 / HTML5</td>
</tr>
<!-- 添加更多技能条目 -->
</tbody>
</table>
</section>
</main>
<!-- 底部版权信息 -->
<footer>
© 2023 个人主页
</footer>
</body>
</html>
```
同时，对应的 `styles.css` 文件可能会包含如下样式：
```css
/* styles.css */
.navbar {
list-style-type: none;
display: flex;
justify-content: space-around;
}
.project-list {
list-style-type: disc;
padding-left: 20px;
}
.profile-pic {
width: 200px;
height: 200px;
border-radius: 50%;
}
audio,
video {
max-width: 100%;
}
```
阅读全文
相关推荐
