【後转前要多久】# Day16 CSS - 小物件实做(引导列、滑动按钮、同心圆、限时特价商品)

引导列

HTML

<ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">政治</a></li>
    <li><a href="#">财经</a></li>
    <li><a href="#">娱乐</a></li>
    <li><a href="#">论坛</a></li>
    <li><a href="#">新闻</a></li>
</ul>

CSS

.menu{
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.menu li{
    border: 3px solid black;
    width: 100px;
    text-align: center;
}

.menu li a{
    background-color: #00FF55;
    display: block;
    padding: 10px;
    text-decoration: none;
}

.menu li a:hover{
    background-color: #FF0055;
    color: forestgreen;
}

原理：要先做CSS Reset，接着用ul>li包覆着a连结，
透过display:flex来做排版，再设定hover效果

滑动按钮

用<input> checkbox包住滑动条、滑动条包住按钮

因为要让checkbox预设的方框框隐藏起来，这边用了hidden

HTML

<label>
    <input type="checkbox" hidden>
    <div class="slider-bar">
        <div class="btn"></div>
    </div>
</label>

CSS

.slider-bar{
    height: 20px;
    width: 40px;
    display: inline-block;
    border-radius:10px;
    background: #ccc;
}

.btn{
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #999;
    border: 1px solid gray;
    transition: 0.5s;
}

input[type="checkbox"]:checked + .slider-bar .btn{
    margin-left: 20px;
    background: white;
}

原理:
先造出一个 slider-bar 当作灰色的底，
再造一个黑色圆形按钮，
而滑动效果是按了按钮後，让按钮margin-left偏移20px，再加上动画效果transition的0.5s

也可以在打开开关时(:checked)，额外再加上绿色背景的效果。

同心圆、圆中点

HTML

<div class="dot"></div>

CSS

.dot{
    width: 200px;
    height: 200px;
    background: black;
    border: 20px solid white;
    box-shadow: 0 0 0 20px black;
    border-radius: 50%;
}

原理：
先设width、height，接着用border画出外层框(白色)、设border-radius圆形，
最後再用box-shadow造出最外层黑框效果。

限时特价商品

HTML

<ul class="product-list">
    <li class="product">
        <div class="on-sale">限时特卖</div>
        <img src="https://picsum.photos/200/200" alt="">
        <h2>产品A</h2>
        <span>NT$ 200</span>
    </li>
    <li class="product">
        <div class="on-sale">限时特卖</div>
        <img src="https://picsum.photos/200/200" alt="">
        <h2>产品A</h2>
        <span>NT$ 200</span>
    </li>
    <li class="product">
        <div class="on-sale">限时特卖</div>
        <img src="https://picsum.photos/200/200" alt="">
        <h2>产品A</h2>
        <span>NT$ 200</span>
    </li>
</ul>

CSS

.product-list{
    display: flex;
}

.product{
    width: 200px;
    height: 300px;
    margin: 15px;
    padding: 10px;
    outline: 1px solid brown;
    position: relative;
}

.product h2{
    font-size: 20px;
    margin-bottom: 20px;
}

.product span{
    color: red;
    font-size: 20px;
}

.product .on-sale{
    writing-mode: vertical-lr;
    background: red;
    padding: 5px;
    left: 20px;
    position: absolute;
    color: wheat;
}

用ul>li包住图片、文字商品名称，以及限时特价标签，商品设定width、height。
限时特价标签的部分透过绝对定位，相对定位点设定在父元素上，搭配上文字垂直模式。
用display: flex的方式来排版、在外框上一个outline。