案例淘宝焦点图布局如图所示：

案例:淘宝焦点图布局制作

1.大盒子我们类名为: tb-promo 淘宝广告

2.里面先放一张图片。

3.左右两个按钮用链接就好了。左箭头prev右箭头next

4.底侧小圆点u继续做。类名为promo-nav

代码：

<!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>12-淘宝轮番图</title><style>/* 保证没有内外边距 */* {margin: 0;padding: 0;}li {list-style: none;}.tb-promo {position: relative;width: 520px;height: 280px;background-color: rgb(233, 47, 47);/* 相对定位不脱标，垂直居中可以用margin: *//* 上下100px 左右水平居中  */margin: 100px auto;}/* 怕上传时的图片和盒子不一样，强制规定图片尺寸，为了不撑大盒子 */.tb-promo img {width: 520px;height: 280px;}/* 并集选择器可以集中声明相同的样式 ---代码变得简洁*/.prev,.next {/* 绝对定位垂直居中 *//* left: 0; */position: absolute;/* 让绝对定位和盒子垂直居中 */top: 50%;margin-top: -15px;/* 加了绝对定位的行内盒子可以直接设置高度和宽度 */width: 20px;height: 30px;background-color: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none;}.prev {left: 0;/* border-radius: 15px; *//* 把矩形角角改成圆角 */border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.next {/* 如果一个盒子既有Left属性,也有right属性,则默认会执行Left属性;同理top bottom 会执行top *//* 让绝对定位和盒子垂直居中 */right: 0;/* border-radius: 15px; *//* 把矩形角角改成圆角 */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, .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="data:images/taobao.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>

结果：

注意问题：并集选择器可以集中声明相同的样式，让代码变得简洁；例如：左箭头prev右箭头next，中含有多数代码是相同的，可以用并集选择器

.prev,
.next {}

使用并集选择器之前的代码：

<!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>12-淘宝轮番图</title><style>/* 保证没有内外边距 */* {margin: 0;padding: 0;}.tb-promo {position: relative;width: 520px;height: 280px;background-color: rgb(233, 47, 47);/* 相对定位不脱标，垂直居中可以用margin: *//* 上下100px 左右水平居中  */margin: 100px auto;}/* 怕上传时的图片和盒子不一样，强制规定图片尺寸，为了不撑大盒子 */.tb-promo img {width: 520px;height: 280px;}/* 并集选择器可以集中声明相同的样式 */.prev {/* 绝对定位垂直居中 */position: absolute;/* 让绝对定位和盒子垂直居中 */left: 0;top: 50%;margin-top: -15px;/* 加了绝对定位的行内盒子可以直接设置高度和宽度 */width: 20px;height: 30px;background-color: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none;/* border-radius: 15px; *//* 把矩形角角改成圆角 */border-top-right-radius: 15px;border-bottom-right-radius: 15px;}.next {/* 绝对定位垂直居中 */position: absolute;/* 让绝对定位和盒子垂直居中 */right: 0;top: 50%;margin-top: -15px;/* 加了绝对定位的行内盒子可以直接设置高度和宽度 */width: 20px;height: 30px;background-color: rgba(0, 0, 0, .3);text-align: center;line-height: 30px;color: #fff;text-decoration: none;/* border-radius: 15px; *//* 把矩形角角改成圆角 */border-top-left-radius: 15px;border-bottom-left-radius: 15px;}</style>
</head><body><div class="tb-promo"><img src="data:images/taobao.jpg" alt=""><!-- 左侧按钮 --><a href="#" class="prev"> &lt; </a><!-- 右侧按钮 --><a href="#" class="next"> &gt; </a></div>
</body></html>

网页布局总结：

通过盒子模型,清楚知道大部分 `html` 标签是一个盒子。

通过 `CSS` 浮动、定位可以让每个盒子排列成为网页。

一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。

1.标准流

可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。

2.浮动

可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局。

3.定位

定位最大的特点是有层叠的概念,就是可以让多个盒子前后压来显示。如果元素自由在某个盒子内移动就用定位布局。

组成网页这三者缺一不可。

56 案例淘宝焦点图布局网页布局总结相关推荐

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( ...
CSS课堂案例11-淘宝焦点图布局
淘宝焦点图布局结构步骤代码 <!DOCTYPE html> <html lang="zh-CN"> <head><meta char ...
案例——淘宝轮播图和土豆网鼠标经过显示遮罩
综合案例 - 淘宝轮播图 1 效果图 5.2 布局分析 3 步骤 1. 大盒子我们类名为: tb-promo 淘宝广告 2. 里面先放一张图片. 3. 左右两个按钮用链接就好了. 左箭头 ...
AJAX | 跨域与JSONP + 同源策略和跨域 + JSONP + 防抖和节流 + 案例 – 淘宝搜索
目录同源策略和跨域同源策略跨域 JSONP JSONP的实现原理自己实现一个简单的JSONP JSONP的缺点 jQuery中的JSONP 自定义参数及回调函数名称 jQuery中JSONP的 ...
淘宝订单截图生成器网页版制作
你是否曾经为手动制作淘宝订单截图而烦恼?现在,有了淘宝订单生成器,这一切都变得轻松起来. 作为一款专为淘宝购物爱好者打造的神器,淘宝订单生成器可以轻松帮你生成美观的订单截图,让你的朋友们羡慕不已.不再 ...
制作淘宝主图视频的软件
至今为止,使用到淘宝主图视频的店铺还是并不多见,但是相信很多淘宝卖家对于"淘宝主图视频"多少有一些了解.段长度为9秒钟的淘宝主图视频,这个视频将在买家打开宝贝详情页的时候进行播放 ...
如何偷淘宝主图-淘宝偷图秘决
如何偷淘宝主图-淘宝偷图秘决工具/原料 · 谷歌浏览器,淘宝方法/步骤(适用天猫) 1. 1 淘 ...
如何下载淘宝主图视频和微信公众号文章中的视频
一.下载淘宝主图视频 (1)电脑打开自己的一个带主图视频宝贝详情页,右击鼠标打开"查看网页源代码" (2)在源代码页面中按CTRL+F,搜索"world",可以 ...
如何制作淘宝主图视频
至今为止,使用到淘宝主图视频的店铺还是并不多见,但是相信很多淘宝卖家对于"淘宝主图视频"多少有一些了解.段长度为9秒钟的淘宝主图视频,这个视频将在买家打开宝贝详情页的时候进行播放 ...

56 案例淘宝焦点图布局网页布局总结

案例淘宝焦点图布局如图所示：

案例:淘宝焦点图布局制作

1.大盒子我们类名为: tb-promo 淘宝广告

2.里面先放一张图片。

3.左右两个按钮用链接就好了。左箭头prev右箭头next

4.底侧小圆点u继续做。类名为promo-nav

代码：

结果：

注意问题：并集选择器可以集中声明相同的样式，让代码变得简洁；例如：左箭头prev右箭头next，中含有多数代码是相同的，可以用并集选择器

使用并集选择器之前的代码：

网页布局总结：

通过盒子模型,清楚知道大部分 `html` 标签是一个盒子。

通过 `CSS` 浮动、定位可以让每个盒子排列成为网页。

一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。

1.标准流

可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。

2.浮动

可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局。

3.定位

定位最大的特点是有层叠的概念,就是可以让多个盒子前后压来显示。如果元素自由在某个盒子内移动就用定位布局。

组成网页这三者缺一不可。

56 案例淘宝焦点图布局网页布局总结相关推荐

最新文章

热门文章

56 案例淘宝焦点图布局 网页布局总结

案例淘宝焦点图布局如图所示：

案例:淘宝焦点图布局制作

1.大盒子我们类名为: tb-promo 淘宝广告

2.里面先放一张图片。

3.左右两个按钮用链接就好了。左箭头prev右箭头next

4.底侧小圆点u继续做。类名为promo-nav

代码：

结果：

注意问题：并集选择器可以集中声明相同的样式 ，让代码变得简洁；例如：左箭头prev右箭头next，中含有多数代码是相同的，可以用并集选择器

使用并集选择器之前的代码：

网页布局总结：

通过盒子模型,清楚知道大部分 html 标签是一个盒子。

通过 CSS 浮动、定位可以让每个盒子排列成为网页。

一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法。

1.标准流

可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局。

2.浮动

可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局。

3.定位

定位最大的特点是有层叠的概念,就是可以让多个盒子前后压来显示。如果元素自由在某个盒子内移动就用定位布局。

组成网页这三者缺一不可。

56 案例淘宝焦点图布局 网页布局总结相关推荐

最新文章

热门文章

56 案例淘宝焦点图布局网页布局总结

注意问题：并集选择器可以集中声明相同的样式，让代码变得简洁；例如：左箭头prev右箭头next，中含有多数代码是相同的，可以用并集选择器

通过盒子模型,清楚知道大部分 `html` 标签是一个盒子。

通过 `CSS` 浮动、定位可以让每个盒子排列成为网页。

56 案例淘宝焦点图布局网页布局总结相关推荐