网站地图 | Sitemap | Rss
  • 您当前位置:网站首页 >> 视觉设计 >> 导航居中背景色通栏显示css代码
  • 导航居中背景色通栏显示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   居中   背景  

    如果您愿意支持,欢迎请扫码打赏哦~


    上一篇:非常好看的配色RGB值以及如何找到自己喜欢的颜色搭配

    下一篇:如何去除ecshop标题和网站底部的Powered by ECShop


    - 相关文章 -


    HTML网页DIV布局设计的常见错误 - 2009-07-31

    大8开尺寸、大度八开纸等的标准尺寸 - 2009-12-11

    Photoshop快捷键大全 - 2009-12-09

    Photoshop常用快捷键 - 2009-12-09

    画册及宣传单页等印刷品如何出血 - 2009-12-04

    常规照片尺寸大小 常用照片尺寸 - 2009-11-18

    喷绘写真设计注意事项 - 2009-10-14

    CMYK色值表 - 2009-10-14


    - 文章评论 -




    0878

    [由于政策原因,您的留言如果提交成功后,需要审核才能展示,请改天再来查看,请不要重复提交,谢谢支持!]

    - 最新评论[0条评论] -


    [>>>点击查看更多评论]

    逍遥峡谷 逍遥乱弹 张立博 爱之路 酷品优选 宝贝派

    版权所有©逍遥峡谷 - 智能中央超自然局·地球总部 | 冀ICP备06033848号
    Copyright©Intelligence Central Occult Agency (I.C.O.A)
    本局纯属虚构,如有雷同,纯属巧合
    网络违法犯罪举报