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

更新时间：2022-03-25 04:00:37

效果

代码

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

body{
    background-color:#dee0ff;
}
#navigation {
    width: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 {
    /*width: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{
    width: 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>

效果

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

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5007280.html，如需转载请自行联系原作者

上一篇 : ：css案例学习之按钮超链接下一篇 : css案例学习之float浮动

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

相关阅读

推荐文章