zoukankan html css js c++ java

css案例学习之div ul li a 实现导航效果

效果

代码

<html>
<head>
<title>无需表格的菜单</title>
<style>

body{
    background-color:#dee0ff;
}
#navigation {
    150px;
    font-family:Arial;
    font-size:14px;
    text-align:right
}
#navigation ul {
    list-style-type:none;                /* 不显示项目符号 */
    margin:0px;
    padding:0px;
}
#navigation li {
    border-bottom:1px solid #9F9FED;    /* 添加下划线 */
}
#navigation li a{
    display:block;
    height:1em;
    padding:5px 5px 5px 0.5em;
    text-decoration:none;
    border-left:12px solid #151571;        /* 左边的粗边 */
    border-right:1px solid #151571;        /* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{
    background-color:#1136c1;
    color:#FFFFFF;
}
#navigation li a:hover{                    /* 鼠标经过时 */
    background-color:#002099;            /* 改变背景色 */
    color:#ffff00;                        /* 改变文字颜色 */
    border-left:12px solid yellow;
}

</style>
</head>
<body>
<div id="navigation">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">Web Dev</a></li>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Map</a></li>
</ul>
</div>
</body>
</html>

改造一下

li加一个float属性

<html>
<head>
<title>无需表格的菜单</title>
<style>

body{
    background-color:#dee0ff;
}
#navigation {
    /*150px;*/
    font-family:Arial;
    font-size:14px;
    text-align:right
}
#navigation ul {
    list-style-type:none;                /* 不显示项目符号 */
    margin:0px;
    padding:0px;
}
#navigation li {
    border-bottom:1px solid #9F9FED;    /* 添加下划线 */
    float:left;
}
#navigation li a{
     120px;
    display:block;
    height:1em;
    padding:5px 5px 5px 0.5em;
    text-decoration:none;
    border-left:12px solid #151571;        /* 左边的粗边 */
    border-right:1px solid #151571;        /* 右侧阴影 */
}
#navigation li a:link, #navigation li a:visited{
    background-color:#1136c1;
    color:#FFFFFF;
}
#navigation li a:hover{                    /* 鼠标经过时 */
    background-color:#002099;            /* 改变背景色 */
    color:#ffff00;                        /* 改变文字颜色 */
    border-left:12px solid yellow;
}

</style>
</head>
<body>
<div id="navigation">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Contact us</a></li>
    <li><a href="#">Web Dev</a></li>
    <li><a href="#">Web Design</a></li>
    <li><a href="#">Map</a></li>
</ul>
</div>
</body>
</html>

效果

查看全文

相关阅读:
hadoop2.7的目录结构
 ubuntu16.04上Eclipse和hadoop配置
 ubuntu16.04更改源为阿里源
 ubuntu16.04搭建hadoop集群环境
 ubuntu自动登录tty1(shell,text)配置
 Android六大基本布局
 java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for com.bjsxt.mapper.PeopleMapper
storm_分组策略
 storm_常用命令
 Storm集群搭建

原文地址：https://www.cnblogs.com/jiqing9006/p/5007280.html