水平导航栏

Posted on 2020-04-10 16:30  陈小ya  阅读(145)  评论(0)    收藏  举报

<!DOCTYPE html>
<html>
<head>
<!-- ========== -->
<!-- = 陈小ya = -->
<!-- ========== -->
<meta charset="UTF-8">
<title>选择器</title>
<link rel="stylesheet" type="text/css" href="js/xuanz.css"/>
<style type="text/css">
#p_idname{
color: green;
font-style: italic;
font-size: 20px;
font-weight: bolder;
}
.p_cname{
color: red;
font-style: inherit;
font-size: 20px;
}
h3{
color: blue;
font-style: initial;font-size: 20px;
}
div p{
color: yellow;
font-style: normal;font-size: 20px;
}
#zxuanz>p{
color: pink;
font-style: oblique;font-size: 20px;
}

</style>
</head>

<body>
<p id="p_idname">id选择器</p>
<p class="p_cname">class选择器</p>
<h3>元素选择器</h3>
<div id="sx">
<p>yellow text 属性选择器</p>
</div>
<div id="zxuanz">
<p>red text</p>
<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
</table>
</div>
</body>

<div id="wy_idv">
<ul>
<li><a href="">网易buff</a></li>
<li><a href="">网易音乐</a></li>
<li><a href="">网易有道词典</a></li>
<li><a href="">网易迅游</a></li>
</ul>
</div>
<div id="jian_la">

<ul>
<li class="a1"><a href="">简单的下拉框</a></li>
<ul class="xiala_ul">
<li><a href="">简单下拉框111111</a></li>
<li><a href="">简单下拉框111111</a></li>
<li><a href="">简单下拉框111111</a></li>
<li><a href="">简单下拉框111111</a></li>
</ul>
<li class="a1"><a href="">简单的下拉框123</a></li>
<li class="a1"><a href="">简单的下拉框456</a></li>
</ul>
</div>
<div id="xia_la">
<ul class="ul_xia">

<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>
<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>
</div>
</html>

/*


/* ========== */
/* = 陈小ya = */
/* ========== */

#tou_div ul{
background-color: #333;
list-style-type: none;/*列表符号类型 取消*/
margin: 5px;
padding: 5px;
overflow: hidden;/*处理溢出 不可见*/
}
#tou_div ul li{
float: left;/*向左浮动*/
}
#tou_div ul li a{
display: block;/*显示为黑色*/
color: white;/*颜色 白*/
text-align: center;/*文本居中*/
padding: 15px;/*内边距*/
text-decoration: none;/*取消a标签下划线 删除线等修饰*/
}
#tou_div ul li a:hover{
background-color: #111;
}


#wy_idv ul {
list-style-type: none;/*list-style-type 清除列表样式的序号*/
background-color: #111111;
margin: 10px;
padding: 10px;
overflow: hidden;/*重点 一定要处理 溢出 不处理 溢出的 话 样式都会层叠*/
}
#wy_idv ul li {
float: left;/*向左浮动 加上溢出处理才不会跑出来*/
}
#wy_idv ul li a{
display: block;/*显示文本 以块状的样式显示文本的状态*/
color: white;
text-align: center;/*text-align 文本居中显示*/
text-decoration: none;/*text-decoration 清除文本的下划线 删除线等样式*/
margin: 5px;
padding: 15px;
}
#wy_idv ul li a:hover{
background-color: #333;
color: red;
}


#xia_la ul{
list-style-type: none;/*清除下列表样式的序号等 */
background-color: #111;
margin: 5px;
padding: 5px;
overflow: hidden;/*处理溢出 隐藏*/
}
#xia_la ul li{
float: left;/*向左浮动*/
}
#xia_la ul li a{
display: block;/*显示为本类型的格式为 块状显示*/
text-align: center;/*设置文本居中显示*/
text-decoration: none;
margin: 5px;
padding: 15px;
color: white;
}
#xia_la ul li a:hover{
background-color: #333333;
}

/*“简单的下拉框” ---导航栏*/
#jian_la ul{
list-style-type: none;/*清除列表序号*/
background-color: #111111;
margin: 10px;
padding: 10px;
overflow: hidden;/*溢出处理 隐藏*/
}
#jian_la ul li{
float: left;
}
#jian_la ul li a{
display: block;/*显示 为块状显示*/
text-align: center;/*字体居中显示*/
text-decoration: none;/*删除文本的 下划线 删除线*/
margin: 5px;
padding: 10px;
color: white;
}
#jian_la ul li a:hover{
background-color: #555555;
}

.xiala_ul ul{
list-style-type: none;
}

*/