CSS课堂案例11-淘宝焦点图布局

淘宝焦点图布局

结构

步骤

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>淘宝焦点图布局</title><style>/* 初始化 */* {margin: 0;padding: 0;}li {list-style: none;}/* 大盒子 */.tb-promo {position: relative;/*子绝父相*/top: 25px;left: 50%;margin-left: -260px;width: 520px;height: 280px;/* background-color: #f2ff; */}/* 为了避免图片大小的问题，直接设置为父盒子的100% */.tb-promo img {width: 100%;}.tb-promo .position {position: absolute;top: 50%;width: 30px;height: 30px;}.tb-promo .position .button {width: 30px;height: 30px;font-size: 20px;line-height: 30px;color: #fff;border-color: transparent;background-color: rgba(1,1,1,0.3);}.tb-promo .prev {left: 0;margin-top: -15px;}.tb-promo .prev .button {border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.tb-promo .next {right: 0;margin-top: -15px;}.tb-promo .next .button {border-top-left-radius: 15px;border-bottom-left-radius: 15px;}.tb-promo .promo-nav {position: absolute;bottom: 15px;left: 50%;margin-left: -35px;width: 70px;height: 13px;border-radius: 7px;background: rgba(255,255,255,.3);}.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="img/淘宝.jpg" alt="淘宝"><a href="#" class="prev position"><input type="button" value="&lt;" class="button"></a><a href="#" class="next position"><input type="button" value="&gt;" class="button"></a><ul class="promo-nav"><li></li><li class="selected"></li><li></li><li></li><li></li></ul></div>
</body>
</html>

实现的效果

CSS课堂案例11-淘宝焦点图布局相关推荐

10.【CSS定位】：position、z-index、dispaly(none)、visibility、overflow hot new 模块 + 淘宝焦点图布局 +土豆网鼠标经过显示遮罩
文章目录 [CSS定位] 一.定位 1.1 为什么需要定位? 1.2 定位组成 1.3 静态定位 static(了解) 1.4 相对定位 relative(重要) 1.5 绝对定位 absolute( ...
56 案例淘宝焦点图布局网页布局总结
案例淘宝焦点图布局如图所示: 案例:淘宝焦点图布局制作 1.大盒子我们类名为: tb-promo 淘宝广告 2.里面先放一张图片. 3.左右两个按钮用链接就好了.左箭头prev右箭头next 4.底侧 ...
17综合案例之淘宝轮播图布局
1.整体效果 2.案例分析 3.具体实现大盒子类的命名tb-promo,淘宝广告: 里面放一张图片: 左右两个按钮用链接就可以,左箭头prev,右箭头next: 底侧小圆点用ul来实现,命名为pro ...
jQuery 选择器之案例：淘宝服饰精品案例
案例:淘宝服饰精品案例 ①核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏. ②需要得到当前小li 的索引号,就可以显示对应索引号的图片 ③jQuery 得到当前元素 ...
Python爬虫进阶——urllib模块使用案例【淘宝】
Python爬虫基础--HTML.CSS.JavaScript.JQuery网页前端技术 Python爬虫基础--正则表达式 Python爬虫基础--re模块的提取.匹配和替换 Python爬虫基础- ...
HTML+CSS简单的淘宝首页框架布局小练(一）
开的前端的课程,练习淘宝的前台页面的框架,就简单根据理解写了下,(小傻猫)记录学习的经历简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的首先需要注意的是该部分的布局,是将该部分分成量大块布局 ...
【每日一练】原生js仿淘宝主图放大镜功能，附学习源码
在我们的项目中,经常会遇到各种功能效果的实现,对于每一项功能的实现方式,都有很多种,这些实现方式没有好坏之分,只有适合与否,但是我个人建议,如果项目急就选择自己擅长的方式实现,比较完成工作更加重要嘛. ...
JavaScript之衣服相册切换效果（类似淘宝商品图切换）
JavaScript之衣服相册切换效果(类似淘宝商品图切换) 话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> &l ...
2022年双11淘宝满减规则解读
2022年双11淘宝满减规则解读双11期间主要关注双十一红包,那么今年淘宝双11满减活动有没有?因为10月24日20点双11预售就开始了,不少小姐姐想知道2022年淘宝双十一满减是多少,本文小编赵一 ...

CSS课堂案例11-淘宝焦点图布局

淘宝焦点图布局

结构

步骤

代码

实现的效果

CSS课堂案例11-淘宝焦点图布局相关推荐

最新文章

热门文章