html五星好评代码
时间: 2023-11-29 18:02:09 浏览: 183
五星好评通常通过HTML和CSS代码来实现。以下是一个简单的HTML示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>五星好评</title>
</head>
<body>
<h2>请给我们的产品打分:</h2>
<div class="rating">
<input type="radio" id="star5" name="rating" value="5">
<label for="star5">5星</label>
<input type="radio" id="star4" name="rating" value="4">
<label for="star4">4星</label>
<input type="radio" id="star3" name="rating" value="3">
<label for="star3">3星</label>
<input type="radio" id="star2" name="rating" value="2">
<label for="star2">2星</label>
<input type="radio" id="star1" name="rating" value="1">
<label for="star1">1星</label>
</div>
<button type="submit">提交评分</button>
</body>
</html>
```
要创建五个星星并且根据用户点击的星星来设置评分的话,还需添加一些CSS代码来样式化星星的外观。这里是一个简单的例子:
```css
/* styles.css */
.rating {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.rating input {
display: none;
}
.rating label {
cursor: pointer;
font-size: 30px;
color: #ccc;
}
.rating input:checked ~ label {
color: #f90;
}
```
这些HTML和CSS代码将创建一个包含五个星星的评分系统,用户点击星星之后,对应的星星会变成橙色。然后根据用户选择的星星,可以使用JavaScript来处理用户的评分数据。
阅读全文