您当前位置：网站首页 >> 视觉设计 >> 导航居中背景色通栏显示 DIV + CSS 代码

导航居中背景色通栏显示 DIV + CSS 代码

iCoA首席特工逍遥峡谷发布：2013-03-15 更新：2013-03-15 浏览次有0条评论

内容简介

本文链接：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://www.icoa.cn/demo/div/nav.php

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

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

<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>

<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

- 相关文章 -

Html网页瘦身，网页加速系列（二） - 2009-07-31

投影仪投影是菱形像素和方形像素哪种更清晰呢？ - 2017-10-19

Html网页瘦身，网页加速系列（一） - 2009-07-31

如何设置网站的PC版和移动版/无线版，以及两者之间的适配关系 - 2017-08-04

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

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

经典的Logo的设计实例zt - 2010-06-26

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

- 文章评论 -

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

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