position练习（京东轮播图）

最新推荐文章于 2022-07-05 23:57:40 发布

zhangxxiuping

最新推荐文章于 2022-07-05 23:57:40 发布

阅读量764

点赞数

分类专栏：学习练习文章标签： php

本文链接：https://blog.csdn.net/zxpyyds/article/details/123834453

版权

学习练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

position的属性值有四个，分别为static、relative、absolution、fixed和sticky

static为默认属性元素静止，未开启定位。

relative 相对定位，开启定位。

absolute 绝对定位，开启定位。

fixed 固定定位，开启定位。

sticky 粘滞定位，开启定位，但很多浏览器不支持。

用京东轮播图来举例（本练习为练习position，为半成品）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./qingling.css">
    <style>
        .img_list{
            margin: 100px auto;
            width: 590px;
            height: 470px;
            /* 开启position属性中的relative，使得ul开启定位 */
            position: relative;

        }
        .img_list li{
            /* 为将轮播图片重叠，开启position中的absolute属性 */
            position: absolute;

        }
        .img_list img{
            width: 590px;
            height: 470px;

        }
        .point{
            /* 开启position中的absolute属性，并且层次设为最高，使得总保持在最上层 */
            position: absolute;
            z-index: 9999;
            bottom: 20px;
            left: 10px;
        }
        .point a{
            float: left;
            width: 10px;
            height: 10px;
            background-color: rgba(255, 255, 255, .3);
            border-radius: 50%;
            margin: 0px 2px;
            /* 将背景颜色设置到内容区，使得边框和内边距没有背景颜色 */
            background-clip: content-box;
            border: 4px solid transparent;
        }
        .point a:hover{
            background-color: #fff;
            border: 4px solid rgba(255, 255, 255, .3);
        }
        .img_list li:nth-child(5){
            z-index: 1;
        }

    </style>
</head>
<body>
    <ul class="img_list">
        <li><a href="javascript:;" class="img1"><img src="./scourse/京东轮播图1.jpg" ></a></li>
        <li><a href="javascript:;"><img src="./scourse/京东轮播图2.jpg" ></a></li>
        <li><a href="javascript:;"><img src="./scourse/京东轮播图3.jpg" ></a></li>
        <li><a href="javascript:;"><img src="./scourse/京东轮播图4.jpg" ></a></li>
        <li><a href="javascript:;"><img src="./scourse/京东轮播图5.jpg" ></a></li>
        <li><a href="javascript:;"><img src="./scourse/京东轮播图6.jpg" ></a></li>
        <li><a href="javascript:;"><img src="./scourse/京东轮播图7.jpg" ></a></li>
        <li><a href="javascript:;"><img src="./scourse/京东轮播图8.jpg" ></a></li>
        <div class="point">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </ul>
    
</body>
</html>