用CSS创作进度条-入门版

原创

已于 2022-02-02 19:52:02 修改 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

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

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

本文讲解用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="container skills php">40%</div>
		<P>vue</P>
		    <div class="container skills vue">20%</div