优先级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .a1 { background-color: aqua; height: 58px; } .a2 { font-size: 30px; background-color: indianred; } </style> </head> <body> <div class="a1 a2">明天你好</div> <!--就近原则--> </body> </html>
输入框加图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <div style="float:left; height:52px; 600px; border: 1px solid red; position: relative" > <div style="float:left; line-height: 35px" > <label>用户名：</label> </div> <input type="text" style="height: 27px; 128px; padding-right: 40px; margin-top: 4px;"/> <span style="background-image: url(i_name.jpg); position: absolute; background-repeat: no-repeat; 379px; right: 10px; height: 23px; display: inline-block; margin-top: 8px; o"><!--可以设置高度宽度--> </span> </div> </div> <!--<div style="height:52px; 600px; border: 1px solid red; position: relative">--> <!--<!–<input type="text" style="height: 48px; 20px" />–>--> <!----> <!--<input type="text" style="height: 27px;--> <!-- 128px;--> <!--padding-right: 40px;--> <!--margin-top: 4px;"/>--> <!--<span style="background-image: url(i_name.jpg);--> <!--position: absolute;--> <!--background-repeat: no-repeat;--> <!-- 453px;--> <!--right: 10px;--> <!--height: 23px;--> <!--display: inline-block;--> <!--margin-top: 8px;"><!–可以设置高度宽度–>--> <!--</span>--> <!--</div>--> <!--输入框输入内容 会覆盖图片--> </body> </html>
返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--返回顶部--> <div onclick="back()" style=" 50px; height: 50px ;right: 0; bottom: 0; position: fixed;background-color:black;color: #ffffff">返回顶部</div> <div style="height: 5000px;background-color: #dddddd;">abcd</div> <script> function back() { document.body.scrollTop=0 ; } </script> </body> </html>
选中变色用（hower）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .pg_head { position: fixed; top: 0; left: 0; right: 0; height: 48px; background-color: mediumvioletred; line-height: 48px } .pg_body { margin-top: 50px; } .w { width: 980px; } .pg_head .menu { padding: 1px 1px 1px 1px; color: white; display: inline-block; } /*鼠标移到属性上变颜色*/ .pg_head .menu:hover { background-color: blue; } </style> <body> <!--上 右下左 顺时针--> <div class="pg_head"> <div class="w"> <a class="menu">全部</a> <a class="menu">地段</a> <a class="menu">并不</a> <a class="menu">懂得</a> <a class="menu">低调</a> </div> </div> <div class="pg_body">aa</div> </body> </html>
图片重复放
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--backgroud-image--> <div style=" height:48px"> </div> <div style="background-image: url(icon_18_118.png);height: 48px; border: 1px solid red"></div> <!--图片重复放--> <div style="margin-top: 50px; background-image: url(icon_18_118.png);height: 48px; border: 1px solid red; background-repeat: no-repeat;"></div> <!--图片不重复放--> <div style="margin-top: 50px; background-image: url(icon_18_118.png);height: 48px; border: 1px solid red; background-position-y:-106px;background-repeat: no-repeat;"></div> <!--图片不重复放--> </body> </html>
定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //定时器 setInterval('alert(123)',5000) //每5分钟弹一个框 </script> </body> </html>