Skip to content

Instantly share code, notes, and snippets.

@z007

z007/(daohang)导航栏.txt

Last active August 29, 2015 14:06
Show Gist options
  • Save z007/dc85972f151273643a49 to your computer and use it in GitHub Desktop.
Save z007/dc85972f151273643a49 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
(daohang)导航栏.txt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>讯飞技术论坛</title>
<style>
/*定义内外边框的距离*/
*{
margin:0px;
padding:0px;
}
/*定义无序列表*/
ul,li{
list-style-type:none;
}
/*定义两条长边框的属性*/
._menu{
background-color:#4D7EB1;
height:24px;
}
/*定义子列表的浮动*/
._menu>li{
float:left;/*表示向左浮动*/
position:relative;/*是相对定位，是相对于前面的长框定位*/
}
/*定义的样式为链接初始样式*/
._menu a{
display:block;/*显示为块级元素*/
height:24px;
line-height:24px;/*设置行间距离*/
padding-left:10px;
padding-right:10px;
text-decoration:none;/*无文本修饰*/
background-color:#4D7EB1;/*定义浮动框与子菜单的背景色*/
color:#FBFBFB;/*定义全部字体的颜色*/
}
/*id为 menu 的区域内的 <a>(链接) 当鼠标浮在链接上时，会出现以下属性*/
._menu a:hover{
display:block;
padding-left:10px;
padding-right:10px;
text-decoration:underline;/*定义有下划线，就是鼠标点到菜单元素会出现下划线*/
background-color:#80CAD7;/*定义子菜单的背景颜色*/
color:black;/*定义鼠标点到子菜单的元素时，字体的颜色*/
}
/*类名为menu的标签，找到后再寻找它包含的ul子标签；属于层级关系*/
._menu>li ul{
display:none;/*不显示*/
}
._menu>li:hover ul{
display:block;/*显示块级元素*/
}
/*在鼠标移到li上的时候它下面的ul会显示*/
._menu>li ul a{
border-top:1px dashed red;/*鼠标点击过后 的子菜单上边框属性*/
}
/*保证不让浮出来框不超出外框*/
.clearbox{
margin:0px;
padding:0px;
width:0px;
height:0px;
clear:both;/*清除浮动对象的边*/
}
</style>
</head><!--定义各个块元素的内容-->
<body>
<ul class="_menu">
<!--<li>
<a href="#">首 页</a>
</li>
<li>
<a href="#">我的帖子</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li>
<a href="#">精华帖子</a>
<ul>
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>-->
<li><a href="">新闻</a>
</li>
<li><a href="">hao123</a>
</li>
<li><a href="">地图</a>
</li>
<li><a href="">视屏</a>
</li>
<li><a href="">贴吧</a>
</li>
<li><a href="">登陆</a>
</li>
<li>
<a href="">设置</a>
<ul>
<li><a href="">搜索设置</a>
</li>
<li><a href="">意见反馈</a>
</li>
<li><a href="">高级搜索</a>
</li>
<li><a href="">关闭预测</a>
</li>
</ul>
</li>
<li>
<a href="" >更多产品</a>
<ul>
<li><a href=""></a>
</li>
<li><a href=""></a>
</li>
<li><a href=""></a>
</li>
<li><a href=""></a>
</li>
<li><a href=""></a>
</li>
<li><a href=""></a>
</li>
<li><a href=""></a>
</li>
<li><a href=""></a>
</li>
</ul>
</li>
<div class="clearbox"></div>
</ul>
<br />
<ul class="_menu" style="position:fixed; top:54px; background-color:#CCFF66; z-index:-1;" >
<li>
<a href="#">lol首页</a>
</li>
<li>
<a href="#">个人战绩</a>
<ul>
<li><a href="#">打野个数</a></li>
<li><a href="#">胜利场次</a></li>
</ul>
</li>
<li>
<a href="#">个人战绩2</a>
<ul>
<li><a href="#">打野个数</a></li>
<li><a href="#">胜利场次</a></li>
</ul>
</li>
</ul>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment