一些常用的效果不错的代码

首先给一个弹出框代码

html代码

<div id="fade" class="black-overlay"></div>
    <div id="MyDiv" class="white-content f-cb">
    弹框内容
</div>

 css代码

.black-overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.4;opacity:.4;filter: alpha(opacity=80); }
.white-content { display: none; position: absolute; top:13%; left: 29%; width: 646px; height: 578px; border: 1px solid #5C5C5C; background-color: white; z-index:1002; overflow: auto; box-shadow: 0px 5px 15px 5px #737373;}

 js代码

function ShowDiv(show_div,bg_div){
    document.getElementById(show_div).style.display='block';
    document.getElementById(bg_div).style.display='block' ;
    var bgdiv = document.getElementById(bg_div);
    bgdiv.style.width = document.body.scrollWidth;
    $("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div) {
    document.getElementById(show_div).style.display='none';
    document.getElementById(bg_div).style.display='none';
};

 

还有就是hover事件变高亮的效果 代码如下

a{color: #6F9ACF;}
a:hover{color: #709BCF;-webkit-transition: all .4s;-moz-transition: all .4s;transition: all .4s;transition-property: all;transition-duration: 0.4s;transition-timing-function: initial;transition-delay: initial;}

主要就是这个   -webkit-transition: all .4s;-moz-transition: all .4s;transition: all .4s;transition-property: all;transition-duration: 0.4s;transition-timing-function: initial;transition-delay: initial;

 

最后是去掉默认input框边框颜色的css  这样就能给它加你喜欢的选中颜色了

input,button,select,textarea{outline:none;}
textarea{resize:none;}