前面的按照顺序的笔记已经更新了20篇内容了，因为篇幅问题，请看目录最后一栏。已经总结在了最后，下面开始今天的淘宝轮播图学习。
目录
一、效果图
二、布局分析
三、步骤
四、知识点：圆角矩形设置4个角
五、代码
六、网页布局的总结
6.1. 标准流
6.2. 浮动
6.3. 定位
七、前端学习笔记教程不定期更新中，传送门：
一、效果图
二、布局分析
三、步骤
大盒子我们类名为： tb-promo 淘宝广告里面先放一张图片。左右两个按钮 用链接就好了。 左箭头 prev 右箭头 next 左按钮样式（border-radius：左上，右上，右下，左下），
右按钮定位，提取左右按钮共同的样式代码（并集选择器）
底侧小圆点ul 继续做。 类名为 promo-nav
中间长方形椭圆 ul的定位（水平居中，离底部15px）
长方形需要五个小圆点，ul无序列表，li浮动，椭圆中小圆点的样式
四、知识点：圆角矩形设置4个角
圆角矩形可以为4个角分别设置圆度， 但是是有顺序的
border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-right-radius:20px; border-bottom-left-radius:20px;
如果4个角，数值相同
~~~css border-radius: 15px; ~~~
里面数值不同，我们也可以按照简写的形式，具体格式如下:
~~~css border-radius: 左上角 右上角 右下角 左下角; ~~~
还是遵循的顺时针。
五、代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><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-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: pink; */background: 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="images/tb.jpg" alt=""><!-- 左侧按钮箭头 --><a href="#" class="prev"> < </a><!-- 右侧按钮箭头 --><a href="#" class="next"> > </a><!-- 小圆点 --><ul class="promo-nav"><li class="selected"></li><li></li><li></li><li></li><li></li></ul></div></body></html>
六、网页布局的总结
通过盒子模型，清楚知道大部分html标签是一个盒子。
通过CSS浮动、定位 可以让每个盒子排列成为网页。
一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。
6.1. 标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
6.2. 浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
6.3. 定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。
七、前端学习笔记教程不定期更新中，传送门：
前端HTML第一天：什么是网页？什么是HTML？网页怎么形成？黑马程序员前端-CSS入门总结黑马程序员前端-CSS之emmet语法黑马程序员前端-CSS的复合选择器黑马程序员前端-CSS的显示模式黑马程序员前端-CSS背景黑马程序员前端-CSS三大特性：叠层性、继承性、优先级黑马程序员前端–CSS盒子模型以及PS基础黑马程序员前端-CSS之圆角边框、盒子阴影、文字阴影黑马程序员前端-CSS之浮动知识点汇总黑马程序员前端-CSS前端基础了解PS切图黑马程序员前端-CSS属性书写顺序（重点）黑马程序员前端-CSS定位的4种分类黑马程序员前端-CSS练手之学成在线页面制作黑马程序员前端-HTML+CSS之定位（position）的应用前端学习路线图：课程、源码、笔记，技术栈
欢迎小伙伴们留言哦，期待看到大家的进步。另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。
