去年纯用DIV盒模型和伪类做的tap选项菜单系列,
当然编码规范上不够完整,比较冗余,用以收藏借鉴。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV盒模型练习</title>
<style type="text/css">
body{
width:100%;
height:650px;
background-color: #2E5C6E;
}
h1{
font-size: 45px;
font-style:italic;
color:#CB1B45;
letter-spacing: 3px;
text-align: center;
}
.b2{
width:1000px;
height:90px;
border:1px dotted #ccc;
border-radius:30px;
background-color: #3A8FB7;
position:relative;
left:180px;
top:5px;
}
.menu {
width:1000px;
margin:50px 0;
position:absolute;
top:-25px;
left:65px;
z-index: 1000;
}
.menu ul{
padding:0;
margin:0;
list-style-type:none;
}
.menu ul li{
float:left;
position:relative; /* 向左浮动起来,后面有序排列 */
}
.menu ul li a,.menu ul li a:visited{
display: block;
border-radius:10px;
width:140px;
height:30px;
border:4px solid #fff;
border-width:0 1px 0 0;
background-color: #FBE251;
padding-top:15px;
font-weight: bold;
color:#CB1B45;
text-align:center;/* 把链接变成块元素处理 */
text-decoration: none;
}
.menu ul li ul{
display: none; /* 把子菜单通过display隐藏起来,在鼠标经过时再出现 */
}
.menu ul li:hover a{
width:140px;
border:1px solid #fff;
background-color: #86c166;
border-width:1px 0 1px 0; /* 鼠标经过 显示背景颜色变色 */
}
.menu ul li:hover ul{
display:block;
width:140px;
border:1px solid #fff;
background-color: #86c166;
border-width:0 0 1px 0; /* 让隐藏的子菜单出现,并设置成块元素 */
}
.menu ul li:hover ul li a{
display:block;
width:140px;
border:1px solid #fff;
background-color: #86c166; /* 让子菜单一中的li标签改变样式,有动画感觉 */
border-width:1px 0 1px 0;
}
.menu ul li:hover ul li a:hover{
width:140px;
border:1px solid #fff;
background-color: #BDC0BA;
border-width:1px 0 1px 0;
}
</style>
</head>
<body>
<div class="b1"><h1>About me</h1></div>
<div class="b2">
<div class="menu">
<ul>
<li><a href="">故事背景</a>
<ul>
<li><a href="./aa.html">出生梅州</a></li>
<li><a href="./aa.html">深圳长大</a></li>
</ul>
</li>
<li><a href="">求学经历</a>
<ul>
<li><a href="./aa.html">珠光小学</a></li>
<li><a href="./aa.html">龙珠中学</a></li>
<li><a href="./aa.html">深圳中学</a></li>
<li><a href="./aa.html">深圳大学</a></li>
</ul>
</li>
<li><a href="">工作经验</a>
<ul>
<li><a href="./aa.html">中兴实习</a></li>
<li><a href="./aa.html">软件开发</a></li>
<li><a href="./aa.html">总裁助理</a></li>
<li><a href="./aa.html">PHP课程学习</a></li>
</ul>
</li>
<li><a href="">兴趣爱好</a>
<ul>
<li><a href="./aa.html">篮球</a></li>
<li><a href="./aa.html">户外</a></li>
<li><a href="./aa.html">健身</a></li>
<li><a href="./aa.html">旅行</a></li>
</ul>
</li>
<li><a href="">情感历史</a>
<ul>
<li><a href="./aa.html">懵懵懂懂</a></li>
<li><a href="./aa.html">伤心往事</a></li>
</ul>
</li>
<li><a href="">未来展望</a>
<ul>
<li><a href="./aa.html">脚踏实地</a></li>
<li><a href="./aa.html">但求无悔</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div id="b4" >
<div class="b5"></div>
<div class="b6"></div>
<div class="b7"></div>
<div class="b8"></div>
<div class="b9"></div>
<div class="b10"></div>
<div class="b11"></div>
<div class="b12"></div>
</div>
<div class="b13"></div>
</body>
</html>