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
相关文章
·今日全国哀悼日为舟曲灾区祈祷…将网站变成灰色CSS代码 2010-08-15 13:21:00
·喷绘写真设计注意事项 2009-10-14 10:59:37
·CMYK色值表 2009-10-14 10:58:25
·HTML to JS 或者 JS to HTML (HTML&JS互转) 2010-07-31 10:18:30
·Photoshop组的混合属性里穿透是什么意思?PS里穿透是什么意思? 2010-07-29 10:30:03
·平面设计水平就如华山的剑宗气宗 2009-08-27 08:53:33
·经典的Logo的设计实例zt 2010-06-26 15:06:54
·十五种网站最差的用户体验设计(经典收藏) 2010-06-18 16:41:34
文章评论

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



8418

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


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