第二十七章HTML.CSS综合案例（三）-CSDN博客

本文链接：https://blog.csdn.net/J3259392566/article/details/139609036

5.小米侧边栏

效果如下：

代码图如下：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .box{
            width: 100%;
            height: 100%;
            position:  absolute;
            background-image: linear-gradient(to right, #a07ad0, #c39340);
        }
        .box1{
            width: 300px;
            background-color: rgba(255,255,255,0.5);
            margin: 50px auto 0px; /* 上 左右 下 */
        }
        .box1 ul{
            padding: 20px 0px;
        }
        .box1 ul li{
            height: 42px;
            line-height: 42px;
        }
        .box1 ul li a{
            display: block;
            text-indent:2em;
            /* background-image:url('5箭头.png'); */
            /* background-repeat:no-repeat; */
            /* background-position:255px; */
        }
        .box1 ul li a:hover{
            background-color:#ff6700;
            /* display: block; */
            text-indent:2em;
            /* background-image:url('5箭头.png'); */
            /* background-repeat:no-repeat; */
            /* background-position:255px; */
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <ul>
                <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>
                <li><a href="">电源 配件</a></li>
                <li><a href="">健康 儿童</a></li>
                <li><a href="">耳机 音响</a></li>
                <li><a href="">生活 箱包</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

5.酷狗音乐

效果图如下：

代码部分如下：

<style>
         *{
            margin: 0;
            padding: 0;
         }
         .music {
            width: 580px;
            height: 480px;
            background-color:aqua;
            margin:50px auto 0;
         }
         a{
            text-decoration: none;
            color:#000;
         }
         .music a{
            width: 580px;
            height: 480px;
            display: block;
            position: relative,
        }
        .music p.music-number {
            height: 35px;
            width: 280px;
            position: absolute;
            top:0;
            right:0;
            background-image: linear-gradient(to left,rgba(8,0,0,0.5),rgba(255, 255,255,0));
            text-align:center;
        }
        .music p.music-number span.icon-earphone{
            width: 35px;
            height: 35px;float: right;
            background:url("images/earphone.svg")no-repeat center;
            background-size: 20px;
            margin-right: 10px;
        }
        .music p.music-numberspan.musci-number-txt {
            height: 35px;
            float: right;
            font-size: 14px;
            color: white;
            Line-height: 35px;
            padding-right: 10px;
        }
        .music .music-text{
            width: 100%;
            height: 80px;
            background-color:rgba(0,0,0，0.5);
            position: absolute;
            bottom:0;
            color: white;
        }
        .music .music-text h3{
            font-weight: 100;
            padding: 15px 0 5px 10px;
        }
        .music .music-text p{
            color: #ddd;
            padding-left: 10px;
        }
        .music .music-mask {
            background-color:rgba(0，0，0，0.5);
            position: absolute;
            left: 0;
            top:0;
            bottom:0;
            right: 0;
            display: none;
        }
        .music .play-button {
            width: 36px;
            height: 36px;
            position: absolute;
            bottom: 22px;
            right: 22px;
            background:url("images/play-button.svg");
            display: none;
        }
        .music a:hover .music-mask,
        .music a:hover .play-button{
            display: block;
        }
    </style>
</head>
<body>
    <div class="music">
        <a href="#">
            <img src="../../C4D素材文件/608e300569f0d3dab0a2a3935648283.jpg" width="580" height="480">
            <p class="music-number">
                <span class="musci-number-txt">679.9万</span>
                <span class="icon-earphone"></span>
            </p>
            <div class="music-text">
                <h3>拥有穿透力和辨识度的嗓音，勿忘心安</h3>
                <p>张杰</p>
            </div>
            <div class="music-mask">
                <div class="play-button"></div>
            </div>
        </a>
    </div>
</body>
</html>