使用html＋css一个主页五个副业介绍一个人物
时间: 2024-02-11 21:08:31 浏览: 34
好的，以下是一个简单的HTML和CSS代码，用于创建一个包含人物介绍和五个副业的主页：
```html
<!DOCTYPE html>
<html>
<head>
<title>人物介绍</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
h1 {
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 30px;
}
.card {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
margin: 20px;
max-width: 300px;
padding: 20px;
text-align: center;
}
.card img {
border-radius: 50%;
margin-bottom: 10px;
max-width: 100%;
}
.card h2 {
font-size: 24px;
margin: 10px 0;
}
.card p {
font-size: 18px;
margin: 0 0 10px;
}
.card ul {
list-style-type: none;
padding: 0;
}
.card li {
font-size: 16px;
margin-bottom: 5px;
}
</style>
</head>
<body>
<header>
<h1>人物介绍</h1>
</header>
<div class="container">
<div class="card">
<img src="https://via.placeholder.com/150" alt="Person">
<h2>John Doe</h2>
<p>一位伟大的人物</p>
<ul>
<li>副业1: 音乐制作</li>
<li>副业2: 摄影</li>
<li>副业3: 写作</li>
<li>副业4: 绘画</li>
<li>副业5: 旅行</li>
</ul>
</div>
</div>
</body>
</html>
```
解释一下代码：
- `<!DOCTYPE html>` 声明文档类型为 HTML5。
- `<html>` 元素是 HTML 文档的根元素。
- `<head>` 元素包含文档的元（meta）数据，例如标题、样式和脚本等。
- `<title>` 元素定义文档的标题，显示在浏览器的标题栏或标签页上。
- `<style>` 元素包含 CSS 样式规则。
- `body` 元素包含文档的内容，例如文本、图像和视频等。
- `header` 元素通常包含网站的标题和导航栏等。
- `h1` 元素定义一个大标题。
- `.container` 类定义一个包含卡片的容器。
- `.card` 类定义一个人物介绍卡片。
- `img` 元素显示人物的照片。
- `ul` 元素包含人物的五个副业。
- `li` 元素包含每个副业的详细信息。
请注意，上述代码中使用的图像是占位符图像，您可以将其替换为实际的人物照片。
相关推荐
最新推荐
DIV+CSS垂直居中一个浮动元素
对于页面上的块级元素，只须定宽及设置margin:auto 0;即可在垂直上居中，但对于浮动的元素垂直居中是无效的。那么我们如何来处理这个问题呢，今天我们来探讨下。
html5+css3面试题答案.docx
html5+css3面试题答案.docx
css3实现一个div设置多张背景图片及background-image属性实例演示
主要介绍了css3实现一个div设置多张背景图片及background-image属性,同时对于css3背景渐变也做了详细的解释,水平渐变,左上角渐变等等方式,需要的朋友可以参考下
使用Vue组件实现一个简单弹窗效果
主要介绍了使用Vue组件实现一个简单弹窗效果,本文主要内容会涉及到弹窗遮罩的实现， slot 插槽的使用方式，props 、 $emit 传参，具体组件代码也传上去了。需要的朋友可以参考下
html+css 选择题50（加答案）
html+css 选择题（加答案）,适合学过html和css的人加强和巩固知识（内有50个选择题）。
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
spring添加xml配置文件
1. 创建一个新的Spring配置文件，例如"applicationContext.xml"。
2. 在文件头部添加XML命名空间和schema定义，如下所示：
```
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.springframework.org/schema/beans
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。