定位综合案例-淘宝轮播图

效果图：

布局分析：

1、大盒子定义类名：tb-promo 淘宝广告

2、盒子内放入图片

3、左右两个按钮用链接左键头prev 右箭头 next

4、底测小圆点ul无序列表制作定义类名 promo-nav

问题1：

1、子绝父相设置好大盒子和左右箭头的定位状态后

子盒子没有往上走

左右盒子样式代码：

.prev{position: absolute;top: 0；left：0;
}
.next{position: absolute;top: 0；right：0;
}

原因：写位置的代码没有用英文状态输入

注意：

左右箭头垂直于图片居中，不能直接设置top：50% 还需要设置margin-top=子盒子高度的一半。

问题2：

淘宝页面中的左右箭头的盒子是圆角边框 20*30的盒子怎么设置border-radius

解决代码：
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;

注意：

1、因为左右按钮的样式代码很多都是重复类似的，所以可以用并集选择器，将相同的代码放在一起，不同的分开写，节约代码

.prev,.next{}

两个选择器中间用逗号“,”隔开

2、如果一个盒子既有left属性又有right属性，则会执行left属性；同样如果盒子同时拥有top和bottom属性，则会默认执行top属性

定位综合案例-淘宝轮播图相关推荐

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

定位综合案例-淘宝轮播图

定位综合案例-淘宝轮播图相关推荐

最新文章

热门文章