CSS:
12.display
13.浮动效果
14.浮动特性
15.浮动产生的问题和解决方法
16.float京东导航栏
17.position
18.z-index
19.京东案例
12.display
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>display</title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: red; /* 控制元素隐藏 不占位置 */ /*display: none;*/ /*控制元素隐藏 占位置 影响后面盒子的布局*/ /*visibility: hidden;*/ /*转为 行内块元素*/ /*display: inline-block;*/ /*将 块级元素转换为 行内元素 不能设置宽高*/ display: inline; } a{ /*display: block;*/ /*display: inline-block;*/ width: 300px; height: 300px; background-color: yellow; } img{ /* 行内块元素 一般转化块级元素 */ /*display: block;*/ display: inline; /*转为行内元素 依然可设置宽高 没必要转换 */ width: 100px; height: 100px; } </style> </head> <body> <div>123</div> <div>987</div> <a href="#">百度一下</a> <img src="./images/homesmall1.png" alt="python"> </body> </html>
13.浮动效果
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css"> .wrap div{ width: 200px; height: 200px; background-color: red; border: 1px solid black; /* 文档流：可见元素在文档中的显示位置； 浮动产生的效果： 浮动可以使元素按指定位置排列，直到遇到父元素的边界或者另一个元素的边界停止 */ /* left 左浮动 左侧为起始，从左往右依次排列*/ float: left; /* right 右浮动 右侧为起始，从右往左依次排列 */ /*float: right;*/ /*float: none;*/ } </style> </head> <body> <div class="wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </body> </html>
14.浮动特性
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>浮动特性</title> <style type="text/css"> *{ padding: 0; margin: 0; } .wrap div{ width: 200px; height: 200px; border: 1px solid black; } .box1{ background-color: red; float: left; } .box2{ background-color: yellow; margin-left: 20px; } .box3{ background-color: green; } .container{ /*width: 300px;*/ /*height: 300px;*/ background-color: chartreuse; float: left; } span{ float: left; background-color: blue; width: 100px; height: 100px; } /* 文档流：可见元素在文档中的排列位置 浮动效果： 1.浮动可以使元素脱离文档流，不占位置 2.浮动会使元素提升层级 3.浮动可以使块元素在一行内排列，不设置宽高时，可以使元素适应内容 4.浮动可以使行内元素支持宽高 */ </style> </head> <body> <div class="wrap"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="container">哈哈</div> <div class="container">我们</div> <span>嘿嘿</span> </body> </html>
15.浮动产生的问题和解决方法
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>浮动产生的问题和解决方法</title> <style type="text/css"> *{ padding: 0; margin: 0; } /* 通常页面布局时，父盒子的高度不需要设置，通过子盒子 自动填充父盒子；*/ .wrap{ width: 800px; /*height: 500px;*/ background-color: red; margin: 0 auto; overflow: hidden; } .wrap div{ float: left; } .wrap1{ width:200px; height: 400px; background-color: yellow; } .wrap2{ width:350px; height: 400px; background-color: green; margin-left: 25px; } .wrap3{ width:200px; height: 400px; background-color: blue; margin-left: 25px; } #clearfix{ float: none; clear: both; } /* 官方推荐的解决办法 最长使用的解决办法*/ /* .wrap:after{ visibility: hidden; clear: both; display: block; content: ‘.‘; height: 0; }*/ /* 浮动产生的问题： 父元素不设置高度时，子元素设置了浮动，不会撑开父元素的高度，因为子元素不占位置了！ 解决办法： 1.给父盒子设定固定高度；缺点：不灵活； 2.给浮动元素最后一个加一个空的块级元素，且该元素为不浮动float:none，设置clear:both,就会撑开盒子。 缺点：结构冗余 3.官方推荐：推荐使用： .wrap:after{ visibility: hidden; clear: both; content: ‘.‘; display: block; height: 0; } 4.推荐使用：给父元素添加overflow:hidden eg: .warp{overflow: hidden;} */ </style> </head> <body> <div class="wrap"> <div class="wrap1"></div> <div class="wrap2"></div> <div class="wrap3"></div> <!--<div id="clearfix"></div>--> </div> </body> </html>
16.float京东导航栏
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>float京东导航栏</title> <style type="text/css"> *{ padding: 0; margin: 0; } .wrap{ width: 100%; margin: 0 auto; background-color: rgba(240,243,239,0.73) } .wrap .header{ width: 1245px; height: 40px; margin: 0 auto; background-color: rgba(227,228,229,0.73) } .header_l,.header_r{ float: left; } .header_l img{ width: 20px; height: 20px; } .header_l span{ color: rgba(126,126,126,0.98); font-size: 12px; height: 40px; line-height: 40px; text-align: center; } .header_l{ margin: 5px 0 0 30px; } .header_r{ margin-left: 250px; width: 915px; } .header_r ul li{ list-style: none; height: 40px; line-height: 40px; float: left; padding: 0 10px; } .header_r ul li a{ text-decoration: none; color: rgba(126,126,126,0.98); } .header_r ul li a:hover{ color: red; } </style> </head> <body> <!--最外层的父盒子--> <div class="wrap"> <!--导航--> <div class="header"> <div class="header_l"> <img src="./images/fav.ico" alt="一个logo"> <span>北京</span> </div> <div class="header_r"> <ul> <li><a href="">你好，请登录 <span>免费注册</span></a></li> <li class="spacer"></li> <li><a href="#">我的订单</a></li> <li class="spacer"></li> <li><a href="#">我的京东</a></li> <li class="spacer"></li> <li><a href="#">京东会员</a></li> <li class="spacer"></li> <li><a href="#">企业采购</a></li> <li class="spacer"></li> <li><a href="#">客户服务</a></li> <li class="spacer"></li> <li><a href="#">网站导航</a></li> <li class="spacer"></li> <li><a href="#">手机京东</a></li> </ul> </div> </div> <!--中心内容--> <div class="content"></div> <!--底部--> <div class="footer"></div> </div> </body> </html>
17.position
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>position</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; } .box1{ background-color: red; position:relative; top: 50px; left: 30px; } .box2{ background-color: yellow; position:absolute; top:150px; } .box3{ background-color: green; position:absolute; left: 100px; top:10px; } .father{ width: 300px; height: 300px; background-color: gray; margin-top: 50px; position: relative; } .child{ width: 100px; height: 100px; background-color: red; position: absolute; top:20px; left: 20px; } .aside_logo{ width: 100px; height: 100px; background-color: yellow; /* 固定定位*/ position: fixed; bottom: 20px; right:20px; ; } /* static ： 默认值 relative : 相对定位 1. 不设置偏移量的时候，对元素没有任何影响 2. 相对定位可以提升层级关系。 3. 相对定位是相对于自身定位。 absolute : 绝对定位 1. 可以提升层级关系 2. 脱离文档流 3. 在没有父级元素定位时，以浏览器的左上角为基准定位的。 4. 有父级的情况下，父级设置相对定位（绝对位置），子集设置绝对定位，是以父盒子进行定位的。 （父相子绝） 来设置位置的调整 fixed : 固定定位 */ </style> </head> <body> <!--<div class="box1"></div>--> <!--<div class="box2"></div>--> <!--<div class="box3"></div>--> <div class="father"> <div class="child"> </div> </div> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> <div class="aside_logo"></div> </body> </html>
18.z-index
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>z-index</title> <style type="text/css"> div{ width: 100px; height: 100px; position: absolute; } .box1{ background-color: red; top: 50px; z-index: 1; } .box2{ background-color: green; /*border-radius: 5px 10px 15px 20px;*/ border-radius: 50%; z-index: 20; } .box3{ background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
19.京东案例
<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>京东案例</title> <!-- 网页布局： 上下 结构 上中下 结构 上左右下 结构： 1-2-1 结构 上左中右下 结构： 1-3-1 结构 --> <style type="text/css"> *{padding: 0;margin: 0} ul>li {list-style: none;} a{text-decoration: none;} .wrap{width: 100%;background-color: rgba(240,243,239,0.98)} .container{width: 1300px;overflow: hidden;margin: 0 auto} /*overflow:hidden 用在float:left 可以撑开背景*/ .container div{float: left} .c_l{width: 200px;height: 500px;background-color: green;} .c_c{width: 800px;height: 500px;background-color: red; margin-left: 5px} .c_r{width: 200px;height: 500px;background-color: yellow; margin-left: 5px;} .c_l ul li{ padding: 5px 0 5px 10px; } .c_l ul li a{ color: #868686; } .c_l ul li a:hover{ color: red; } .c_l ul li:hover { background-color: gray; } .center_image{ width: 600px; height: 500px; float: left; } .c_c ul li{ float: right; position: relative; right: 2px; top: 5px; } .c_c ul li img{ width: 200px; height: 165px; } .c_r{ position: relative; } .c_r p{ color: green; background-color: gray; width: 90px; height: 70px; line-height: 70px; text-align: center; position: absolute; } .c_r .p1{ left: 95px; top: 30px; } .c_r .p2{ } </style> </head> <body> <div class="wrap"> <div class="container"> <div class="c_l"> <ul> <li><a href="#">家用电器</a></li> <li><a href="#">家用电器</a></li> <li><a href="#">家用电器</a></li> <li><a href="#">家用电器</a></li> <li><a href="#">家用电器</a></li> <li><a href="#">家用电器</a></li> <li><a href="#">家用电器</a></li> <li><a href="#">家用电器</a></li> <li><a href="#">家用电器</a></li> <li><a href="#">家用电器</a></li> <li><a href="#">家用电器</a></li> </ul> </div> <div class="c_c"> <img src="./images/homesmall1.png" alt="" class="center_image"> <ul> <li><a href=""><img src="./images/homesmall2.png" alt=""></a></li> <li><a href=""><img src="./images/homesmall1.png" alt=""></a></li> <li><a href=""><img src="./images/homesmall2.png" alt=""></a></li> </ul> </div> <div class="c_r"> <div> <p class="p1">哈哈哈</p> <p class="p2">嘿嘿嘿</p> </div> </div> </div> </div> </body> </html>
原文：https://www.cnblogs.com/alice-bj/p/8972260.html