效果

代码

  1. <html>
  2. <head>
  3. <title>无需表格的菜单</title>
  4. <style>
  5.  
  6. body{
  7.     background-color:#dee0ff;
  8. }
  9. #navigation {
  10.     width:150px;
  11.     font-family:Arial;
  12.     font-size:14px;
  13.     text-align:right
  14. }
  15. #navigation ul {
  16.     list-style-type:none;                /* 不显示项目符号 */
  17.     margin:0px;
  18.     padding:0px;
  19. }
  20. #navigation li {
  21.     border-bottom:1px solid #9F9FED;    /* 添加下划线 */
  22. }
  23. #navigation li a{
  24.     display:block;
  25.     height:1em;
  26.     padding:5px 5px 5px .5em;
  27.     text-decoration:none;
  28.     border-left:12px solid #;        /* 左边的粗边 */
  29.     border-right:1px solid #;        /* 右侧阴影 */
  30. }
  31. #navigation li a:link, #navigation li a:visited{
  32.     background-color:#1136c1;
  33.     color:#FFFFFF;
  34. }
  35. #navigation li a:hover{                    /* 鼠标经过时 */
  36.     background-color:#;            /* 改变背景色 */
  37.     color:#ffff00;                        /* 改变文字颜色 */
  38.     border-left:12px solid yellow;
  39. }
  40.  
  41. </style>
  42. </head>
  43. <body>
  44. <div id="navigation">
  45. <ul>
  46.     <li><a href="#">Home</a></li>
  47.     <li><a href="#">Contact us</a></li>
  48.     <li><a href="#">Web Dev</a></li>
  49.     <li><a href="#">Web Design</a></li>
  50.     <li><a href="#">Map</a></li>
  51. </ul>
  52. </div>
  53. </body>
  54. </html>

改造一下

li加一个float属性

  1. <html>
  2. <head>
  3. <title>无需表格的菜单</title>
  4. <style>
  5.  
  6. body{
  7.     background-color:#dee0ff;
  8. }
  9. #navigation {
  10.     /*width:150px;*/
  11.     font-family:Arial;
  12.     font-size:14px;
  13.     text-align:right
  14. }
  15. #navigation ul {
  16.     list-style-type:none;                /* 不显示项目符号 */
  17.     margin:0px;
  18.     padding:0px;
  19. }
  20. #navigation li {
  21.     border-bottom:1px solid #9F9FED;    /* 添加下划线 */
  22.     float:left;
  23. }
  24. #navigation li a{
  25.     width: 120px;
  26.     display:block;
  27.     height:1em;
  28.     padding:5px 5px 5px .5em;
  29.     text-decoration:none;
  30.     border-left:12px solid #;        /* 左边的粗边 */
  31.     border-right:1px solid #;        /* 右侧阴影 */
  32. }
  33. #navigation li a:link, #navigation li a:visited{
  34.     background-color:#1136c1;
  35.     color:#FFFFFF;
  36. }
  37. #navigation li a:hover{                    /* 鼠标经过时 */
  38.     background-color:#;            /* 改变背景色 */
  39.     color:#ffff00;                        /* 改变文字颜色 */
  40.     border-left:12px solid yellow;
  41. }
  42.  
  43. </style>
  44. </head>
  45. <body>
  46. <div id="navigation">
  47. <ul>
  48.     <li><a href="#">Home</a></li>
  49.     <li><a href="#">Contact us</a></li>
  50.     <li><a href="#">Web Dev</a></li>
  51.     <li><a href="#">Web Design</a></li>
  52.     <li><a href="#">Map</a></li>
  53. </ul>
  54. </div>
  55. </body>
  56. </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. CentOS下安装无线网卡驱动 （转）

    1. 确定自己的网卡和内核版本:lspci | grep Network  #根据输出的信息确定网卡的型号.uname -a             #确定内核版本 2. 配置yum使用RPMForg ...

  2. PhpForm表单相关的超全局变量操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. POJ1664(简单动态规划)

    #include<iostream> #include<string> #include<cstring> using namespace std; ][]; vo ...

  4. POJ3630——简单Trie树

    这个题的意思是说,给出一些字符串,判断是否有字符串是另一个字符串的前缀,当然可以用排序水过,不过这个题拿来练习一下Trie树不错. 这个题在poj的discuss上好多人说必须要静态建树,估计都是用了 ...

  5. error Infos

  6. RCU 机制 [转IBM]

    2005 年 7 月 01 日 本文详细地介绍了 Linux 2.6 内核中新的锁机制 RCU(Read-Copy Update) 的实现机制,使用要求与典型应用. 一.引言 众所周知,为了保护共享数 ...

  7. mac下识别国产android手机

    mac下识别国产android手机困扰了我很久,这几天总算在google帮助下找到了解决方法. 在~/.android/下找到adb_usb.ini,如果不存在则创建.通过“系统信息”查看到插入的an ...

  8. 数据分析系统DIY3/3：本地64位WIN7+matlab 2012b訪问VMware CentOS7+MariaDB

    数据分析系统DIY中要完毕的三个任务. 一.用VMware装64位CentOS.数据库服务端用CentOS自带的就好. 二.数据採集与预处理用Dev-C++编程解决. 三.用本地Win7 64上的MA ...

  9. Ubuntu的防火墙UFW

    这是个简单的防火墙,可以直接在命令行启停,也可安装提图形端gufw *安装 sudo apt-get install ufw gufw *常用命令 sudo ufw enable //启动 ufw d ...

  10. [跟我学spring学习笔记][更多DI知识]

    延迟初始化Bean 定义: 延迟初始化也叫做惰性初始化,指不提前初始化Bean,在真正使用时才创建并初始化Bean 如何延迟: 配置方式很简单只需在标签上指定 “lazy-init” 属性值为“tru ...