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>

效果

查看全文

相关阅读:
iOS UILable 自定义高度用masony适配
 iOS上架所需图片大小明细
 GCD倒计时
 iOS 小知识汇总
 七、Swift 枚举 Enumerations
C语言深度剖析笔记
 六、闭包 Closures
经济学常识
 Mac小技巧
 五、函数 Functions

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