前端速成（11）css
<!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> .box1 { position: relative; top: 100px; left: 100px; width: 200px; height: 200px; background-color: pink; } .box2 { width: 200px; height: 200px; background-color: deeppink; } </style> </head> <body> <div class="box1"> </div> <div class="box2"> </div> </body> </html>
<!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> .father { width: 500px; height: 500px; background-color: skyblue; } .son { position: absolute; /* top: 10px; left: 10px; */ /* top: 100px; right: 200px; */ left: 0; bottom: 0; width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
父无定位，按浏览器文档定位
注：图片元素加有个div
<!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> .w { width: 800px; height: 1400px; background-color: pink; margin: 0 auto; } .fixed { position: fixed; /* 1. 走浏览器宽度的一半 */ left: 50%; /* 2. 利用margin 走版心盒子宽度的一半距离 */ margin-left: 405px; width: 50px; height: 150px; background-color: skyblue; } </style> </head> <body> <div class="fixed"></div> <div class="w">版心盒子 800像素</div> </body> </html>
注：当页面滚动，它随之而动，再往下就固定了
<!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> body { height: 3000px; } .nav { /* 粘性定位 */ position: sticky; top: 0; width: 800px; height: 50px; background-color: pink; margin: 100px auto; } </style> </head> <body> <div class="nav">我是导航栏</div> </body> </html>
<!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> .box { position: absolute; top: 0; left: 0; width: 200px; height: 200px; } .xiongda { background-color: red; z-index: 1; } .xionger { background-color: green; left: 50px; top: 50px; z-index: 2; } .qiangge { background-color:blue; left: 100px; top: 100px; } </style> </head> <body> <div class="box xiongda">熊大</div> <div class="box xionger">熊二</div> <div class="box qiangge">光头强</div> </body> </html>
绝对定位水平垂直居中
<!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> .box { position: absolute; /* 1. left 走 50% 父容器宽度的一半 */ left: 50%; /* 2. margin 负值 往左边走 自己盒子宽度的一半 */ margin-left: -100px; top: 50%; margin-top: -100px; width: 200px; height: 200px; background-color: pink; /* margin: auto; */ } </style> </head> <body> <div class="box"></div> </body> </html>
<!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> img { float: left; } </style> </head> <body> 1993年，在古装片《战神传说》中扮演一个武功超群的渔民；同年，主演动作喜剧片《至尊三十六计之偷天换日》，在片中饰演赌术高明的千门高手钱文迪；此外，他还主演了爱情片《天长地久》，在片中塑造了一个风流不羁的江湖浪子形象。 1994年，刘德华投资并主演了剧情片《天与地》，在片中饰演面对恶势力却毫不退缩的禁毒专员张一鹏。1995年，主演赛车励志片《烈火战车》，在片中饰演叛逆、倔强的阿祖，并凭借该片获得第15届香港电影金像奖最佳男主角提名；同年在动作片《大冒险家》中演绎了立仁从小时候父母双亡到长大后进入泰国空军的故事。 1996年，主演黑帮题材的电影《新上海滩》，在片中饰演对冯程程痴情一片的丁力。1997年，担任剧情片《香港制造》的制作人；同年，主演爱情片《天若有情之烽火佳人》，在片中饰演家世显赫的空军少尉刘天伟；12月，与梁家辉联袂主演警匪动作片《黑金》，在片中饰演精明干练、嫉恶如仇的调查局机动组组长方国辉。1998年，主演动作片《龙在江湖》 <img src="images/img.jpg" alt=""> ，饰演重义气的黑帮成员韦吉祥；同年，出演喜剧片《赌侠1999》；此外，他还担任剧情片《去年烟花特别多》的制作人。 1993年，在古装片《战神传说》中扮演一个武功超群的渔民；同年，主演动作喜剧片《至尊三十六计之偷天换日》，在片中饰演赌术高明的千门高手钱文迪；此外，他还主演了爱情片《天长地久》，在片中塑造了一个风流不羁的江湖浪子形象。 1994年，刘德华投资并主演了剧情片《天与地》，在片中饰演面对恶势力却毫不退缩的禁毒专员张一鹏。1995年，主演赛车励志片《烈火战车》，在片中饰演叛逆、倔强的阿祖，并凭借该片获得第15届香港电影金像奖最佳男主角提名；同年在动作片《大冒险家》中演绎了立仁从小时候父母双亡到长大后进入泰国空军的故事。 1996年，主演黑帮题材的电影《新上海滩》，在片中饰演对冯程程痴情一片的丁力。1997年，担任剧情片《香港制造》的制作人；同年，主演爱情片《天若有情之烽火佳人》，在片中饰演家世显赫的空军少尉刘天伟；12月，与梁家辉联袂主演警匪动作片《黑金》，在片中饰演精明干练、嫉恶如仇的调查局机动组组长方国辉。1998年，主演动作片《龙在江湖》，饰演重义气的黑帮成员韦吉祥；同年，出演喜剧片《赌侠1999》；此外，他还担任剧情片《去年烟花特别多》的制作人。 </body> </html>
<!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> .box { /* 1.浮动的元素不会压住下面标准流的文字 */ /* float: left; */ /* 2. 绝对定位（固定定位） 会压住下面标准流所有的内容。 */ position: absolute; width: 150px; height: 150px; background-color: pink; } </style> </head> <body> <div class="box"></div> <p>阁下何不同风起，扶摇直上九万里</p> </body> </html>
<!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 class="selected"></li> <li class="selected"></li> <li class="selected"></li> <li class="selected"></li> </ul> </div> </body> </html>
<!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> .tudou { position: relative; width: 444px; height: 320px; background-color: pink; margin: 30px auto; } .tudou img { width: 100%; height: 100%; } .mask { /* 隐藏遮罩层 */ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center; } /* 当我们鼠标经过了 土豆这个盒子，就让里面遮罩层显示出来 */ .tudou:hover .mask { /* 而是显示元素 */ display: block; } </style> </head> <body> <div class="tudou"> <div class="mask"></div> <img src="images/tudou.jpg" alt=""> </div> </body> </html>
