progress的css属性设置问题
来源：3-15 编程练习
幕布斯3322991
2019-11-24 21:46:51
因为progress属性没有显示出题目中的理想样式，
尝试对progress的css属性进行了设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>H5</title>
<style type="text/css">
progress{
height: 10px;
}
progress::-webkit-progress-value
{
background-color:green;
}
</style>
</head>
<body>
<div>
<p>小明成绩是否在60～80分之间：</p>
<meter value="70" min="0" max="100" low="60" high="80" optimum="75"></meter>
</div>
<div>
<p>小明成绩打败60%的学生：</p>
<progress value="0.6"></progress>
</div>
</body>
</html>感觉还是完全不受控制啊。我的chrome版本应该是最新的了
求解惑
写回答
1回答
-
同学你好，老师这边使用你的代码测试，背景色也是不生效的。progress设置样式兼容性很不好的，虽然设置了兼容性，但是很多浏览器也是不支持的。不需要纠结这里，实际开发中不会用它。另外，本题中第二个也应该是meter标签。
可以参考如下代码：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
</head>
<body>
<!-- 在此完成任务 -->
<h3>小明成绩是否在60~80分之间</h3>
<meter value="70" min="0" max="100" low="60" high="80" optimum="75"></meter>
<h3>小明成绩打败60%的学生</h3>
<meter value="0.6">60%</meter>
</body>
</html>
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题