数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律学如何使用 CSS 创建“用户评分”记分卡？
要创建用户评分记分卡，首先设置星形的精确图标。这将使用 Font Awesome 图标完成。各个评分显示为进度条。
设置星级评分的图标
星级评分的图标使用 Font Awesome 图标设置。我们在开头添加了 Font Awesome 图标的以下 CDN 路径，以便在我们的网页上使用它：
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
对于已评分，使用 fa fa-star rated：
<span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span> <span class="fa fa-star rated"></span>
上面已评分的类被设计成使星星看起来更吸引人：
.rated {
color: rgb(255, 0, 0);
border: 2px solid yellow;
}
对于未评分，仅使用 fa fa-star：
<span class="fa fa-star"></span>
星级评分标题
星级评分标题如下：
<span class="rateHeader">User Rating</span>
它的样式如下：
.rateHeader {
font-size: 25px;
margin-right: 25px;
}
设置进度条的 div
为 1 星、2 星、3 星、4 星和 5 星评级创建不同的进度条：
<div class="row">
<div class="data">
<div>5 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-5"></div>
</div>
</div>
<div class="data right">
<div>120</div>
</div>
<div class="data">
<div>4 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-4"></div>
</div>
</div>
<div class="data right">
<div>110</div>
</div>
<div class="data">
<div>3 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-3"></div>
</div>
</div>
<div class="data right">
<div>30</div>
</div>
<div class="data">
<div>2 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-2"></div>
</div>
</div>
<div class="data right">
<div>20</div>
</div>
<div class="data">
<div>1 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-1"></div>
</div>
</div>
<div class="data right">
<div>12</div>
</div>
</div>
设置进度条的样式
进度条放置在左侧，使用 float 属性和 left 值：
.progressBar {
margin-top: 10px;
float: left;
width: 70%;
}
设置进度条容器的样式
进度条中的容器 div 的样式如下：
.progressContainer {
width: 100%;
background-color: #f1f1f1;
text-align: center;
color: white;
border-radius: 10px;
}
设置各个条形的样式
各个条形也使用 width、height 和 background-color 属性设置样式：
.bar-5 {
width: 70%;
height: 18px;
background-color: rgb(76, 175, 162);
}
.bar-4 {
width: 50%;
height: 18px;
background-color: rgb(243, 222, 33);
}
.bar-3 {
width: 20%;
height: 18px;
background-color: #12d400;
}
.bar-2 {
width: 65%;
height: 18px;
background-color: #ff0055;
}
.bar-1 {
width: 40%;
height: 18px;
background-color: #a836f4;
}
示例
要使用 CSS 创建“用户评分”记分卡，代码如下：
<!DOCTYPE html>
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<style>
* {
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 30px;
max-width: 800px;
padding: 20px;
}
.rateHeader {
font-size: 25px;
margin-right: 25px;
}
.fa {
font-size: 25px;
color: grey;
}
.rated {
color: rgb(255, 0, 0);
border: 2px solid yellow;
}
.data {
float: left;
width: 15%;
margin-top: 10px;
font-weight: bold;
}
.progressBar {
margin-top: 10px;
float: left;
width: 70%;
}
.right {
text-align: right;
}
.row:after {
content: "";
display: table;
clear: both;
}
.progressContainer {
width: 100%;
background-color: #f1f1f1;
text-align: center;
color: white;
border-radius: 10px;
}
.bar-1, .bar-2, .bar-3, .bar-4, .bar-5 {
border-radius: 10px;
}
.bar-5 {
width: 70%;
height: 18px;
background-color: rgb(76, 175, 162);
}
.bar-4 {
width: 50%;
height: 18px;
background-color: rgb(243, 222, 33);
}
.bar-3 {
width: 20%;
height: 18px;
background-color: #12d400;
}
.bar-2 {
width: 65%;
height: 18px;
background-color: #ff0055;
}
.bar-1 {
width: 40%;
height: 18px;
background-color: #a836f4;
}
</style>
</head>
<body>
<span class="rateHeader">User Rating</span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star"></span>
<p>3.9 average based on 200 foodies.</p>
<div class="row">
<div class="data">
<div>5 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-5"></div>
</div>
</div>
<div class="data right">
<div>120</div>
</div>
<div class="data">
<div>4 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-4"></div>
</div>
</div>
<div class="data right">
<div>110</div>
</div>
<div class="data">
<div>3 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-3"></div>
</div>
</div>
<div class="data right">
<div>30</div>
</div>
<div class="data">
<div>2 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-2"></div>
</div>
</div>
<div class="data right">
<div>20</div>
</div>
<div class="data">
<div>1 star</div>
</div>
<div class="progressBar">
<div class="progressContainer">
<div class="bar-1"></div>
</div>
</div>
<div class="data right">
<div>12</div>
</div>
</div>
</body>
</html>
更新于: 2023 年 11 月 17 日
646 次查看
广告