效果

代码

<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. 关于tomcat startup.bat启动后一闪而过的问题(转)

    1.如果双击startup.bat,窗口一闪而过,可以在命令行里面启动startup.bat:  2.如果命令行里面启动startup.bat情况还是这样,就可以在bat命令后面加上pause.这样就 ...

  2. c++ 13

    一.向量 ... 10.size/resize/clear/capacity/reserve 1)向量的大小可增可减,使向量大小改变的函数包括:resize/push_back/pop_back/cl ...

  3. Java 安装配置

    1.下载 进入官方网站,点击下载链接进入下载页面,选择合适的版本(如,jdk-6u31-windows-i586.exe)下载. 2.安装 双击jdk-6u31-windows-i586.exe文件, ...

  4. 沙湖王 | 用K-均值聚类给女明星们的身材分分类

    沙湖王 | 用K-均值聚类给女明星们的身材分分类 http://www.shahuwang.com/2012/07/21/%E7%94%A8scipy%E5%AE%9E%E7%8E%B0k-means ...

  5. mysql的日志

    是否启用了日志mysql>show variables like ‘log_bin’; 怎样知道当前的日志mysql> show master status; 看二进制日志文件用mysql ...

  6. HTTP 协议实现

    一.超文本传输协议及HTTP包    HTTP协议用于在Internet上发送和接收消息.HTTP协议是一种请求-应答式的协议--客户端发送一个请求,服务器返回该请求的应答,所有的请求与应答都是HTT ...

  7. python学习之路-11 多线程、多进程、协程

    python内置队列模块 queue queue的四种队列 q = queue.Queue() # 先进先出队列 q = queue.LifoQueue() # 后进先出队列 q = queue.Pr ...

  8. Kafka的Producer以及Consumer远程调用问题

    公司需要分布式的JMS,所以研究了Kafka,之前在本地都没有出现问题,但是在服务器上布Kafka的时候发现了消费者无法消费的问题. kafka布到一台服务器上面,由于业务原因,producer和ka ...

  9. 使用Reporting Service订阅对域外用户发邮件

    默认情况下使用Reporting Service对域外邮件发送会失败,一般可能会碰到下面的两个错误: ERROR 1: Subscription Error: "The e-mail add ...

  10. Dalvik虚拟机的运行过程分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/8914953 在前面一篇文章中,我们分析了Dal ...