Some commonly used code that works well

First give a popup box code

html code

<div id="fade" class="black-overlay"></div>
    <div id="MyDiv" class="white-content f-cb">
    popup content
</div>

 css code

.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 code

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());
};
//Close the popup layer
function CloseDiv(show_div,bg_div) {
    document.getElementById(show_div).style.display='none';
    document.getElementById(bg_div).style.display='none';
};

 

There is also the effect code of the hover event becoming highlighted as follows

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;

 

Finally, remove the css of the default input box border color so that you can add your favorite selected color to it

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