第八十五节，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>列表1li>
<li>列表2li>
<li>列表3li>
<li>列表4li>
<li>列表5li>
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; }