zoukankan      html  css  js  c++  java
  • css案例学习之div ul li a 实现导航效果

    效果

    代码

    <html>
    <head>
    <title>无需表格的菜单</title>
    <style>
    
    body{
        background-color:#dee0ff;
    }
    #navigation {
        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 0.5em;
        text-decoration:none;
        border-left:12px solid #151571;        /* 左边的粗边 */
        border-right:1px solid #151571;        /* 右侧阴影 */
    }
    #navigation li a:link, #navigation li a:visited{
        background-color:#1136c1;
        color:#FFFFFF;
    }
    #navigation li a:hover{                    /* 鼠标经过时 */
        background-color:#002099;            /* 改变背景色 */
        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 {
        /*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{
         120px;
        display:block;
        height:1em;
        padding:5px 5px 5px 0.5em;
        text-decoration:none;
        border-left:12px solid #151571;        /* 左边的粗边 */
        border-right:1px solid #151571;        /* 右侧阴影 */
    }
    #navigation li a:link, #navigation li a:visited{
        background-color:#1136c1;
        color:#FFFFFF;
    }
    #navigation li a:hover{                    /* 鼠标经过时 */
        background-color:#002099;            /* 改变背景色 */
        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>

    效果

  • 相关阅读:
    计算机网络笔记6-应用层
    计算机网络笔记5-传输层
    计算机网络笔记4-网络层
    计算机组成原理笔记7-输入输出系统
    计算机组成原理笔记6-总线
    计算机组成原理笔记5-中央处理器
    计算机网络笔记3-数据链路层
    计算机组成原理笔记4-指令系统
    计算机组成原理笔记3-存储系统
    信息安全数学基础笔记
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/5007280.html
Copyright © 2011-2022 走看看