📌  相关文章
📜  自定义收音机 css - Html (1)

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

自定义收音机 CSS - HTML

简介

本文将介绍如何使用 CSS 和 HTML 制作一个自定义收音机的界面。通过本文章学习，你将会了解如何使用 HTML 创建静态网页，以及如何使用 CSS 管理网页布局和样式。

准备

在开始之前，你需要一个文本编辑器，比如 [Visual Studio Code]（https://code.visualstudio.com/）。此外，你还需要一些基本的 HTML 和 CSS 语法知识。

HTML

首先，我们需要搭建一个基本的 HTML 结构。在编辑器中新建一个空白文件，在里面输入以下代码：

<!DOCTYPE html>
<html>
<head>
	<title>自定义收音机</title>
</head>
<body>
	<h1>自定义收音机</h1>
	<div class="container">
		<div class="tuner">
			<!-- 调频器 -->
		</div>
		<div class="controls">
			<!-- 控制按钮 -->
		</div>
	</div>
</body>
</html>

在这段代码中，我们定义了一个基本的 HTML 结构，包括一个标题和一个 <body> 元素。在 <body> 元素中，我们创建了一个 <h1> 元素，表示页面的标题。我们还创建了一个带有 "container" 类的 <div> 元素，并在其中嵌套了两个带有自定义类 "tuner" 和 "controls" 的 <div> 元素。

CSS

现在我们需要添加一些 CSS 样式，来美化我们的页面。在 HTML 文件中的 <head> 元素中，添加以下代码：

<head>
	<title>自定义收音机</title>
	<style>
		body {
			font-family: Arial, sans-serif;
			background-color: #f7f7f7;
			margin: 0;
			padding: 0;
		}

		h1 {
			text-align: center;
			margin-top: 30px;
			margin-bottom: 30px;
		}

		.container {
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;
			align-items: center;
			margin-top: 50px;
		}

		.tuner {
			width: 250px;
			height: 250px;
			background-color: #bdbdbd;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 90px;
			color: white;
			text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
		}

		.controls {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		button {
			margin-left: 20px;
			background-color: #4CAF50;
			color: white;
			border: none;
			padding: 10px;
			border-radius: 5px;
			cursor: pointer;
			font-size: 16px;
			text-transform: uppercase;
			font-weight: bold;
			box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
		}

		button:hover {
			background-color: #3e8e41;
		}
	</style>
</head>

在这段代码中，我们使用了 CSS 的一些属性来定义页面的样式。我们为 body 元素设置了字体，背景颜色和边距。我们为 h1 元素设置了文字对齐和上下边距。我们为 .container 元素设置了flex 属性，用于实现页面的布局。我们为 .tuner 元素设置了宽度，高度，背景颜色，圆角，字体大小，文本颜色和阴影。我们为 .controls 元素设置了flex 属性，让其中的按钮水平对齐。我们还为按钮定义了一些鼠标悬停时的样式。

结果

现在，你已经成功搭建了一个自定义收音机的前端页面。通过在 .tuner 元素中添加 JavaScript 代码，可以让它真正成为一个可交互的收音机。接下来的实现就交给你了。

思路很好, 但是现成的代码在HTML中书写CSS未去CSS文件调用, 再者HTML中嵌套较深,显得臃肿且可读性不高, 在样式中调整HTML排版有助于后期以及共用部分样式.