效果

代码

<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. js深入研究之匿名函数

    /* 匿名函数*/ (function() { var foo = 10; var bar = 2; alert(foo * bar);})(); /* 匿名函数,带参数 */ (function(f ...

  2. poj 1149 pigs(最大流）

    题目大意:迈克在农场工作,农场有 m 个猪舍,每个猪舍有若干只猪,但是迈克不能打开任何一间猪舍.有 n 个顾客前来购买,每个顾客有最大的购买数量,每个顾客可以购买某些猪舍的猪,且顾客可以打开这些猪舍, ...

  3. 使用skin++进行MFC界面美化范例

    1.下载skin++皮肤库和皮肤库,skin++皮肤库主要包括:SkinPPWTL.dll,SkinPPWTL.lib,SkinPPWTL.h这三个文件.把这三个文件 拷贝到工程目录下. 2.在工程中 ...

  4. 关于Redis

    在同步dump.rdb文件时要执行service redis stop后,再拷贝目标rdb文件过去,然后再start 而不是拷贝目标rdb文件过去后直接执行restart  因为redis在执行sto ...

  5. hdu 5344 MZL's xor（数学之异或）

    Problem Description   MZL loves xor very much.Now he gets an array A.The length of A ≤i,j≤n) The xor ...

  6. Tcp通讯协议

    了解了Udp通讯协议之后,我们再认识一个常用的通讯协议:Tcp Tcp传输特点: --依赖于Socket和ServerSocket对象 --建立客户端和服务端 --建立连接后,通过Socket中的 I ...

  7. OpenVPN莫名其妙断线的问题及其解决

    1.问题 不得不说,这是一个OpenVPN的问题,该问题几乎每个使用OpenVPN的人都碰到过,也有很多人在网上发问,然而一直都没有人能给出解决办法,甚至很多帖子上表示因为这个问题而放弃了使用Open ...

  8. java遍历泛型的方法

    一.List遍历 Java中List遍历有三种方法来遍历泛型,主要为: 1.for循环遍历 2.iterator遍历 3.foreach遍历 package com.gmail.lsgjzhuwei; ...

  9. 面试前的准备---C#知识点回顾----05

    技术博客还得继续写,工作还在筛选,学习还得继续 1.Session和Cookie的使用区别 很容易回答的就是Session在服务器端,存储的数据可以较大容量,比如我们存一个Table,上千条数据. C ...

  10. MySql命令——命令行客户机的分隔符

    delimiter // create procedure productpricint() begin select avg(price) as priceaverage from product; ...