网站地图 | Sitemap | Rss
  • 您当前位置:网站首页 >> 视觉设计 >> 导航居中背景色通栏显示 DIV + CSS 代码
  • 导航居中背景色通栏显示 DIV + CSS 代码

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

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

    本文链接:https://www.icoa.cn/a/647.html

    有时候我们用到导航栏居中显示,但是有通栏背景色的效果,比如本站现在(2017年12月)的导航栏就是通栏背景的。经过调试,发现了一个非常简单的通栏背景的 DIV + CSS 代码,首先看 CSS 代码:

    第一个,通栏背景导航 CSS 代码:

    <style type="text/css">    
    body{margin:0px;}
    /*要想通栏背景,必须要 body 的 margin 属性设为0px,这样网页上下左右才不会有空隙*/
    #header-blue{
     margin-top:30px; /*顶部的空隙,这里设为30像素,根据自己的需要设置即可。*/
     height:20px;
     background:#3399cc;
     border:5px solid #3399cc;
    }
    #nav {
    margin: 0 auto; /*主导航居中*/
    width: 800px; /*主导航的宽度*/
    }
    #nav a{
    color:#fff;
    text-decoration: none;
    }
    #link {
    padding-left:30px;
    width:100px;
    float:left;
    }
    </style>

    下面是相应的 HTML 代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
    <html xmlns="http://www.w3.org/1999/xhtml">    
    <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <title>顶部通栏横线CSS</title>    
    <style type="text/css">    
    body{margin:0px;}    
    #header-blue{    
    margin-top:30px;    
    height:20px;    
    background:#3399cc;    
    border:5px solid #3399cc;
    }    
    #nav {    
    margin: 0 auto;    
    width: 800px;    
    }    
    #nav a{    
    color:#fff;    
    text-decoration: none;    
    }    
    #link {    
    padding-left:30px;    
    width:100px;    
    float:left;    
    }    
    </style>    
    </head>    
    <body>       
    <div id="header-blue">    
    <div id="nav">    
    <div id="link"><a href="https://www.icoa.cn/">首页</a></div>    
    <div id="link"><a href="https://www.icoa.cn/news/">且听风吟</a></div>    
    <div id="link"><a href="https://www.icoa.cn/php/">PHP学习</a></div>    
    <div id="link"><a href="https://www.icoa.cn/asp/">ASP技术</a></div>    
    <div id="link"><a href="https://www.icoa.cn/web/">视觉设计</a></div>    
    <div id="link"><a href="https://www.icoa.cn/book/">留言</a></div>    
    </div>    
    </div>    
    </body>    
    </html>

    第二个,通栏底部细线 CSS 代码

    /*通栏细线*/
    #header-red{
    margin-top:50px; 
    padding-top:30px;
    height:30px;
    border-bottom:1px solid #cc6666;
    } 
    #nav-red {    
    margin: 0 auto;    
    width: 800px;    
    }    
    #nav-red a{    
    color:#cc6666;    
    text-decoration: none;    
    }    
    #link {    
    padding-left:30px;    
    width:100px;    
    float:left;    
    }

    相应的HTML 代码跟第一个类似,就不再重复贴出了。

    下面是相应的 Demo 网页:

    通栏背景导航和通栏细线 Demo http://demo.icoa.cn/div/nav.php



     

    PS.补充分割线,以下为原来2013年的代码。


    下面有两种办法可以实现:

    <!-- 第一种导航栏制作通栏背景的方法,使用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>
    <style type="text/css">
    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完全重合 */
    }
    </style>
    </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>


    本文链接:https://www.icoa.cn/a/647.html
    关键词: div   css   居中   背景  

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


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

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


    - 相关文章 -


    什么是DM广告,DM广告的形式有哪些? - 2010-12-04

    报纸广告设计知识介绍 - 2010-12-02

    五则电视广告脚本(转) - 2009-08-03

    CCTV-7中央电视台农业频道片花 - 2009-08-01

    Html网页瘦身,网页加速系列(二) - 2009-07-31

    Html网页瘦身,网页加速系列(一) - 2009-07-31

    形成视觉冲击的几种方式 - 2009-07-31

    什么是广告诉求点? - 2009-07-31


    - 文章评论 -




    4470

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

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


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

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

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