跟着黑马学CSS打卡第五天

提示：个人记录学习使用  

前言

轮播图页面制作

---

一、背景图片

1、body

        <!-- 图片 -->
        <ul>
            <li><img src="./素材/轮播图/1.jpg" alt=""></li>
            <li><img src="./素材/轮播图/2.jpg" alt=""></li>
            <li><img src="./素材/轮播图/3.jpg" alt=""></li>
        </ul>

2、 style

1、.banner

        .banner {
            /* 子相父绝 父级绝对 */
            position: relative;
            margin: 100px auto;
            width: 564px;
            height: 415px;
            /* background-color: pink; */
            /* 溢出隐藏 */
            overflow: hidden;
        }

2、.banner ul

让轮播图在统一水平线平行

        .banner ul {
            display: flex;
        }

二、箭头

1、body

        <!-- 箭头 -->
        <!-- 上一张 prev -->
        <a href="#" class="prev">
            <i class="iconfont icon-fanhui"></i>
        </a>
        <!-- 下一张 next -->
        <a href="#" class="next">
            <i class="iconfont icon-jinru"></i>
        </a>

2、style

1、 .banner .prev,  .banner .next

        /* 箭头 */
        .banner .prev,
        .banner .next {
            /* 隐藏 */
            display: none;
            position: absolute;
            /* 阴影垂直对齐 */
            top: 50%;
            transform: translateY(-50%);

            width: 20px;
            height: 30px;
            background-color: rgba(0, 0, 0, 0.3);

            /* 去掉下划线 */
            text-decoration: none;
            color: white;
            /* 垂直对齐 */
            line-height: 30px;
        }

2、 .banner:hover .prev,  .banner:hover .next

        /* 鼠标滑到banner区域，箭头要显示 */
        .banner:hover .prev,
        .banner:hover .next {
            display: block;
        }

3、 .banner .prev

        .banner .prev {
            left: 0;
            border-radius: 0 15px 15px 0;
        }

4、 .banner .next

        .banner .next {
            right: 0;
            border-radius: 15px 0 0 15px;
        }

三、圆点

1、body 

        <!-- 圆点 -->
        <ol>
            <li></li>
            <li class="active"></li>
            <li></li>
        </ol>

2、style

1、.banner ol

        /* 圆点 */
        .banner ol {
            position: absolute;
            /* 设置下边距，让小背景在大背景下可以显示 */
            bottom: 20px;
            /* 水平居中 */
            left: 50%;
            transform: translateX(-50%);
            height: 13px;
            background-color: rgba(255, 255, 255, 0.3);

            display: flex;

            border-radius: 10px;
        }

2、 .banner ol li

        .banner ol li {
            margin: 2px;
            width: 8px;
            height: 8px;
            background-color: #fff;

            border-radius: 50%;
            /* 光标变手指 */
            cursor: pointer;
        }

3、 .banner ol .active

        .banner ol .active {
            background-color: orange;
        }

4、 .banner ol li:hover

        .banner ol li:hover {
            background-color: orange;
        }

四、效果图

 

---

总结

分享歌词：
足りない 足りない 誰にも気づかれない，
还不够 还不够 我还未被任何人所注意，
殴り書きみたいな音 出せない状態で叫んだよ，
好似杂乱无章的音律 不成声地呐喊着，
「ありのまま」なんて 誰に見せるんだ，
「真实的自我」 又是为了让谁看见，
馬鹿なわたしは歌うだけ，
愚昧无知的我唯有放声高歌，
ぶちまけちゃおうか 星に，
倾诉一切吧 对那星辰。
分享結束バンド的单曲《ギターと孤独と蒼い惑星 (吉他与孤独与蓝色星球)》