html和css学习--（7）

内容介绍

![Alt]
(https://yt3.ggpht.com/a/AGF-l7_JOPbXWp3QXZDuk7CCOzxdwpRg8MFJliMx5A=s900-c-k-c0xffffffff-no-rj-mo0）
这个学习资源来自于一个youtuber开的频道， 名字叫做online tutorial（https://www.youtube.com/channel/UCbwXnUipZsLfUckBPsC7Jog/featured）, 从第一次无意间系统推送给我他的频道的时候我就被他发的一些自创css style深深吸引， 也借以这个平台来和大家分享一下一些很有用的学习资源。**

简介

今天还是星级评价的样例，今天介绍的是有十级评价的那种， 原理其实跟上次简单的星形评分差不多。

代码

html

  <div class="box">
        <P>How satisfied are you with our channel</P>
        <div class="rating">
            <input type="radio" name="rating" id="rate10"><label for="rate10">10</label>
            <input type="radio" name="rating" id="rate9"><label for="rate9">9</label>
            <input type="radio" name="rating" id="rate8"><label for="rate8">8</label>
            <input type="radio" name="rating" id="rate7"><label for="rate7">7</label>
            <input type="radio" name="rating" id="rate6"><label for="rate6">6</label>
            <input type="radio" name="rating" id="rate5"><label for="rate5">5</label>
            <input type="radio" name="rating" id="rate4"><label for="rate4">4</label>
            <input type="radio" name="rating" id="rate3"><label for="rate3">3</label>
            <input type="radio" name="rating" id="rate2"><label for="rate2">2</label>
            <input type="radio" name="rating" id="rate1"><label for="rate1">1</label>
        </div>
    </div>

css

1. 居中主要元素

 body {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-family: arial;
    }
    ```
    2.设置总体盒子的高度，第一个影响的将是我们的标题p
    ```
    .box {
        width: 500px;
    }
    
    p {
        margin: 0;
        padding: 0;
        font-size: 24px;
    }
    ```
    3.评分表在标题下方，因此还是position：relative；“row-reverse"的作用是从10-1变为1-10；
    ```
    .rating {
        position: relative;
        display: flex;
        flex-direction: row-reverse;
        margin-top: 10px;
        border: 1px solid #000;
        box-sizing: border-box;
        background: linear-gradient(to right, #f00, #ff0, #0f0);
    }

3.不显示小圆点

 .rating input {
     display: none;
 }

4.设置每个小方格里面的内容和背景颜色

 .rating label {
     display: block;
     cursor: pointer;
     width: 50px;
     height: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: 0.5s;
     background: #fff;
     color: #000;
     font-size: 20px;
     border-right: 1px solid #000;
 }
 
 .rating input[type="radio"]:hover~label,
 .rating input[type="radio"]:checked~label {
     background: transparent;
 }

总结

想象有两层的进度条，然后当你设置这个进度条每一个小格的背景为白色，自然就盖过了原本大进度条的颜色， 然后我们只需要调整是否显示以及变化时间， 一个简单的移动鼠标并且随进度条改变颜色评分系统就做好啦

成果