第八十五节，css布局补充一
css布局补充一
图片边框问题
注意css布局时img图片标签默认有的浏览器有边框，所以大多时候需要去除图片的边框
CSS各种居中方法
水平居中的text-align:center 和 margin:0 auto
这两种方法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响，否则一切都是无用功。margin:0 auto
也可以被写成margin:0 auto 0 auto。不能理解的童鞋们可以自己去找找关于css缩写的内容。
垂直居中的line-height
什么？！margin在垂直居中里不起作用了？显然事情确实如此，我们仅有margin:0 auto的用法而没有auto 0的情况。至于line-height，他也是作用在父元素上，当他的值等于父元素的height值时
，内部的文字就会自动的垂直居中了。此处好像仅仅只能是文字而已，遗憾。
利用position定位来实现元素的水平和垂直居中
html代码
<div class="a"> <div class="b"> <p>这是一段文本</p> </div> </div>
css代码
@charset "utf-8"; *{ margin: 0; padding: 0; } .a{ width: 400px; height: 300px; background-color: #ff3820; /*将父元素绝对定位*/ position: relative; } .b{ width: 100px; height: 50px; background-color: #3437ff; /*将子元素相对定位*/ position: absolute; /*定位上面百分之五十*/ top: 50%; /*定位左边百分之五十*/ left: 50%; /*外边距左边负元素宽度的一半*/ margin-left: -50px; /*外边距上负元素高度的一半*/ margin-top: -25px; }
css布局边距问题
有的标签有默认边距，布局起来不方便，我们一般在布局的时候，会先用*将所以内外边距去除
*{ margin:0; padding:0; }
利用position: absolute;相对定位来布局管理后台
css代码
@charset "utf-8"; *{ margin:0; padding:0; overflow: hidden; } body{ background-color: #00C5CE; color: #FFFFFF; } /*头部区域*/ .tou{ width: auto; height: 100px; background-color: #00C5CE; text-align:center; border-bottom: 4px solid #fef6ff; } .tou h1{ font-size: 30px; font-weight: bold; line-height: 100px; } /*左边导航区域*/ div .dh{ background-color: #5DA7AA; width: 180px; height: 572px; border: 4px solid #3B5521; border-radius: 6px; /*将导航区域相对定位*/ position: absolute; left: 0; } div .dh h3{ width: 182px; height: 25px; background-color: #2E5FC4; font-size: 15px; text-align: center; line-height: 25px; } div .dh ul li{ background-color: #A2D3D3; margin-top: 2px; margin-bottom: 2px; text-align: center; color: #1618ff; border: 2px solid #A2D3D3; border-radius: 6px; } /*内容区域*/ div .lr{ height: 572px; /*内容区域相对定位*/ position: absolute; left: 190px; right: 0; bottom: 50px; top: 104px; color: #1618ff; background-color: #D3EAEF; border: 4px solid #3B5521; border-radius: 6px; overflow: scroll; } /*底部区域*/ div .db{ width: auto; height: 42px; background-color: #5DA7AA; /*底部相对定位*/ position: absolute; top: 687px; left: 0; right: 0; bottom: 0; text-align: center; line-height: 42px; }
html代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>后台管理系统</title> <link rel="stylesheet" type="text/css" href="1.css"/> </head> <body> <!--头部--> <div class="tou"> <h1>欢迎登陆后台管理系统</h1> </div> <!--主体--> <div class="zht"> <div class="dh"> <h3>导航中心</h3> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4</li> <li>列表5</li> </ul> </div> <div class="lr"> <h1>这是内容</h1> <h1>这是内容</h1> <h1>这是内容</h1> <h1>这是内容</h1> <h1>这是内容</h1> <h1>这是内容</h1> <h1>这是内容</h1> <h1>这是内容</h1> <h1>这是内容</h1> <h1>这是内容</h1> <h1>这是内容</h1> <h1>这是内容</h1> <h1>这是内容</h1> <h1>这是内容</h1> </div> <div class="db"> 玉秀文化传播版权所有© </div> </div> </body> </html>
效果图：
利用font-awesome图片和position定位来实现文本框图标
css代码
@charset "utf-8"; .shrk{ width: 190px; height: auto; background-color: #194aff; position: relative; } .shrk input{ width: 170px; height: 25px; padding-right: 25px; border: 2px solid #2758ff; border-radius: 6px; } .shrk span{ /*定位图片*/ position: absolute; right: 0px; top: 8px; opacity: 0.7; color: #2758ff; }
html代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>输入框</title> <link rel="stylesheet" type="text/css" href="font-awesome-4.6.3/css/font-awesome.css"/> <link rel="stylesheet" type="text/css" href="1.css"/> </head> <body> <div class="shrk"> <input type="text"/> <span class="fa fa-user"></span> </div> </body> </html>
利用position定位来设置模态对话框
html代码
<!--网页层--> <div class="wy"> <p>这是网页层</p> </div> <!--遮罩层--> <div class="mt"> </div> <!--提示层--> <div class="tshk"> <h2>提示框</h2> </div>
css代码
@charset "utf-8"; *{ margin: 0; padding: 0; } /*网页层*/ .wy{ width: auto; height: 2000px; background-color: #ffd41e; } /*遮罩层*/ .mt{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background-color:black; opacity: 0.8; } /*提示层*/ .tshk{ width: 400px; height: 300px; background-color:aliceblue; position: fixed; top: 50%; left: 50%; z-index: 2; margin-left: -200px; margin-top: -150px; }
布局购物商城的购买数量加减框
html代码
<div class="a"> <div class="b">-</div> <div class="c"> <input type="text" value="1"/> </div> <div class="d">+</div> </div>
css代码
@charset "utf-8"; *{ margin: 0; padding: 0; } .a{ width: 150px; height: 30px; margin-top: 10px; margin-left: 10px; border: 1px solid #C6C6C6; cursor: pointer; } .b{ width: 30px; height: 30px; background-color: #C6C6C6; border-right: 1px solid #9B9898; text-align: center; line-height: 30px; font-size: 20px; float: left; } .c{ width: 88px; height: 30px; float: left; } .c input{ width: 88px; height: 30px; border: 0; text-align: center; line-height: 30px; } .d{ width: 30px; height: 30px; background-color: #C6C6C6; border-left: 1px solid #9B9898; text-align: center; line-height: 30px; font-size: 20px; float: right; }
