导航条布局

标签：

对于css布局中一些语法与作用归纳总结：

对静态网页中的导航进行样式与布局归纳

源代码：

 <div id="header" class="widthSize">
            <div id="header_left">
            <div>
                <img src="../images/logo.gif"/>
            </div>
        </div>
            <div id="header_right">
                <ul>
                    <li><a href="#" style="color:#465c71">home</a></li>
                    <li><a href="#">about</a></li>
                    <li><a href="#">articles</a></li>
                    <li><a href="#">contacts</a></li>
                    <li><a href="#">sitemap</a></li>
                </ul>
            </div>
        </div>

css样式代码如下

#header_right
{
position: relative;
left: 380px;
top: -108px;
}
#header_right ul
{
list-style: none;
}
#header_right ul li
{
float: left;
}

#header_right ul li a
{
font-size: 17px;
background-color: #f4f4f4; /* 背景色 */
border: 1px #f4f4f4 solid; /* 边框 */
color: #e3e3e3; /* 文字颜色 */
display: block; /* 此元素将显示为块级元素，此元素前后会带有换行符 */
line-height: 70px; /* 行高 */
height: 50px;
margin-top: 30px;
padding: 0px 20px; /* 内部填充的距离 */
text-decoration: none; /* 不显示超链接下划线 */
white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
}
/* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
#header_right ul li a:hover
{
color: #465c71; /* 文字颜色 */
text-decoration: none; /* 不显示超链接下划线 */
}
/* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
#header_right ul li a:active
{
color: #cfdbe6; /* 文字颜色 */
text-decoration: none; /* 不显示超链接下划线 */
}

导航条布局

标签：

原文地址：http://www.cnblogs.com/scyuanhui/p/4929053.html