博文尚美轮播小圆点案例

博文尚美轮播小圆点案例

CSS部分

border-radius 属性为元素添加圆角边框
【border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性】
.banner .banner-list li{
height: 8px;
width: 8px;
border-radius: 50%;
}

border设置四个边框样式：
.banner .banner-list li{
height: 8px;
width: 8px;
border-radius: 50%;
border: 2px solid #fff;
}

float让图像向左侧浮动：
【float属性指定一个盒子（元素）是否应该浮动。
注意： 绝对定位的元素忽略float属性！】
.banner .banner-list li{
height: 8px;
width: 8px;
border-radius: 50%;
border: 2px solid #fff;
float: left;
}

margin设置一个元素的所有四个边距：
.banner .banner-list li{
height: 8px;
width: 8px;
border-radius: 50%;
border: 2px solid #fff;
float: left;
margin: 0 6px;
}
【margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
实例:
margin:10px 5px 15px 20px;
上边距是 10px
右边距是 5px
下边距是 15px
左边距是 20px
margin:10px 5px 15px;
上边距是 10px
右边距和左边距是 5px
下边距是 15px
margin:10px 5px;
上边距和下边距是 10px
右边距和左边距是 5px
margin:10px;
所有四个边距都是 10px】

background-color 属性背景颜色
【元素的背景是元素的总大小，包括填充和边界（但不包括边距）。】

.banner .banner-list .active{
background-color: #fff;
}
效果如图

absolute绝对定位的元素
【对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边。left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。translateX(x)定义转换，只是用 X 轴的值。】
.banner .banner-list{
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);

}