hover
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0 auto; height: 5000px; } .pg-head{ background-color: #2459a2; height:48px; position: fixed; top:0; left:0; right:0; color:white; line-height: 48px; } .w{ width:960px; margin: 0 auto; } .pg-body{ margin-top: 50px; } .pg-head .menu{ display: inline-block; padding: 0 20px; } /*鼠标经过生效*/ .pg-head .menu:hover{ background-color: #0d3ea2; } </style> </head> <body> <div class="pg-head"> <div class="w"> <a class="logo" >logo</a> <a class="menu" >主页</a> <a class="menu" >段子</a> <a class="menu" >图片</a> <a class="menu" >1024</a> </div> </div> <div class="pg-body"> <div class="w">这里是主体内容</div></div> </body> </html>
效果
login
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .login{ width: 300px; height:35px; position: relative; display: inline-block; } .icon{ height: 35px; width: 35px; background-image: url("img/pwd-icons-new.png"); background-repeat: no-repeat; background-position-x: 0; background-position-y: -48px; position: absolute; top:3px; right:-15px; } input{ width: 275px; height:35px; font-size:20px; padding-right:40px; /*右边内边距增加*/ } label{ height:35px; } </style> </head> <body> <label for="username">登陆:</label> <div class="login"> <input id="username" type="text"> <span class="icon"></span> </div> </body> </html>
margin-padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-margin{ border:1px solid red; width:200px; height:200px } .pg-margin-box{ border:1px solid green; width:180px; height:180px; background-color: green; margin:10px; } .pg-padding{ border:1px solid red; width:180px; height:180px; padding: 10px } .pg-padding-box{ border:1px solid green; width:180px; height:180px; background-color: green } </style> </head> <body> <div class="pg-margin"> <div class="pg-margin-box"> 外边距margin </div> </div> <div class="pg-padding"> <div class="pg-padding-box"> 内边距padding </div> </div> </body> </html>
显示效果
overflow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--超出范围隐藏--> <div style="width:200px; height: 200px;overflow: hidden"> <img src="img/sun.jpg" alt=""> </div> <!--超出范围出现滚动条--> <div style="width:200px; height: 200px;overflow: auto"> <img src="img/sun.jpg" alt=""> </div> </body> </html>
图片:
显示效果:
property
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ border: 1px solid red; /* 边框 */ width: 200px; /* 宽 */ height: 200px; /* 高 */ text-align: center; /* 水平居中 */ line-height: 200px; /* 垂直居中 */ color: green; /* 字体颜色 */ font-size: 20px; /* 字体大小 */ font-weight: bold; /* 字体加粗 */ } </style> </head> <body> <div>简单的div测试</div> </body> </html>
显示效果
selector
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器*/ p{ background-color:green; } /*id选择器*/ #i1{ background-color:yellow; } /*类选择器*/ .c1{ background-color:blue; } /*层级选择器*/ div p{ background-color:red; } /*组合选择器*/ #i2, .c2{ background-color:orange; } /*属性选择器*/ p[color="pink"]{ background-color:pink; } </style> </head> <body> <p>标签选择器 green</p> <p id="i1">id选择器 yellow</p> <p class="c1">类选择器 blue</p> <div><p>层级选择器 red</p></div> <p class="c2">组合选择器 orange</p> <p id="i2">组合选择器 orange</p> <p color="pink">属性选择器 pink</p> </body> </html>
显示效果
z-index
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0 auto; } .pg-body{ height: 5000px; background-color: #dddddd; color:green; } .pg-background{ z-index:9; background-color: orange; position: fixed; top:0;bottom:0; left:0; right:0; opacity:0.5; /*display:none*/ } .pg-box{ z-index:10; background-color: white; width:500px; height:400px; position:fixed; top:50%; left:50%; margin-top:-200px; margin-left: -250px; /*display:none;*/ } </style> </head> <body> <div class="pg-box"></div> <div class="pg-background"></div> <div class="pg-body"> <button onclick="showBox()">注册</button> </div> </body> </html>
显示效果
布局实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .pg-body-left-li{ height:60px; line-height: 60px; background-color: coral; text-align: center; font-weight: bold; border:1px solid lawngreen; } .pg-body-right-div{ width:150px; height:220px; background-color: #dddddd; padding: 10px; float:left; margin-right: 10px; margin-bottom: 10px; } </style> <body style="margin: 0 auto;"> <!--页面头部部分--> <div style="background-color: #dddddd; height:36px"> <div style="width: 960px;margin: 0 auto"> <div style="float: left;line-height: 36px">收藏本站</div> <div style="float: right;line-height: 36px">登陆</div> <div style="float: right;line-height: 36px"> | </div> <div style="float: right;line-height: 36px">注册</div> </div> </div> <!--购物车--> <div style="width:960px;margin: 0 auto;height:36px"> <div style="width:100px;height: 36px;background-color: #dddddd;line-height: 36px;text-align:center;float:right">购物车</div> </div> <!--导航栏--> <div style="background-color: red;height: 40px"> <div style="width: 960px; margin: 0 auto"> <div style="float:left;color:white;line-height: 40px;margin: 0 50px">全部分类</div> <div style="float:left;color:white;line-height: 40px;margin-right: 10px">首页</div> <div style="float:left;color:white;line-height: 40px;margin-right: 10px">|</div> <div style="float:left;color:white;line-height: 40px;margin-right: 10px">天猫超市</div> <div style="float:right;color:white;line-height: 40px;">研究院</div> <div style="float:right;color:white;line-height: 40px;margin-right: 10px">|</div> <div style="float:right;color:white;line-height: 40px;margin-right: 10px">论坛</div> </div> <!--清除浮动--> <div style="clear: both;height:10px"></div> <!--主体部分--> <div style="width: 960px;margin: 0 auto"> <!--左边栏--> <div style="height:520px;width:200px;float:left;background-color: green"> <div class="pg-body-left-li">南方水果</div> <div class="pg-body-left-li">南方水果</div> <div class="pg-body-left-li">南方水果</div> <div class="pg-body-left-li">南方水果</div> <div class="pg-body-left-li">南方水果</div> <div class="pg-body-left-li">南方水果</div> </div> <!--右边栏--> <div style="height:500px; width:720px; float:right; background-color: orange;padding:10px "> <div class="pg-body-right-div"> <div style="height:180px;background-color:#64b5dd;"></div> <div style="height: 5px"></div> <div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div> </div> <div class="pg-body-right-div"> <div style="height:180px;background-color:#64b5dd;"></div> <div style="height: 5px"></div> <div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div> </div> <div class="pg-body-right-div"> <div style="height:180px;background-color:#64b5dd;"></div> <div style="height: 5px"></div> <div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div> </div> <div class="pg-body-right-div"> <div style="height:180px;background-color:#64b5dd;"></div> <div style="height: 5px"></div> <div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div> </div> <div class="pg-body-right-div"> <div style="height:180px;background-color:#64b5dd;"></div> <div style="height: 5px"></div> <div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div> </div> <div class="pg-body-right-div"> <div style="height:180px;background-color:#64b5dd;"></div> <div style="height: 5px"></div> <div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div> </div> <div class="pg-body-right-div"> <div style="height:180px;background-color:#64b5dd;"></div> <div style="height: 5px"></div> <div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div> </div> <div class="pg-body-right-div"> <div style="height:180px;background-color:#64b5dd;"></div> <div style="height: 5px"></div> <div style="height: 40px;line-height: 40px; text-align:center;background-color: coral">商品信息</div> </div> </div> </div> </div> </body> </html>
显示效果