效果

代码

<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. [置顶] 【cocos2d-x入门实战】微信飞机大战之六：子弹层的处理

    这一篇将会处理完子弹层的其他要点. 1.子弹的初始位置 子弹的初始位置在飞机的机头位置,因为飞机在游戏的过程中会随着玩家的触摸而改变其位置,所以,子弹的初始位置只能以当前飞机位置为基准进行添加. CC ...

  2. HDU4532(组合DP)

    题目:安排座位 解析:http://www.douban.com/note/269136472/ #include <iostream> #include <string.h> ...

  3. bzoj3431 [Usaco2014 Jan]Bessie Slows Down

    Description [Brian Dean, 2014] Bessie the cow is competing in a cross-country skiing event at the wi ...

  4. ASP.NET应用程序和ASP.NET网站所共有的文件： App_Browsers 等

    App_Browsers  包含 ASP.NET 用于标识个别浏览器并确定其功能的浏览器定义 (.browser) 文件.有关更多信息,请参见浏览器定义文件架构(browsers 元素)和如何:在 A ...

  5. Linux文件系统挂载管理

    http://itercast.com/lecture/19 文件系统创建好之后需要挂载到系统中方可使用,windows.Mac系统会自动挂载文件系统,而Linux下一般需要手工挂载或配置系统进行自动 ...

  6. Linux shell编程02 shell程序的执行 及文件权限

    第一个shell脚本 1.       shell编程的方式 交互式shell编程 非交互式shell编程:执行的语句存放到一个文件 shell脚本:可以任意文件名,建议扩展名为sh 2.       ...

  7. 新建一个MVCProject 项目

    App_Data文件夹用于存放数据库文件的 App_Start文件夹用于存放Web应用程序启动时需要进行重要配置的类文件 Content 文件夹用于存放主题样式文件 Controllers 文件夹用于 ...

  8. web前端 - 模态对话框

    代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  9. linux服务器时间同步

    date命令: date :查看当前时间,结果如下:Tue Mar 4 01:36:45 CST 2014 date -s 09:38:40 :设置当前时间,结果如下:Tue Mar 4 09:38: ...

  10. linux下使用非root账号安装zabbix-client

    linux下使用非root账号安装zabbix-client使用非root账号rusky登录:[rusky@testServer]#tar zxvf zabbix-2.4.5.tar.gz #cd z ...