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
相关文章
·CCTV-7中央电视台农业频道片花 2009-08-01 10:18:54
·Google 提示 available in the new AdSense interface 2011-06-29 10:40:45
·Html网页瘦身,网页加速系列(二) 2009-07-31 16:18:58
·Html网页瘦身,网页加速系列(一) 2009-07-31 16:17:08
·最舒服的色彩搭配RGB值 2011-06-20 14:05:00
·形成视觉冲击的几种方式 2009-07-31 16:16:44
·什么是广告诉求点? 2009-07-31 16:16:20
·改进网页可读性的7个方法 2009-07-31 16:15:26
文章评论

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



4455

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


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