用CSS创作进度条-入门版

Térébentine

已于 2022-02-02 19:52:02 修改

阅读量1.5k

点赞数

分类专栏：前端文章标签： css css3 html

于 2022-02-02 19:45:23 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43790703/article/details/122771568

版权

该博客介绍了如何使用HTML和基础CSS制作进度条。通过一个简单的实例，讲解了CSS的使用方法以及HTML如何引用CSS文件，旨在帮助初学者理解两者间的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文讲解用HTML和CSS制作进度条的一个基础案例。主要帮助大家理解CSS的简单用法，以及用HTML调用CSS文件。

先来看效果图：

HTML代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!--title表示网页名称-->
		<title>进度条</title>
		<!-- 连接到进度条.css文件 -->
		<link rel="stylesheet" type="text/css" href="进度条.css"/>
	</head>
	<body>
		<h1>进度条</h1>
		<p>HTML</p>
		    <div class="container skills html">100%</div>
		<p>CSS</p>
		    <div class="container skills css">80%</div>
		<p>Javascript</p>
		    <div class="container skills javascript">60%</div>
		<p>PHP</p>
		    <div class="containe