Sitemap Rss
·您当前位置:网站首页 >> 网页与设计 >> 阅读文章

导航居中背景色通栏显示css代码

来源:逍遥谷 发布时间:2013-03-15 浏览0条评论
内容简介

相关关键词:div   css   居中   背景  

本文链接:http://www.icoa.cn/a/647.html [复制网址]

有时候我们用到导航栏居中显示,但是有通栏背景色的效果,下面有两种办法可以实现:

<!-- 第一种导航栏制作通栏背景的方法,使用min-width方法。 -->

<html>

<head>

    <title>

    </title>

    <style type="text/css">

        .topbar {

            min-weight: 800px; /* 最重要的 */

            height: 30px;

            overflow: hidden;

            background: #468dcc repeat-x;

        }

    </style>

</head>

<body>

    <div class="topbar">

        <div class="topbar_contain">

            <ul>

                <li>Home</li>

                <li>photo</li>

                <li>telephone</li>

                <li>computer</li>

                <li>keyborde</li>

            </ul>

        </div>

    </div>  

</body>

</html>




<!-- 第二种导航栏制作通栏背景的方法,使用position:abaolute绝对定位的。 -->


<html>

<head>

    <title>

    </title>

    body ul {

        margin: 0;

        padding: 0;

    }

    ul {

        list-style-type: none;

    }

    .bg_color {

        background-color: #468dcc;

        height: 30px;

        width: 100%;

        overflow: hidden;

        position: relative;

    }

    .topbar {

        height: 30px;

        width: 800px;

        margin: 0 auto;

        position: absolute;

        top: ???; /* 调节高度使其和bg_color完全重合 */

    }

</head>

<body>

    <div class="bg_color"><!-- 这个div下载没有固定宽度的div外部,一般紧跟这body标签些的 -->

    </div>

    <div class="topbar">

            <ul>

                <li>Home</li>

                <li>photo</li>

                <li>telephone</li>

                <li>computer</li>

                <li>keyborde</li>

            </ul>

    </div>

</body>

</html>


本文链接:http://www.icoa.cn/a/647.html
关键词: div   css   居中   背景  
上一篇:比较好看的配色以及如何找到自己喜欢的配色
下一篇:如何去除ecshop标题和网站底部的Powered by ECShop
相关文章
·限定输入框只能输入数字 2011-04-08 10:18:28
·威客中国提供的设计软件绿色版下载 2011-10-22 16:56:53
·模拟印鉴效果教程 2009-07-31 14:00:17
·3DS MAX 快捷键大全zt 2011-03-10 11:23:50
·PS配置文件丢失解决办法 2009-07-31 13:57:45
·3ds DxDDS.bmi未能初始化解决办法 2010-02-21 09:11:38
·关于PS的图层合并 2009-07-31 13:55:28
·Google 提示 available in the new AdSense interface 2011-06-29 10:40:45
文章评论

共有0条评论(点击查看)



4057

逍遥峡谷 逍遥乱弹 张立博 飓风团队 爱之路 酷品优选 宝贝派 张子涵


版权所有©逍遥峡谷 Copyright©Canyon of Airily 冀ICP备06033848号