CSS学习之创建一个简单的导航栏

最新推荐文章于 2024-05-19 18:15:00 发布

didaoxiu6491

最新推荐文章于 2024-05-19 18:15:00 发布

阅读量110

点赞数

文章标签：后端

原文链接：http://www.cnblogs.com/tatame/archive/2012/08/24/2655548.html

版权

note_top.html

虽然是做后端的，但是对CSS很感兴趣，做了个简单的导航栏，很简单的说。希望以后能够做复杂一些，要多努力！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>note_top.html</title>

        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <style type="text/css">
.top-ul {
    z-index: 1000;
    position: absolute;
    top: 0px;
    background: #333;
    width: 100%;
    left: 0px;
}

.top-ul #top-left-ul {
    width: 80%;
    float: left;
}

.top-ul #top-right-ul {
    width: 20%;
    float: right;
}

.top-ul #top-right-ul ul {
    right: 0px;
    position: absolute;
}

.top-ul ul {
    font-family: "微软雅黑", "宋体", Arial;
    margin-top: 0px;
}

.top-ul #top-left-ul ul {
    direction: rtl;
}

.top-ul #top-right-ul ul {
    direction: ltr;
}

.top-ul ul li {
    float: left;
}

.top-ul ul li a {
    display: block;
    height: 26px;
    padding: 6px 10px 0 10px;
    text-decoration: none;
    color: #ddd;
}

.top-ul ul li a:hover {
    background: #5EB2E5;
    color: #FFFFFF;
}

.top-ul  ul li .current_page_item {
    background: #FFFFFF;
    color: #6E7073;
}

.top-ul ul li .current_page_item:hover {
    background: #FF8800;
    color: #FFFFFF;
}
</style>
    </head>

    <body>
        <div class="top-ul">
            <div id="top-left-ul">
                <ul>
                    <li>
                        <a href="">首页</a>
                    </li>
                    <li>
                        <a href="" class="current_page_item">首页</a>
                    </li>
                    <li>
                        <a href="">首页</a>
                    </li>
                    <li>
                        <a href="">首页</a>
                    </li>
                    <li>
                        <a href="">首页</a>
                    </li>
                </ul>
            </div>

            <div id="top-right-ul">
                <ul>
                    <li>
                        <a href="">登录</a>
                    </li>
                    <li>
                        <a href="">注册</a>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

嗯，预览的跟自己浏览器上的不一样啊

转载于:https://www.cnblogs.com/tatame/archive/2012/08/24/2655548.html

didaoxiu6491

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习之创建一个简单的导航栏

note_top.html虽然是做后端的，但是对CSS很感兴趣，做了个简单的导航栏，很简单的说。希望以后能够做复杂一些，要多努力！<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>...
复制链接

扫一扫