淘宝焦点图：定位实战

最新推荐文章于 2024-09-10 14:15:01 发布

糊涂涂—

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量172

点赞数

文章标签： webview html linq

本文链接：https://blog.csdn.net/weixin_59701442/article/details/124952315

版权

效果图如上

综合定位以及圆角圆点的知识，考验板块在图片中的居中（图源网络）

代码如下：

HTML文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="style1.css">

</head>

<body>

    <div class="tb-promo">

        <img src="windy.jpg" alt="">

        <a href="#" class="prev">&lt;</a>

        <a href="#" class="next">&gt;</a>

        <ul>

            <li class="selected"></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>    

</body>

</html>

CSS文件

*{

    margin: 0;

    padding: 0;

}

li{

    list-style: none;

}

.tb-promo{

    position: relative;

    width: 520px;

    height: 280px;

    margin: 100px auto;

}

.tb-promo img{

    width: 100%;

    height: 100%;

}

.tb-promo a{

    position: absolute;

    top: 50%;

    background-color: rgba(0,0,0,.7);

    width: 20px;

    height: 30px;

    color: white;

    line-height: 30px;

    text-align: center;

    text-decoration: none;

}

.tb-promo .prev{

    left: 0;

    border-top-right-radius:15px;

    border-bottom-right-radius:15px;

}

.tb-promo .next{

    right: 0;

    border-top-left-radius:15px;

    border-bottom-left-radius:15px;

}

.tb-promo ul{

    position: absolute;

    width: 70px;

    height: 13px;

    left: 50%;

    bottom: 0;

    margin-left:-35px;

    margin-bottom: 10px;

    background-color: rgba(255,255,255,.3);

    border-radius: 15px;

}

.tb-promo ul li{

    float: left;

    width: 8px;

    height: 8px;

    background-color: #fff;

    border-radius: 4px;

    margin: 3px;

}

.tb-promo ul .selected{

    background-color: #ff5000;

}