效果

代码

<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 .5em;

    text-decoration:none;

    border-left:12px solid #;        /* 左边的粗边 */

    border-right:1px solid #;        /* 右侧阴影 */

}

#navigation li a:link, #navigation li a:visited{

    background-color:#1136c1;

    color:#FFFFFF;

}

#navigation li a:hover{                    /* 鼠标经过时 */

    background-color:#;            /* 改变背景色 */

    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 .5em;

    text-decoration:none;

    border-left:12px solid #;        /* 左边的粗边 */

    border-right:1px solid #;        /* 右侧阴影 */

}

#navigation li a:link, #navigation li a:visited{

    background-color:#1136c1;

    color:#FFFFFF;

}

#navigation li a:hover{                    /* 鼠标经过时 */

    background-color:#;            /* 改变背景色 */

    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 实现导航效果的更多相关文章

  1. css案例学习之div与span的区别

    代码: <html> <head> <title>div 标记范例</title> <style type="text/css" ...

  2. css案例学习之div a实现立体菜单

    效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  3. css案例学习之div+a实现菜单

    效果 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  4. CSS 案例学习

    1.样式 display:inline-block;可改变a标签,合其可定义宽高 2.a:hover表示鼠标经过 3.background:url(110.png) bottom 表示:给链接一个图片 ...

  5. 基于DIV+ul+li实现的表格(多示例)

    一个无序列表biaoge,前四个列表项我们赋予了类biaotou.因为这四个项是表格头部,应该与表格数据有所区别.所以单独赋予了类,可以方便控制.下面我们开始CSS代码的编写:由 www.169it. ...

  6. css案例学习之继承关系

    代码 <html> <head> <title>继承关系</title> <style> body{ color:blue; /* 颜色 * ...

  7. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  8. css案例学习之table tr th td ul li实现日历

    效果 代码 <html> <head> <title>Calendar</title> <style> <!-- .month { b ...

  9. css案例学习之盒子模型

    定义:每个盒子都有:边界.边框.填充.内容四个属性: 每个属性都包括四个部分:上.右.下.左:这四部分可同时设置,也可分别设置:里的抗震辅料厚度,而边框有大小和颜色之分,我们又可以理解为生活中所见盒子 ...

随机推荐

  1. POJ 2010 Moo University - Financial Aid 优先队列

    题意:给你c头牛,并给出每头牛的分数和花费,要求你找出其中n(n为奇数)头牛,并使这n头牛的分数的中位数尽可能大,同时这n头牛的总花费不能超过f,否则输出-1. 思路:首先对n头牛按分数进行排序,然后 ...

  2. android studio github 项目导入问题

    在github上面看到一个比较好的项目,导入出现了一些问题,记录如下: 项目演示效果如图:下载地址:https://github.com/asijack/PagerSlidingTabStrip 如果 ...

  3. CSS选择符 新的认识

    以前写选择符,很少使用">"符号,一般都是使用" "空格来代替.我觉得他们都是一样的功能,另一方面是为了方便.毕竟不用按住shift. 例如: .demo ...

  4. oracle安装、配置、卸载、错误解决

    oracle安装卸载的帖子很多,这里整理出一份,都只是给出一个链接,忘了时可以自己看看.哈哈,其实我也觉得已经不会忘了,被这个鸡毛问题困了两天,修改控制文件.环境变量.注册表什么的都不能解决问题,最后 ...

  5. eclipse中多个工程编译到同一个目录下

    1.点击link source  2.选择Java(ps:Java文件目录)或者resource(ps:配置文件目录)  3.最后结果,然后使用project中的clean进行编译,就可以把两个工程编 ...

  6. WP8.1 页面导航 缓存问题

    最近开始学习wp8.1开发,在页面的导航学习时发现了一点问题,即当使用Frame.Navigate()方法进行页面的跳转时,每次都会重新实例化一个页面.而在新的页面采用Frame.GoBack()或者 ...

  7. Office 2010

    1.Office Professional Plus 2010: 6QFDX-PYH2G-PPYFD-C7RJM-BBKQ8 BDD3G-XM7FB-BD2HM-YK63V-VQFDK 2.Offic ...

  8. struts2中的action访问web对象

    Struts2的Action就是一个普通的POJO对象,它和Web对象request.response.session和application没有耦合在一起,这样便于单独测试Action,那么我们在A ...

  9. java集合之Map_keySet_entrySet

    keySet()的使用:该方法返回的是一个key对象的Set<E>集合,通过该set集合的对象调用iterator方法返回一个迭代器,通过该迭代器可访问到set集合里面的key 再调用Ha ...

  10. QTestlib Manual翻译

    Trolltech公司提供的QTestlib框架,是一种针对基于QT编写的程序或库的单元测试工具.QTestLib提供了单元测试框架的基本功能,并提供了针对GUI测试的扩展功能. 目录: QtestL ...