一、超链接美化
二、模态框
三、tab栏选项卡
--------------------------------------------
一、超链接美化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>导航块超链接美化</title> <style type="text/css"> *{ margin: 0; padding: 0; } .nav{ width: 960px; overflow: hidden; background-color: purple; margin: 100px auto 0; border-radius: 5px; /*倒圆角*/ } .nav ul{ list-style: none; /*清除列表前面的圆点*/ } .nav ul li{ float: left; width: 160px; height: 40px; text-align: center; line-height: 40px; } /*颜色只能在a里设，不能被继承*/ .nav ul li a{ width: 160px; height: 40px; display: block; color: white; text-decoration: none; } .nav ul li a:hover{ background-color: red; font-size: 22px; } </style> </head> <body style="margin: 0 auto;"> <div class="nav"> <ul> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> <li> <a href="#">网站导航</a> </li> </ul> </div> </body> </html>
二、模态框
模态框用的是固定定位设置z-index值来实现，
要注意z-index的值，要始终保持模态框的对话框z-index是在最大。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通用模态框</title> <style type="text/css"> *{ padding: 0; margin: 0; } .container{ visibility: hidden; } .bg{ position: fixed; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); z-index: 1000; top: 0; right: 0; bottom: 0; left: 0; } .dialog-box{ position: fixed; width: 300px; height: 300px; background-color: white; top: 50%; left: 50%; transform: translate(-150px,-150px); z-index: 1001; border-radius: 5px; } .exit{ width: 30px; height: 30px; float: right; background-color: darkgreen; border-radius: 5px; text-align: center; line-height: 30px; cursor: pointer; } .exit:hover{ background-color: red; color: #ffffff; } </style> </head> <body> <button id="btn">点击出现模态框</button> <div id="container" class="container"> <div class="bg"></div> <div class="dialog-box"> <a id="exit" class="exit">x</a> </div> </div> </body> </html> <script type="text/javascript"> function $(id) { return document.getElementById(id); } window.onload=function () { $('btn').onclick=function () { $('container').style.visibility='visible'; }; $('exit').onclick=function () { $('container').style.visibility='hidden'; }; } </script>
三、tab栏选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .clearfix:after{ content:'.'; clear:both; display:block; visibility:hidden; height:0 } *{ padding: 0; margin: 0; } ul{ list-style: none; } ul li{ float: left; width: 100px; height: 30px; cursor: pointer; } .container{ width: 300px; } .container p{ width: 100%; height: 100px; display: none; } li.active{ background-color: red; color: white; } p.active{ background-color: indianred; color: white; display: block; } </style> </head> <body> <div class="container"> <ul id="ul" class="clearfix"> <li class="active">导航</li> <li>购买</li> <li>促销</li> </ul> <p class="active">导航导航导航导航导航导航导航导航导航</p> <p>买买买买买买买买买买买买</p> <p>促销促销促销促销促销促销</p> </div> </body> <script type="text/javascript"> function $(id) { return document.getElementById(id); } var li_objs=$('ul').children; var p_objs=document.getElementsByTagName('p'); for(var i=0;i<li_objs.length;i++){ //i是全局的，这里给每个标签存一个i li_objs[i].index = i; li_objs[i].onmouseover=function () { for(var j=0;j<li_objs.length;j++){ li_objs[j].className=''; p_objs[j].className=''; } this.className='active'; p_objs[this.index].className='active'; } } </script> </html>