如何使用 HTML 和 CSS 创建投资组合库？(1)

📌 相关文章

📜 如何使用 HTML 和 CSS 创建投资组合库？(1)

📅 最后修改于: 2023-12-03 15:38:01.243000 🧑 作者: Mango

如何使用 HTML 和 CSS 创建投资组合库？

简介

在本文中，我们将讨论如何使用 HTML 和 CSS 创建投资组合库。如果您是项目经理或者一个投资者，那么创建一个投资组合库是非常必要的。 HTML 是用于创建网页的基础语言，CSS 是用于添加样式和布局的语言。在本文中我们将学习如何使用这些语言来创建一个漂亮和有用的投资组合库。

步骤

步骤一：创建 HTML 标记

我们将从创建一个基本的 HTML 文件开始。首先，我们需要创建一个 HTML 文件。打开您选择的文本编辑器，例如Sublime Text，然后从头开始编写代码。此处我们不会编写完整的 HTML 代码，仅供参考。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Investment Portfolio</title>
</head>
<body>
	<!-- 内容区域 -->
</body>
</html>

上面的代码是一个基本的 HTML 框架。它包括一个标题，一个元数据标记，并且使用空的 <body> 标记包装了一些内容。现在我们需要在 <body> 标记中添加更多的内容。

步骤二：添加内容

在这里，我们将添加投资组合库的内容。首先，我们需要创建一个包含所有投资的列表。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Investment Portfolio</title>
</head>
<body>
	<div id="investments">
		<ul>
			<li><a href="#">Investment 1</a></li>
			<li><a href="#">Investment 2</a></li>
			<li><a href="#">Investment 3</a></li>
			<li><a href="#">Investment 4</a></li>
		</ul>
	</div>
</body>
</html>

上面的代码创建了一个包含在 <div> 标记中的投资列表。列表中使用的 <ul> 和 <li> 标记分别表示无序列表和列表项。

步骤三：添加样式

现在，我们可以为投资组合库添加样式。我们将使用 CSS 来添加样式。 CSS 是用于添加样式和布局的语言。

在 HTML 文件中添加一个指向样式表的链接。我们将在样式表中编写所有样式。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Investment Portfolio</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="investments">
		<ul>
			<li><a href="#">Investment 1</a></li>
			<li><a href="#">Investment 2</a></li>
			<li><a href="#">Investment 3</a></li>
			<li><a href="#">Investment 4</a></li>
		</ul>
	</div>
</body>
</html>

我们使用“href”属性指向我们新建的样式表。

样式表通过赋值来设置样式。每个样式都由选择器（用于选择 HTML 元素）和属性（表示样式）定义。在样式表中，我们将使用 id 和 class 来定义选择器。每个选择器都与其相关的样式一起定义。

在这里，我们将使用以下样式为投资组合库添加一些基本样式：

body {
	margin: 0;
	padding: 0;
}
#investments {
	width: 80%;
	margin: 0 auto;
}
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
li {
	padding: 20px;
	border-bottom: 1px solid #ccc;
}
li a {
	text-decoration: none;
	color: #333;
}
li a:hover {
	color: #000;
	background-color: #ccc;
}

上面的代码添加了以下样式：

窗口的 margin 和 padding 被重置为零。
投资结构的宽度设置为80％，并且在中央对齐。
清空列表项样式。所有列表项均不选择。
设置列表项的 padding 和 border 样式。
设置链接的一般样式和鼠标悬停样式。

步骤四：添加图片

现在，我们将添加一些图片来美化我们的投资组合库。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Investment Portfolio</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="header">
		<img src="logo.png" alt="Investment Portfolio">
	</div>
	<div id="investments">
		<ul>
			<li>
				<a href="#">
					<img src="investment-1.png" alt="Investment 1">
					<h2>Investment 1</h2>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="investment-2.png" alt="Investment 2">
					<h2>Investment 2</h2>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="investment-3.png" alt="Investment 3">
					<h2>Investment 3</h2>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="investment-4.png" alt="Investment 4">
					<h2>Investment 4</h2>
				</a>
			</li>
		</ul>
	</div>
</body>
</html>

上面的代码在投资列表项中添加了图片。每个 <li> 元素包括一张缩略图，标题和一个跳转链接。

在样式表中，我们添加以下样式来调整图片的大小：

li img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-bottom: 10px;
}

步骤五：响应式设计

最后，我们将为我们的投资组合库添加一个响应式设计。在移动设备上，我们希望我们的列表项只占用一行。在这里，我们将使用 CSS 媒体查询来设置移动设备的样式。

@media (max-width: 768px) {
	#investments {
		width: 100%;
	}
	li {
		width: 50%;
		float: left;
	}
}

如果浏览器窗口小于或等于768像素，上面的样式将应用。 #investments 元素的宽度将设置为 100％，并且每个列表项的宽度将设置为 50％，并且将左侧对齐。这将导致我们的列表项仅在移动设备上占用一行。

完整代码示例

以下是我们完整的 HTML 和 CSS 代码示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Investment Portfolio</title>
	<link rel="stylesheet" href="style.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	<div id="header">
		<img src="logo.png" alt="Investment Portfolio">
	</div>
	<div id="investments">
		<ul>
			<li>
				<a href="#">
					<img src="investment-1.png" alt="Investment 1">
					<h2>Investment 1</h2>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="investment-2.png" alt="Investment 2">
					<h2>Investment 2</h2>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="investment-3.png" alt="Investment 3">
					<h2>Investment 3</h2>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="investment-4.png" alt="Investment 4">
					<h2>Investment 4</h2>
				</a>
			</li>
		</ul>
	</div>
</body>
</html>

body {
	margin: 0;
	padding: 0;
}
#header {
	background-color: #333;
	padding: 10px 0;
	text-align: center;
}
#header img {
	max-width: 100%;
	height: auto;
}
#investments {
	width: 80%;
	margin: 0 auto;
}
ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
li {
	padding: 20px;
	border-bottom: 1px solid #ccc;
}
li img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-bottom: 10px;
}
li a {
	text-decoration: none;
	color: #333;
}
li a:hover {
	color: #000;
	background-color: #ccc;
}
@media (max-width: 768px) {
	#investments {
		width: 100%;
	}
	li {
		width: 50%;
		float: left;
	}
}

结论

在本文中，我们学习了如何使用 HTML 和 CSS 创建投资组合库。我们从创建基本的 HTML 文件开始，并慢慢添加了内容和样式。最后，我们介绍了如何使用媒体查询来创建响应式设计，从而在移动设备上获得更好的体验。如果您有任何问题或建议，请不要犹豫，在评论区中留言。