Drop-down menu list
<style>
*{
margin:0px;
padding:0px;
}
. menu{
width:1100px;
height:30px;
Background-image:url (img/charm Roland Music 18.jpg);
margin-left:200px;
margin-top:50px;
}
. btn{
width:183.3px;
height:30px;
Float:left;
Text-align:center;
line-height:30px;
font-size:14px;
position:relative;
Overflow:hidden;
transition:0.5s;
}
. btn:hover{
Cursor:pointer;
Background-color:burlywood;
Color:white;
max-height:200px;
overflow:visible;
}
. BTN ul{
List-style:none;
background-color: #008000;
}
</style>
<body>
<div class= "menu" >
<div class= "BTN" > Roland Home </div>
<div class= "BTN" > Song column
<ul>
<li> Popular </li>
<li> Rock </li>
<li> Blues </li>
<li> Folk </li>
</ul>
</div>
<div class= "btn" > Music Man column
<ul>
<li> Mainland </li>
<li> Europe </li>
<li> Japan and Korea </li>
<li> RTHK </li>
</ul>
</div>
<div class= "BTN" > Musical instrument column
<ul>
<li> Piano </li>
<li> violin </li>
<li> Guitar </li>
<li> Rack Drums </li>
</ul>
</div>
<div class= "BTN" > Drama column
<ul>
<li> Peking Opera </li>
<li> Drama </li>
<li> Henan Opera </li>
<li> Huangmei Opera </li>
</ul>
</div>
<div class= "BTN" > Glamour Roland Experience Zone
<ul>
<li> New Music </li>
<li> Albums </li>
<li>MV</li>
</ul>
</div>
</div>
</body>
Login Registration Pop-up window effect
<meta charset= "UTF-8" >
<title></title>
<style>
* {
margin:0px;
padding:0px;
}
. login {
width:100px;
height:30px;
font-size:25px;
line-height:30px;
BORDER:1PX solid black;
Text-align:center;
Background-color:darkcyan;
Color:white;
}
. login:hover {
Cursor:pointer;
Background-color:greenyellow;
}
. Mask {
width:100%;
Background-color:black;
opacity:0.5;
Position:absolute;
top:0px;
left:0px;
z-index:90;
}
. log-div {
width:500px;
height:300px;
Background-color:white;
position:fixed;
z-index:99;
}
</style>
<body>
<div class= "Mask" hidden></div>
<div class= "Log-div" hidden= "hidden" ></div>
<div class= "Login" > Login </div>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p> <p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p> <p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p> <p>123</p><p>123</p>
<p>123</p><p>123</p><p>123</p><p>123</p><p>123</p> <p>123</p>
</body>
<script>
var mask = document.getelementsbyclassname ("mask") [0];
var login = document.getelementsbyclassname ("Log-div") [0];
var btn = document.getelementsbyclassname ("login") [0];
var clientwidth = document.body.clientWidth;
var clientheight = document.documentElement.clientHeight;
Login.style.left = CLIENTWIDTH/2-+ "px";
Login.style.top = CLIENTHEIGHT/2-+ "px";
Mask.style.height = document.body.clientHeight + "px";
Window.onresize = function () {
var clientwidth = document.body.clientWidth;
var clientheight = document.documentElement.clientHeight;
Login.style.left = CLIENTWIDTH/2-+ "px";
Login.style.top = CLIENTHEIGHT/2-+ "px";
}
Btn.onclick = function () {
Mask.removeattribute ("hidden");
Login.removeattribute ("hidden");
}
Mask.onclick = function () {
Mask.setattribute ("Hidden", "" ");
Login.setattribute ("Hidden", "hidden");
}
</script>
JS Web effects operation Flow--drop-down menu list and login registration pop-up window effect