CSS综合案例——淘宝轮播图/焦点图布局的制作

轮播图如下：
图片素材可在淘宝下，记得在代码中设定为相应的图片像素大小。

思路：

大盒子可以设置类名为： tb-promo 淘宝广告
里面先放一张图片。
左右两个按钮用链接就可以。左箭头 prev 右箭头 next
底侧小圆点ul 继续做。类名为 promo-nav

需要注意的是：相对定位不脱离标准流，可以通过margin： auto实现居中。但绝对定位和固定定位不可以，所以他们有相应的算法。

代码如下：

<!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>淘宝轮播图做法</title><style>* {margin: 0;padding: 0;}li {list-style: none;}.tb-promo {position: relative;width: 520px;height: 280px;background-color: pink;margin: 100px auto;}.tb-promo img {width: 520px;height: 280px;}/* 并集选择器可以选择相同的样式 */.prev,.next {position: absolute;/* 绝对定位的盒子垂直居中 */top: 50%;margin-top: -15px;/* 加了绝对定位的盒子可以直接设置高度和宽度 */width: 20px;height: 30px;background: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none;}.prev {left: 0;border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.next {/* 如果一个盒子既有left属性也有right属性，则默认会执行left属性，同理top、bottom会执行top */right: 0;border-top-left-radius: 15px;border-bottom-left-radius: 15px;}.promo-nav {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;width: 70px;height: 13px;background-color: rgba(255, 255, 255, 0.3);border-radius: 7px;}.promo-nav li {float: left;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;margin: 3px;}/* 不要忘记选择器权重的问题 */.promo-nav .selected {background-color: #ff5000;}</style>
</head><body><div class="tb-promo"><img src="../images/tb.jpg" alt=""><!-- 左侧按钮箭头 --><a href="#" class="prev"> &lt</a><!-- 右侧按钮箭头 --><a href="#" class="next"> &gt</a><!-- 小圆点 --><ul class="promo-nav"><li class="selected"></li><li></li><li></li><li></li><li></li></ul></div>
</body></html>

CSS综合案例——淘宝轮播图/焦点图布局的制作相关推荐

定位综合案例-淘宝轮播图
效果图: 布局分析: 1.大盒子定义类名:tb-promo 淘宝广告 2.盒子内放入图片 3.左右两个按钮用链接左键头prev 右箭头 next 4.底测小圆点ul无序列表制作定义类名 prom ...
案例——淘宝轮播图和土豆网鼠标经过显示遮罩
综合案例 - 淘宝轮播图 1 效果图 5.2 布局分析 3 步骤 1. 大盒子我们类名为: tb-promo 淘宝广告 2. 里面先放一张图片. 3. 左右两个按钮用链接就好了. 左箭头 ...
小案例---淘宝轮播图实现
通过自己的自学,初步完成了淘宝轮播图的实现,可能代码上还没得到很多优化,希望大家可以帮我指出一下,非常感谢! 代码如下: <!DOCTYPE html> <html lang=&qu ...
＜CSS练习＞淘宝轮播图案例含素材（CSS定位）
本案例综合了CSS定位的使用以及一些前端基础知识的结合效果图如下: 首先写一个大盒子里面放入主要图片左按钮利用绝对定位设置在主要图片的左中位置右按钮同理设置在右中位置利用ul l ...
17综合案例之淘宝轮播图布局
1.整体效果 2.案例分析 3.具体实现大盒子类的命名tb-promo,淘宝广告: 里面放一张图片: 左右两个按钮用链接就可以,左箭头prev,右箭头next: 底侧小圆点用ul来实现,命名为pro ...
前端学习记录13-CSS-(滑动门技术，微信导航栏实现，淘宝轮播图实现，图标字体实现，过渡效果，获得焦点元素)
前端学习记录13-CSS-滑动门技术,微信导航栏实现,淘宝轮播图实现,图标字体实现,过渡效果,获得焦点元素滑动门技术微信导航栏实现静态轮播图实现网上引用的图标字体设置过渡效果(transit ...
jQuery实现淘宝轮播图
我爱撸码,撸码使我感到快乐大家好,我是Counter 今天给大家分享的是利用jQuery来实现淘宝轮播图,揭开这层神秘的面纱,CSS样式就不做过多的赘述了,主要就是实现的原理,也就是jQuery,老 ...
原生js:淘宝轮播图
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>淘宝 ...
jQuery实现类似淘宝轮播图
jQuery实现类似淘宝轮播图本周的作业是写一个类似淘宝首页的jQuery轮播图,这里做出记录. 如有错误,欢迎批评指证. html实现静态的布局静态布局分析一个轮播图静态的部分分为三个展示区 ...

CSS综合案例——淘宝轮播图/焦点图布局的制作

CSS综合案例——淘宝轮播图/焦点图布局的制作相关推荐

最新文章

热门文章