网页设计基础内容总结（四）

目录

前言

一、Page 1

对导航栏的设计

二、Page two

总结

---

前言

        今天就是1024程序员节，没啥好送的，就把这篇文章送给热爱编程的你吧！额，发慢了~~

 

一、Page 1

对导航栏的设计

        导航栏包括纵向导航栏、横向导航栏和带下拉菜单的导航栏。

        <nav></nav>,HTML中的新标签，定义导航栏链接部分。

        对超链接样式的设置。代码如下：

#dh a{
    display:block;/*设置超链接显示为块元素*/
    height:30px;/*设置块元素的高度为30像素*/
    width:90px;/*设置块元素的宽度为90像素*/
    text-decoration:none;/*设置超链接无下划线*/
    font-size:14px;/*设置超链接文字大小为14像素*/
    color:#FFCC00;/*设置超链接的文字颜色*/
    line-height:30px;/*设置行高为30像素*/
    background-color:#000066;/*设置超链接背景色*/
    border-left-width:10px;/*设置超链接左边框的宽度为10像素*/
    border-left-color:#FF9900;/*设置超链接左边框的颜色*/
    border-left-style:solid;/*设置超链接左边框的样式为实线型*/
    border-bottom-width:1px;/*设置超链接下边框的宽度为1像素*/
    border-bottom-color:#FFF;/*设置超链接下边框的颜色*/
    border-bottom-style:dashed;/*设置超链接下边框的样式为虚线型*/
    padding-left:20px;/*设置链接框左内边距为20像素*/
}

        在超链接中关于伪类的使用。列下例实例方便读者理解。

#dh a:hover{
    color:#FFFFFF;/*设置超链接在hover状态下的文字颜色，hover是悬停的意思*/
    background-color:#000033;/*设置超链接在hover状态时的背景色*/
    border-left-width:10px;/*设置超链接在hover状态时左边框的宽度为10像素*/
    border-left-style:solid;/*设置超链接在hover状态时左边框的线型为实线*/
    border-left-color:#D8D803;/*设置超链接在hover状态时左边框的颜色*/
}

其中，a:hover表示鼠标放到超链接上时的超链接的状态；a:link是超链接没有被访问时的状态；a:active为鼠标单击超链接但没释放时的状态。对于其他元素也可以设置动态效果，只需将a换成其他选择器名即可。

使用CSS的一些小技巧。

1.合理利用display：block属性。

        display属性规定元素的显示类型，其中有多个不同的属性值，其中display：block表示将元素转化为块级元素。

2.利用border设置特殊边框。

        特殊边框的设置并不困难，利用border可以对4个方向的边框分别进行设置。因此在设置边框的时候，可以单独设置一个方向的边框，也可以对多个方向的边框分别进行不同的样式设置。巧妙地利用border这个属性值就可以设计出各式各样的边框了。

为<nav>块中的超链接标签<a>设置样式的第二个实例。该实例的代码如下：

#topmena a{
    float:left;/*将超链接设置为向左浮动*/
    text-align:center;/*设置超链接块的文字对齐方式为居中对齐*/
    line-height:27px;/*设置超链接的行高为27像素*/
}

注意：要将行内元素设置为块元素，除使用display:block属性外，还可以使用浮动方式，如本例中的float:left。当指定的行内元素中添加了这个属性后，行内元素会自动转换为块元素。因此，当设置行内元素的属性为float:left以后，就不需要再设置display:block属性，除非这个元素有显示和隐藏状态的切换，即display:hidden属性和display:block属性的切换。

        设置超链接在hover状态下的效果（hover表示“悬停”，前面应该已经提过），代码示例如下：

#topmena a:hover{
    background:#f00;/*设置超链接在hover状态下的背景色*/
    color:#fff;/*设置超链接在hover状态下的文字颜色*/
}

那么如何使我们写的横向导航栏的背景图像发生变化呢？

        假设我们对<nav></nav>标签取个类名叫“menus”，即<nav class="menus"></nav>，并对其应用CSS样式。代码如下：

.menus{
    width:802px;/*设置nav块的宽度*/
    height:41px;/*设置nav块的高度*/
    background:url(images/menusBg.jpg)no-repeat;/*设置nav块的背景图像且图像不重复*/
}

二、Page two

        设置<nav>块中超链接标签<a>的默认样式。代码如下：

.menus a{
    float:left;/*设置超链接向左浮动*/
    width:78px;/*设置超链接的宽度*/
    height:41px;/*设置超链接的高度*/
    text-align:center;/*设置超链接文字居中*/
    line-height:41px;/*设置超链接的行高*/
    color:#FFF;/*设置超链接的文字颜色*/
    text-decoration:none;/*设置超链接无下划线*/
    font-size:12px;/*设置超链接的字体大小*/
}

        设置超链接在hover状态（将鼠标指针悬停在超链接上）下的样式。代码如下：

.menus a:hover{
    background:url(images/menu_ok.jpg)no-repeat center;
    overflow:hidden;/*这应该是将越界的部分隐藏吧，我也不是很清楚*/
}

那么，我们是否可以更进一步，使横向导航栏具有下拉菜单呢？

①像如下的代码一样先在一级菜单下面输入作为一级菜单的二级菜单文字。代码如下：

<nav>
    <ul>
        <li><a href="#">首页</a>
            <ul>
                <li><a href="#">最新更新</a></li>
                <li><a href="#">下载排行</a></li>
            </ul>
        </li>
        <li><a href="#">企业新闻</a>
            <ul>
                <li><a href="#">企业介绍</a></li>
                <li><a href="#">最新动态</a></li>
            </ul>
        </li>
    </ul>
</nav>

②设置CSS样式（你们想怎么设就怎么设，这里我只讲案例）

i.设置整体页面所有标签的通用属性。

*{
    margin:0;    /*设置页面所有标签的外边距为0*/
    padding:0;    /*设置页面所有标签的内边距为0*/
}

ii.设置<li>标签的样式。（使用标签选择器）

li{
    list-style:none;/*设置列表项无编号*/
    text-align:center;/*设置列表项文字居中对齐*/
    line-height:24px;/*设置列表项的行高*/
}

iii.设置超链接样式。

a{
    text-decoration:none;/*设置超链接无下划线*/
    color:#333;/*设置超链接文字的颜色*/
    font-size:12px;/*设置超链接文字的大小*/
    line-height:24px;/*设置超链接的行高*/
    display:block;/*将超链接转换为块元素*/
}

iv.调整<nav>块及其包含的元素样式。先设置该<nav>块1级列表项标签<li>的样式。（使用后代选择器）

nav ul li{
    width:120px;/*设置<li>标签的的宽度为120像素*/
    float:left;/*设置<li>标签向左浮动*/
    border:1px #333 dashed;/*设置<li>标签边框的粗细、颜色及线型*/
    background:#FFD2D2;/*设置<li>标签的背景色*/
}

注意：CSS样式在生效时常采用“就近原则”，离被修饰的内容越近的样式优先生效。

v.隐藏二级菜单。代码如下：

nav ul li ul{
    display:none;/*设置2级菜单默认隐藏*/
}

vi.设置1级菜单中<li>标签下<a>标签的hover状态下的样式。代码如下：

nav ul li a:hover{
    color:#FFF;/*设置hover状态下<a>标签的文字颜色*/
    background-color:#BB0916;/*设置hover状态下<a>标签的背景颜色*/
}

vii.显示2级菜单。代码如下：

nav ul li:hover ul,nav ul li a:hover ul{
    display:block;/*设置display属性为block，即以块元素显示*/
    width:120px;/*设置2级菜单列表项宽度*/
    height:24px;/*设置2级菜单列表项高度*/
}

注：nav ul li:hover ul和nav ul li a:hover ul的实际效果是一样的，之所以要将这两个设置都写出来，是因为在某些浏览器下（比如IE6.0及以下的版本）使用li:hover是无效的，所以需再定义a:hover。

viii.设置2级菜单样式。代码如下：

nav ul li ul li{
    background-color:#FEE;/*设置2级菜单的背景色*/
    width:120px;/*设置2级菜单的宽度（可自行定义宽度，只要美观就行）*/
}

ix.设置2级菜单hover状态时的样式。代码如下：

nav ul ul li a:hover{
    background:#F7F7B9;
    color:#666;
}

        将代码保存之后，就可以预览导航栏的效果了。

---

总结

        喜欢这篇文章的小伙伴麻烦点点举报赞。886~~