CSS基础及样式控制-DEMO_2
<!doctype html>
<html>
<meta charset="utf-8">
<title>CSS基础及样式控制-DEMO_2</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#nav_box{/*最外面盒子*/
background: #000;/*背景色*/
width:100%;/*宽度*/
height:60px;/*高度*/
}
#nav_box ul{
width:950px;/*宽度*/
margin:0px auto;/*居中*/
}
#nav_box ul .act{
width:70px;/*宽度*/
margin-left:0px;/*左边距*/
background:#363C41;/*默认当前*/
}
#nav_box>ul>li{
list-style:none;/*清空默认圆点*/
float:left;/*向左浮动*/
width:90px;/*宽度*/
height:60px;/*高度*/
margin-left:20px;/*左边距*/
line-height:60px;/*行高*/
text-align:center;/*居中*/
font-size: 14px;/*字体大小*/
}
.nav>li>a{
display:block;/*转化为块级元素*/
}
.nav>li>a:link{ /*未访问的标签*/
color:#C3C5C6;/*字体颜色*/
text-decoration:none;/*去掉下划线*/
}
.nav>li>a:visited {/* 已访问的链接 */
color:#C3C5C6;/*字体颜色*/
text-decoration:none;/*去掉下划线*/
}
.nav>li>a:hover {/* 鼠标移动到链接上*/
color:#fff;/*字体颜色*/
box-shadow: 0px -5px #5fb878 inset;/*下边阴影*/
}
.bccd_content{
display:none;/*隐藏元素*/
}
.bccd_content li{
list-style:none;/*清空默认圆点*/
width:100px;/*宽度*/
height:25px;/*高度*/
line-height:20px;/*行高*/
float:left;/*向左浮动*/
}
.show_bccd_content:hover .bccd_content{
display:block;/*显示隐藏的二级菜单*/
}
.bccd_content>div>li>a{
display:block;/*转化为块级元素*/
}
.bccd_content>div{
width:202px;/*宽度*/
height:102px;/*高度*/
font-size:10px;/*字体大小*/
margin-top:2px;/*距离顶部*/
border:1px solid #ccc;/*实线边框*/
}
.bccd_content>div>li>a:link{ /*未访问的标签*/
color:#000;/*字体颜色*/
text-decoration:none;/*去掉下划线*/
}
.bccd_content>div>li>a:visited {/* 已访问的链接 */
color:#000;/*字体颜色*/
text-decoration:none;/*去掉下划线*/
}
.bccd_content>div>li>a:hover {/* 鼠标移动到链接上*/
color:#000;/*字体颜色*/
background:#f2f2f2;/*背景色*/
}
.clear{
clear:both;/*清除浮动*/
}
</style>
<body>
<div id='nav_box'>
<ul class='nav'>
<li class='act'><a href="#1">首页</a></li>
<li><a href="#1">视频教程</a></li>
<li><a href="#1">社区问答</a></li>
<li class='show_bccd_content'><a href="#1">编程词典</a>
<!-- 二级菜单开始 -->
<ul class='bccd_content'>
<div>
<li><a href="#2">php词典</a></li>
<li><a href="#2">技术文章</a></li>
<li><a href="#2">jquery词典</a></li>
<li><a href="#2">PHP教程</a></li>
<li><a href="#2">html词典</a></li>
<li><a href="#2">小程序开发</a></li>
<li><a href="#2">javascript词典</a></li>
<li><a href="#2">HTML教程</a></li>
</div>
</ul>
<!-- 二级菜单结束 -->
</li>
<li><a href="#1">手册下载</a></li>
<li><a href="#1">工具下载</a></li>
<li><a href="#1">类库下载</a></li>
<li><a href="#1">特色课程</a></li>
<li><a href="#1">菜鸟学堂</a></li>
</ul>
</div>
<div class='clear'></div>
</body>
</html>
