网站地图 | 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


    - 相关文章 -


    用JS脚本判断浏览器的语言并自动转向 - 2009-07-31

    今日全国哀悼日为舟曲灾区祈祷…将网站变成灰色CSS代码 - 2010-08-15

    电脑里出现Tempzxpsign文件夹的解决办法 - 2017-06-13

    HTML to JS 或者 JS to HTML (HTML&JS互转) - 2010-07-31

    淘宝天猫手机详情页应该如何设计 - 2017-04-06

    Photoshop组的混合属性里穿透是什么意思?PS里穿透是什么意思? - 2010-07-29

    PS将图片做成素描效果教程 - 2017-02-10

    八个高质的免费图片素材网站 - 2017-01-05


    - 文章评论 -




    0623

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

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


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

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

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