欧阳良才

不是别人,就是我阳良才
随笔 - 13, 文章 - 8, 评论 - 2, 引用 - 0
数据加载中……

css 好看的动态菜单效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
    <HEAD>
        <TITLE> New Document </TITLE>
        <META NAME="Generator" CONTENT="EditPlus">
        <META NAME="Author" CONTENT="">
        <META NAME="Keywords" CONTENT="">
        <META NAME="Description" CONTENT="">
        body{
        background-color:#c1daff;
        }
        #navigation{
        width:200px;
        font-family:Arial;
        }
        #navigation ul{
        font-family:Arial;
        font-size:13px;
        color:#00458c;
        list-style-type:none;/* 不显示项目符号 */
        margin:0px;
        padding:0px;
        }
        #navigation li{
        border-bottom:1px solid #ed9f9f;
        }
        #navigation li a{
        display:block;/* 按块显示*/
        padding:5px 5px 5px 0.5em;
        text-decoration:none;
        border-left:12px solid #711515;
        border-right:1px solid #711515;
        }
        #navigation li a:link{
        background-color:#c11136;
        color:#ffffff;
        }
        #navigation li a:visited{
        background-color:#c11136;
        color:#ffffff;
        }
        #navigation li a:hover{
        background-color:#990020;
        color:#ffff00;
        }
        #navigation2{
        font-family:Arial;
        margin-top:20px;
        }
        #navigation2 ul{
        font-family:Arial;
        font-size:13px;
        color:#00458c;
        margin:0px;
        padding:0px;
        }
        #navigation2 li{
        float:left;
        }
        #navigation2 li a{
        font-family:Arial;
        font-size:13px;
        color:#00458c;
        display:block;/* 按块显示*/
        padding:3px 6px 3px 6px;
        text-decoration:none;
        border:1px solid #711515;
        margin:2px;
        }
        #navigation2 li a:link{
        background-color:#039803;
        color:#ffffff;
        }
        #navigation2 li a:visited{
        background-color:#039803;
        color:#ffffff;
        }
        #navigation2 li a:hover{
        background-color:#035803;
        color:#ffff00;
        }
    </HEAD>
    <BODY>
        <div id="page">
        <div id="navigation">
        <ul>
            <li><a href="#">自由泳</a></li>
            <li><a href="javascript:">仰泳</a></li>
            <li><a href="#">蛙泳</a></li>
            <li><a href="#">蝶泳</a></li>
            <li><a href="#">个人混合泳</a></li>
            <li><a href="#">自由泳接力</a></li>
        </ul>
        </div>
        <div id="navigation2">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">My Bolg</a></li>
            <li><a href="#">Firends</a></li>
            <li><a href="#">Next Staition</a></li>
            <li><a href="#">Contact Me</a></li>
        </ul>
        </div>
        </div>
    </BODY>
</HTML>

posted on 2012-05-10 09:33 欧阳良才 阅读(710) 评论(0)  编辑  收藏 所属分类: HTML学习


只有注册用户登录后才能发表评论。


网站导航: