CSS-2
div img 下面留
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; } .c1{ width: 100%; background-color: darkgrey; } </style> </head> <body> <div class="c1"><img src="mll_logo.gif"></div> </body> </html>
div 不设置height，图片下面会留白？
原因：img 元素是inline-block，图片的vertical-align是baseline。如下图：
解决方法1：
<img style="vertical-align: middle" src="mll_logo.gif"></div>
解决方法2：
<img style="display: block" src="mll_logo.gif">
解决方法3：
将div的line-height设置得足够小，也可以去掉空白，例如div{line-height:5px;} 或者 也可以将font-size设为0，实际上也是改变了line-height
=虚线分割线========================================
<div class="inner02"></div>
.inner02{
width:1px; 宽度设置为1
height:350px;
border-left:1px 边框为1
dashed gainsboro; dashed 虚线；gainsboro 亮灰。
float: right;
margin-top: -350px; 定位
margin-right: 320px; 定位
}
=背景属性===========================================================
背景颜色
background-color: green;
背景图片
background-image: url("egon.jpg");
background-repeat: no-repeat;
background-position: center center;
背景图片简写
background: url("egon.jpg") no-repeat -254px -97px;
input的背景图片
Html
<p> <label for="male">Male</label><input type="text" name="sex" id="male" /> /*lable 的for 要等于 input的id*/ </p>
CSS
p{ font-size: 20px; /*字号大写*/ font-weight: bold; /* font粗细*/ font-family: 'Lucida Bright'; /* 字体*/ font-style: oblique; /*斜体*/ } p input{ width: 200px; height: 40px; border: 1px solid black; background-image: url("2.png"); background-size: 40px 40px ; background-repeat: no-repeat; /* background-position:left;*/ background-position:right; }
<p class="uertit" style="background: url(autocode.png) no-repeat 250px">
验证码:<input class="i1" style="width: 140px;" type="text" name="authcode">
</p> p.uertit{ color: #999999; font-size: 17px; font-weight: bold; font-family: Microsoft YaHei; } input.i1{ color:gray; height: 28px; width: 240px;
border-style: solid; border-width: 2px; border-color: gainsboro; margin-left: 10px; }
<p style='background: url(code.png) no-repeat 180px'><input type="text"></p> 或者
<input type="text"><img style="vertical-align: middle " src="code.png"> /*图片模式和基线对齐，所以需要设置为垂直对齐为middle-line*/
=div 圆形 =======================================================================
鼠标悬浮，背景验收改变。
<head> <style> .c1{ border-radius: 50%; border: 1px solid red; width: 40px; height: 40px; text-align: center; line-height: 40px ; background-color: darkgrey; color: black; font-weight: bold; } .c1:hover{ background-color: goldenrod; } </style> </head> <body> <div class="c1"> sddd</div> </body>
=无序列表========================================
ul{
list-style: none; /*取消样式，横过来显示*/
padding: 0; /*去除li前面的padding*/
}
=继承=========================================
父标签的属性，如颜色，后代标签没有此属性可以继承。后代标签有此属性覆盖父标签。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ color: red; } p{ color: green; } ul li a{ color: RGB(200,122,111); } </style> <body> <div class="c1"> DIV1 <div class="c2">DIV2</div> <p>PPP</p> <a href="">click</a> </div> <ul> <li><a href="">11</a></li> <li><a href="">22</a></li> <li><a href="">2222</a></li> <li><a href="">222</a></li> </ul> </body> </html>
=position fixed ===================================================
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ width: 100%; height: 2000px; background-color: wheat; } .returnTop{ width: 120px; height: 40px; background-color: red; color: white; text-align: center; line-height: 40px; position: fixed; /*锁定窗口的位置*/ right: 20px; bottom: 20px ; } </style> </head> <body> <div class="c1"></div> <!--设置一个大于窗口的div，产生滚动条。--> <div class="returnTop">返回顶部</div> </body> </html>
=后台管理布局=================================================
知识点：
fixed 定位：
内容溢出后产生滚动条：
分析;
1 一个header，一个左边目录，一个右边的内容区域。
2（ 左边目录 ） 和 （右边内容区域） 需要 （fixed定位） 和 （内容溢出后生成滚动条）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; } .header{ width: 100%; height: 80px; background-color: #53868B; } .leftmenu{ background-color: yellow; position: fixed; top: 80px; left: 0px; bottom: 0px; width: 200px; overflow: auto; /* 内容溢出后显示滚动条。*/ } .content{ background-color: darkgrey; position: fixed; top: 80px; left: 200px; bottom: 0px; right: 0px; overflow: auto;/* 内容溢出后显示滚动条。*/ } </style> </head> <body> <div class="header"></div> <div class="c"> <div class="leftmenu"> </div> <div class="content"> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> <p>11111</p> </div> </div> </body> </html>
背景图片
