day16之后台管理页面布局
1、后台管理页面布局,其实是对css内容的一些补充。
2、第一种布局,是将pg-content中的menu与content以宽度的百分比来进行设置,
min-width:200px; 给页面设置一个最小宽度;当小于200px时,应用该最小宽度;大于200px时,页面宽度按设置的20%显示
<head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; //设置body没有边框 } .left{ float:left; } .right{ float:right; } .pg-header{ height:48px; background-color:blue; color:white } .pg-content .menu{ width:20%; background-color:red; min-width:200px; /*页面的宽度,小于200px时,应用最小宽度;大于200px时,页面宽度按20%显示*/ height:500px; } .pg-content .content{ width:80%; background-color:green; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">ww</div> <div class="content left">aa</div> </div> <div class="pg-footer"></div> </body>
执行结果如下:
因为给menu设置了高度500px,当前显示的页面没有500px,所以页面右侧会有滚动条
3、对于2的后台管理页面布局进行优化
该例子中,使用了 position:fixed;使其一直在当前页面显示,永远固定在窗口的某个位置。
overflow:auto;内容显示过多时,在当前页面无法显示完全,显示滚动条
<head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; } .left{ float:left; } .right{ float:right; } .pg-header{ height:48px; background-color:blue; color:white } .pg-content .menu{ position:fixed; top:48px; left:0; bottom:0; width:200px; background-color:#dddddd; } .pg-content .content{ position:fixed; top:48px; right:0; bottom:0; left:200px; background-color:purple; overflow:auto; //内容显示过多,在当前页面无法显示完全,显示滚动条 } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">ww</div> <div class="content left"> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> </div> </div> <div class="pg-footer"></div> </body>
执行结果如下:
4、使用了 position:absolute;的页面布局
结合position:absolute;与overflow:auto;可以使页面简单的呈现两种效果
position:absolute;第一次定位可以定位在某个位置;但是当滚轮条滚动,就不在指定的位置了。
<head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin:0; } .left{ float:left; } .right{ float:right; } .pg-header{ height:48px; background-color:blue; color:white } .pg-content .menu{ position:absolute; top:48px; left:0; bottom:0; width:200px; background-color:#dddddd; } .pg-content .content{ position:absolute; top:48px; left:200px; bottom:0; right:0; background-color:purple; //overflow:auto; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu left">ww</div> <div class="content left"> //<div style="position:fixed;bottom:0;right:0;width:50px;height:50px">返回顶部</div> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> </div> </div> <div class="pg-footer"></div> </body>
有没有overflow:auto;这行代码,第一次执行页面时,这两种的结果显示一样,如下:
当content中的样式没有添加 overflow:auto时,滚动条滚动时,当前页面不会固定,执行结果如下:(发现左侧的菜单栏跟上边都随着滚动条滚动)
当content中的样式添加 了overflow:auto时,滚动条滚动时,当前页面固定,执行结果如下:(发现左侧的菜单栏跟上边都不随着滚动条滚动);这个跟3的执行效果是一样的
5、后台页面布局:
应用布局如下:
position:absolute;
border-radius:50%;调整图片的形状,为50%时,图片为圆形。
.pg-header .user:hover .b{display:block;} 当鼠标放到hover上的时候,给b加上样式
z-index:10;设置优先级
<link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css"/> fontawesome是图库网,直接下载包,找到所要应用的图标,将其代码粘贴到引用位置
<i class="fa fa-bell-o" aria-hidden="true"></i>
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css"/> <style> body{ margin:0; } .left{ float:left; } .right{ float:right; } .pg-header{ height:48px; background-color:blue; color:white; line-height:48px; } .pg-header .logo{ width:200px; background-color:cadetblue; text-align:center; } .pg-header .icons{ padding:0 20px; } .pg-header .icons:hover{ background-color:#204982; } .pg-header .user{ background-color:wheat; height:48px; margin-right: 60px; padding: 0 20px; } .pg-header .user:hover{ background-color:#204982; } .pg-header .user .a img{ width:40px; height:40px; margin-top:4px; border-radius:50%; //border-radius:50%;图片变为圆形 } .pg-header .user .b{ z-index:20; position:absolute; top:48px; right:0; background-color:white; width:160px; color:black; display:none; } .pg-header .user:hover .b{ display:block; //当鼠标放到hover上的时候,给b加上样式 } .pg-header .user .b a{ display:block; } .pg-header .icons span{ border-radius:50%; display:inline-block; padding:3px 7px; line-height:1px; background-color:red; font-size:12px; } .pg-content .menu{ position:absolute; top:48px; left:0; bottom:0; width:200px; background-color:#dddddd; } .pg-content .content{ position:absolute; top:48px; left:200px; bottom:0; right:0; background-color:purple; overflow:auto; z-index:9; } </style> </head> <body> <div class="pg-header"> <div class="logo left">易烊千玺</div> <div class="user right" style="position:relative;"> <a class="a" href="#"> <img src="1.jpg"> </a> <div class="b"> <a>我的资料</a> <a>注销</a> </div> </div> <div class=" icons right"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <span>5</span> </div> <div class="icons right"> <i class="fa fa-bell-o" aria-hidden="true"></i> </div> </div> <div class="pg-content"> <div class="menu left">ww</div> <div class="content left"> <!-- <div style="position:fixed;bottom:0;right:0;width:50px;height:50px">返回顶部</div>--> <!-- <div style="position:absolute;bottom:0;right:0;width:50px;height:50px">返回顶部</div>--> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> <p>aa</p><p>aa</p><p>aa</p><p>aa</p> </div> </div> <div class="pg-footer"></div> </body>
执行结果如下:
点击右上角图片时,显示样式,如下: