下拉菜單列表 <style> *{ margin: 0px; padding: 0px; } .menu{ width: 1100px; height: 30px; background-image: url(img/魅力羅蘭Music炫圖18.jpg); margin-left: 200px; m ...
下拉菜單列表
<style>
*{
margin: 0px;
padding: 0px;
}
.menu{
width: 1100px;
height: 30px;
background-image: url(img/魅力羅蘭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">羅蘭首頁</div>
<div class="btn">歌曲專欄
<ul>
<li>流行</li>
<li>搖滾</li>
<li>藍調</li>
<li>民謠</li>
</ul>
</div>
<div class="btn">音樂人專欄
<ul>
<li>內地</li>
<li>歐美</li>
<li>日韓</li>
<li>港台</li>
</ul>
</div>
<div class="btn">樂器專欄
<ul>
<li>鋼琴</li>
<li>小提琴</li>
<li>吉他</li>
<li>架子鼓</li>
</ul>
</div>
<div class="btn">戲曲專欄
<ul>
<li>京劇</li>
<li>話劇</li>
<li>豫劇</li>
<li>黃梅戲</li>
</ul>
</div>
<div class="btn">魅力ROLAND體驗區
<ul>
<li>新曲</li>
<li>唱片</li>
<li>MV</li>
</ul>
</div>
</div>
</body>
登錄註冊彈窗效果
<html>
<head>
<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>
</head>
<body>
<div class="mask" hidden></div>
<div class="log-div" hidden="hidden"></div>
<div class="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>
</html>
<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 - 250 + "px";
login.style.top = clientHeight / 2 - 150 + "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 - 250 + "px";
login.style.top = clientHeight / 2 - 150 + "px";
}
btn.onclick = function(){
mask.removeAttribute("hidden");
login.removeAttribute("hidden");
}
mask.onclick = function(){
mask.setAttribute("hidden","");
login.setAttribute("hidden","hidden");
}
</script>
