|
前面的根据次序的笔记已然更新了20篇内容了，由于篇幅问题，请看目录最后一栏。已然总结在了最后，下面起始今天的淘宝轮播图学习。
1、效果图
2、布局分析
3、过程大盒子咱们类名为： tb-promo 淘宝宣传里面先放一张照片。上下两个按钮 用链接就好了。 左箭头 prev 右箭头 next 左按钮样式（border-radius：左上，右上，右下，左下），
右按钮定位，提取上下按钮一起的样式代码（并集选取器） 底侧小圆点ul 继续做。 类名为 promo-nav 中间长方形椭圆 ul的定位（水平居中，离底部15px）
长方形必须五个小圆点，ul没序列表，li浮动，椭圆中小圆点的样式
4、知识点：圆角矩形设置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: 左上角 右上角 右下角 左下角; ~~~
还是遵循的顺时针。
5、代码
<!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;
bac公斤round-color: pink;
margin: 100px auto;
}
.tb-promo img {
width: 520px;
height: 280px;
}
/* 并集选取器能够集体声明相同的样式 */
.prev,
.next {
position: absolute;
/* 绝对定位的盒子垂直居中 */
top: 50%;
margin-top: -15px;
/* 加了绝对定位的盒子能够直接设置高度和
| 
发表于 2024-6-29 14:20:09
