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

效果

代码

<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 实现导航效果相关推荐

css案例学习之div与span的区别
代码: <html> <head> <title>div 标记范例</title> <style type="text/css" ...
html宽度自适应怎么调整li超出隐藏,HTML篇之CSS样式——div ul li 嵌套后解决高度自适应方法...
方法一: div 自适应宽度很简单 ,你应该设置div的display:inline-block 然后不要设置宽度就行了方法二: div ul li 嵌套后解决高度自适应办法: html代码如下 ...
css案例学习之继承关系
代码 <html> <head><title>继承关系</title><style> body{color:blue; /* 颜色 */te ...
html中的div怎么隐藏显示出来,js实现元素div/ul li的显示与隐藏
在网页设计过程中,某些时候需要隐藏一些元素(div/ul li),某些时候又需要显示一些隐藏的元素.例如一打开网页显示一段网站公告,过一小段时间后把公告隐藏起来.对于这类元素显示隐藏的操作,应该如何实 ...
html并集选择器怎么写,css案例学习之并集选择器
代码并集选择器 h1, h2, h3, h4, h5, p{ /*并集选择器*/ color:purple; /* 文字颜色 */ font-size:15px; /* 字体大小 */ } h2.s ...
用div,ul,li,span代替table设计表格
传统的表格一般都是用table标签设计的,现在网页设计很少用table了,主要用div,ul,li,span等标签,这是一种网页设计的思想了,和table不一样.用这种方式设计的html代码结构清晰, ...
案例学习——Interior Mapping 室内映射（假室内效果）
最近油管推荐了Interior Mapping的教程,发现很有意思,但各种资料似乎比较零散于是到处搜集了一些,有了这篇文章汇总,一起学习案例学习--Interior Mapping 室内映射(假室 ...
html怎么实现单个li效果,基于DIV+ul+li实现的表格(多示例)
普通的显示数据的时候,ul就是项目列表,li就是列表项.可以用来显示数据.如果用于DIV+CSS布局的话,ul+li可以替换表格的作用,具体的设置,如果宽度高度.行间距.背景边框等需要配合CSS一起设 ...
css技巧之如何实现ul li边框重合
提到边框重合,我们不妨打开淘宝首页浏览主体分类内容板块瞧瞧---亲,你看到了,正是这个,边框重合.其实我们不难发现,这个效果并不难,只是我们没有真正的动手做过而已,所以不知道怎么做,那么下面就是一个很 ...

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

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

最新文章

热门文章