30、京东轮播图

最新推荐文章于 2022-04-13 08:33:30 发布

五仁卤鸡翅

最新推荐文章于 2022-04-13 08:33:30 发布

阅读量213

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106980022

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
京东轮播图

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

京东轮播图

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>

1、设置图片的容器

.img-list{
    width:590px;
    height:470px;
    marign:100px auto;
    // 开启相对定位，使ul中的pointer可以相对于ul定位
    position:relative;
}

2、设置li落到一起
.img-list li{
    position:absolute
}

3、通过元素的层级，显示指定的图片
  n为显示第几张图片
.img-list li:nth-child(n){
    z-index:1
}

/* 设置导航点的样式 */
.pointer{
    position:absolute;
    z-index:9999;
    bottom:20px;
    left:40px;
}

4、设置导航点的样式
.pointer a{
    /*
      设置元素向左浮动，行内元素脱离文档流，变成块元素
    */
    float:left;
    width:10px;
    height:10px;
    margin:0px 4px;
    border-radius:50%
    background-color:rgba(255,255,255,0.3);
    // 将背景颜色值设置到内容区，边框和内边距不再有背景颜色
    background-clip:content-box;
    border:2px solid transparent;// 设置边框大小，但颜色为透明
}
.pointer a.active{
    background-color:#fff;
    border:2px solid rgba(255,255,255,3); 
}
.pointer a:hover{
    background-color:#fff;
    border:2px solid rgba(255,255,255,3); 
}

</style>
<body>
<ul class="img-list">
   <li>
     <a href="javasxript:;"><im src="01.jpg"></a>
   </li>
    <li>
     <a href="javasxript:;"><im src="02.jpg"></a>
   </li>
    <li>
     <a href="javasxript:;"><im src="03.jpg"></a>
   </li>
    <li>
     <a href="javasxript:;"><im src="04.jpg"></a>
   </li>
    <li>
     <a href="javasxript:;"><im src="05.jpg"></a>
   </li>
    <li>
     <a href="javasxript:;"><im src="06.jpg"></a>
   </li>
   
   // 显示导航点
   <div class="pointer">
      <a class="active" href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
      <a href="javascript:;"></a>
   </div>
</ul>

</body>

五仁卤鸡翅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
30、京东轮播图

文章目录介绍京东轮播图介绍本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记京东轮播图<html lang="en"><head> <meta charset="UTF-8"> <title>meta</title></head><style>1、设置图片的容器.img-list{ width:590px; height:470px; marign
复制链接

扫一扫