11111

最新推荐文章于 2021-12-23 10:48:21 发布

朱子青

最新推荐文章于 2021-12-23 10:48:21 发布

阅读量57

点赞数

分类专栏：作业文章标签： html css safari

本文链接：https://blog.csdn.net/weixin_56955909/article/details/121809569

版权

作业专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<!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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        .taobao {
            position: relative;
            width: 520px;
            height: 280px;
            margin: auto;
        }
        .arrow-l, .arrow-r{
            position: absolute;
            top: 50%;
            margin-top: -15px;
            width: 20px;
            height: 30px;
            line-height: 30px;
            background-color: rgba(0,0,0,0.2) ;
            color: #fff;
        }
        .arrow-l {
            border-radius: 0 15px 15px 0;
        }
        .arrow-r {
            border-radius: 15px 0 0 15px ;
            right: 0;
            text-align: right;
        }
        .circle {
            position: absolute;
            left: 50%;
            margin-left: -35px;
            bottom: 15px;
            width: 70px;
            height: 13px;
            background-color: rgba(255,255,255,0.2);
            border-radius: 6px;
        }
        .circle li {

            float: left;
            height: 8px;
            width: 8px;
            background-color: #fff;
            margin: 3px;
            border-radius: 50%;
        }
        .circle .qq {
            background-color: #ff5000;
        }
        .circle .qw {
            background-color: #fff444;
        }
        .circle .ql {
            background-color: #2d923eb7;
        }
        .circle .qe {
            background-color: #6b17cab7;
        }
        .circle .qr {
            background-color: #2112f8b7;
        }

    </style>
</head>
<body>
    <div class="taobao">
        <a href="#" class="arrow-l">&lt;</a>
        <a href="#" class="arrow-r">&lt;</a>
        <img src="C:\Users\PC-608\Desktop\images\taobao.jpg" alt="">
        <ul class="circle">
            <li class="qe"></li>
            <li class="qw"></li>
            <li class="qq"></li>
            <li class="ql"></li>
            <li class="qr"></li>
        </ul>
</body>
</html>

朱子青

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11111

<!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>Do.
复制链接

扫一扫