css学习2：定位、轮播图、元素显示与隐藏_轮播图隐藏旁边图片(1)

本文链接：https://blog.csdn.net/2401_84433535/article/details/138265612

li {
list-style: none;
}

.tb-promo {
/* 子绝父相 */
position: relative;
width: 577px;
height: 433px;
background-color: pink;
/* 相对定位和标准流一样可以用margin，但是绝对定位和固定定位不行 */
margin: 100px auto;
}

.tb-promo img {
width: 577px;
height: 433px;
}

/* 并集选择器 */
.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-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}

.next {
/* 小细节：如果一个盒子既有left属性又有right属性，则默认会执行left，top和bottom会执行top */
right: 0;
/* 修改圆角 */
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
}

.promo-nav {
position: absolute;
/* 水平居中 */
left: 50%;
margin-left: -35px;
bottom: 15px;
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;
}


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210131202918521.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)


##### 3. 网页布局总结


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210131203207277.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)


##### 4. 元素的显示与隐藏


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210131225054375.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210131223438302.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210131224455538.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)


![在这里插入图片描述](https://img-blog.csdnimg.cn/20210131224458861.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)  
 例子：![在这里插入图片描述](https://img-blog.csdnimg.cn/20210131230657437.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzODE5Mjc0,size_16,color_FFFFFF,t_70)

Document

.tudou img {
width: 100%;
height: 100%;
}