1. 案例
<!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>
2. 网页布局总结
3. 元素的显示与隐藏
大意：让元素在页面中显示或者隐藏
3.1 display显示隐藏属性（隐藏后位置不保留）
<!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>显示隐藏元素之display</title> <style> .peppa { display: none; /* display: block; */ width: 200px; height: 200px; background-color: pink; } .george { width: 200px; height: 200px; background-color: skyblue; } </style> </head> <body> <div class="peppa">佩奇</div> <div class="george">乔治</div> </body> </html>
3.2 visibility属性（隐藏后位置保留）
<!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>显示隐藏元素之display</title> <style> .baba { visibility: hidden; width: 200px; height: 200px; background-color: pink; } .mama { width: 200px; height: 200px; background-color: skyblue; } </style> </head> <body> <div class="baba">猪爸爸</div> <div class="mama">猪妈妈</div> </body> </html>
3.3 overflow属性
<!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>显示隐藏元素之overflow</title> <style> .peppa { /* overflow: visible; */ /* overflow: hidden; */ /* scroll 溢出的部分显示滚动条 不溢出也显示滚动条 */ /* overflow: scroll; */ /* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */ /* overflow: auto; */ width: 200px; height: 200px; border: 3px solid pink; margin: 100px auto; } </style> </head> <body> <div class="peppa"> 《小猪佩奇》，又名《粉红猪小妹》（台湾名为粉红猪），英文名为《Peppa Pig》，是由英国人阿斯特利（Astley）、贝克（Baker）、 </div> </body> </html>
