css布局作业：京东首页轮播图

效果：

html代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/style11.css">
</head>
<body><main><div class="pic_list"><ul><li class="pic_item"><a href="javascript:;"><img src="https://img11.360buyimg.com/da/s590x470_jfs/t1/99384/14/15709/92767/5e72cc66E974a9c22/73aaafff29bb051e.jpg.webp" alt=""></a></li><li class="pic_item"><a href="javascript:;"><img src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/101409/8/16144/100982/5e7888b9E1191ed1a/7471fda3e30ced88.jpg.webp" alt=""></a></li><li class="pic_item"><a href="javascript:;"><img src="https://img20.360buyimg.com/da/s590x470_jfs/t1/91213/21/16240/70794/5e7845fcE9e02388b/aac8be13cde4e653.jpg.webp" alt=""></a> </li><li class="pic_item"> <a href="javascript:;"><img src="https://imgcps.jd.com/ling/62636245505/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa02/142943cb/590x470.jpg" alt=""></a></li><li class="pic_item"><a href="javascript:;"><img src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/89046/34/15011/53602/5e74967aEcea465a4/3f295ebc12bd0a70.jpg.webp" alt=""></a></li><li class="pic_item"><a href="javascript:;"><img src="https://img13.360buyimg.com/pop/s590x470_jfs/t1/85197/26/15872/26068/5e776e3dEa8e41049/cc173612e4b9cd25.jpg.webp" alt=""></a></li><li class="pic_item"><a href="javascript:;"><img src="https://img20.360buyimg.com/pop/s590x470_jfs/t1/84887/3/15300/87376/5e6f2cffE5b19a37b/17742aba052b5c94.jpg.webp" alt=""></a></li><li class="pic_item"><a href="javascript:;"><img src="https://imgcps.jd.com/ling/30240147161/5Y-w5byP5py654m55Lu3/5Lqs6YCJ54uC5qyi/p-5bd8253082acdd181d02fa75/5fca97df/590x470.jpg" alt=""></a></li><div class="pic_point_list"><ul><li class="point_item"></li><li class="point_item"></li><li class="point_item"></li><li class="point_item"></li><li class="point_item"></li><li class="point_item"></li><li class="point_item"></li><li class="point_item"></li></ul></div></ul></div></main>
</body>
</html>

css样式

*{margin: 0;padding: 0;
}li{list-style: none;
}main{background: #F4F4F4;
}.pic_list{width: 590px;height: 470px;margin:10px auto;position: relative;
}.pic_item{position: absolute;top: 0;left: 0;
}.pic_item:nth-child(n){z-index: 1;
}.pic_point_list{position: absolute;z-index: 2;left: 30px;bottom: 20px;
}.point_item{float: left;width: 10px;height: 10px;background-color: rgb(255, 255, 255, .5);border-radius: 50%;margin-right: 4px;border: solid 3px transparent;background-clip: content-box;
}.point_item:hover{background-color:rgb(255, 255, 255);border: solid 3px rgb(255, 255, 255, .5);
}

最终成品

知识点

absolute 绝对定位
将图片设置成绝对定位，脱离文档流，可以重叠
z-index 设置层级
将要显示的图片的层级提升
float 浮动
可以使元素进行水平布局
掌握盒子模型
每个元素的可见区域都是一个4个角的盒子
border-radius
将元素的4个方角设置圆角，当长与宽相等时，半径为50%则元素可见区域显示为圆
background-color
设置元素的背景颜色
background-clip: content-box;
背景的绘制区域为内容区，不包含内边距与边框
颜色值
- ransparent
  颜色值表示透明
- rgba
  rgba 颜色值是 rgb 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。
  alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。

css布局作业：京东首页轮播图相关推荐

JavaScript实现京东首页轮播图
轮播图效果每隔 3 秒图片会自动切换一张,以此类推安照给定图片数量轮番切换播放. 当鼠标移入时会自动暂停播放,鼠标移出则会继续. 如下图两边有两个左右方向的按钮,点击则会实现手动切换商品图片. 右下 ...
html京东自动轮播,js 京东首页轮播图实现（透明度切换）
思路: 1.定义图片和图片轮播dot初始下标 index为0,并为第一张轮播图和第一个dot赋予状态 2. 切换到下一张图片函数moveNext ,函数内将当前下标index的图片和dot恢复原来状 ...
android京东首页轮播代码,仿京东商品详情轮播图
好久没有更新啦,今天来搞一个京东的轮播:直接上效果 8月-16-2016 09-38-10.gif 8月-16-2016 09-37-17.gif 如果想真实体验可以去京东APP体验一下. 描述一下效 ...
android京东首页轮播代码,web移动端-轮播
var bannerImg = document.querySelectorAll(".jd_banner ul li"); /* 1.自动滚动(定时器+过渡transition+ ...
微服务项目实战技术点汇总：“尚硅谷的谷粒在线教育”七、redis数据库缓存页面数据、使用NUXT框架搭建前台系统环境、前台系统页面、首页轮播图（banner数据显示）、首页热门课程，名师推荐
文章目录一.NUXT前台环境搭建 1.如何学习NUXT 2.下载安装使用NUXT入门模板starter-template 3.机制二.编写静态页面 1.设置布局(首尾固定,中间用nuxt引用组件) ...
实战SSM_O2O商铺_40【前端展示】首页轮播图和一级商铺View层的实现
文章目录概述 index.html index.js index.css Controller 调测修复问题头条图片展示修复一级类别商铺图片展示修复 Github地址概述在完成了后端实战 ...
六十六、实现Vue项目首页轮播图（vue-awesome-swiper）
2020/10/23. 周五.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/22 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共 ...
路飞学城项目之首页轮播图定时更新、课程页面前端及课程表分析
文章目录 1.首页轮播图定时更新(使用celery) 2.课程页面前端 3.课程表分析 3.1.课程表相关模型(实战课为例) 3.2.课程表数据录入 3.3.课程分类接口 3.3.课程分类前端展示(对 ...
【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...

css布局作业：京东首页轮播图

css布局作业：京东首页轮播图相关推荐

最新文章

热门文章