Web前端基础精品入门（HTML+CSS+JavaScript+JS）[爱前端]听课笔记2：导航条的制作——css学习仿作马蜂窝

马蜂窝的首页是非常正能量，青春的网页，首页非常大气

logo在上一篇我们已经制作好，现在我们开始制作导航条

这个导航条字数不等，宽窄不一致，就是所有的li不一样宽，字多就宽，字少就窄，需要用padding去撑

pandding:0 10px;

实现如下

1、index.html里body->header->innetr下添加菜单的内容

<div class="nav">
                <li>
                    <a href="">s首页</a>
                </li>
                <li>
                    <a href="">旅游攻略</a>
                </li>
                <li>
                    <a href="">去旅行</a>
                </li>
                <li>
                    <a href="">机票</a>
                </li>
                <li>
                    <a href="">订酒店</a>
                </li>
                <li>
                    <a href="">社区</a>
                </li>
                <li>
                    <a href="">APP</a>
                </li>
        </div>

1、index.css 中logo增加左浮动，添加nav 设置左浮动

.header{
    /*css3介绍 这是盒子阴影*/
    height: 57px;
    border-bottom: 1px solid;
    box-shadow: 0px 0px 1px rgb(0,0,0.6);
    /*background:black;*/

}
.header .inner{
    width: 1000px;
    height: 57px;
    /*color:white;*/
    margin: 0 auto;
}
.header .inner .logo {
    padding-top: 13px;
    float: left;
    margin-right: 40px;

}

.header .inner .logo a{
    display: block;
    width: 120px;
    height:30px;
    background: url(../image/header-small-sprites3.png);
}

.header .inner .logo a h1{
    width: 120px;
    /*把里边的字挤走,里边的字是给搜索引擎看的，不是给用户看的*/
    height: 0px;
    padding-top: 30px;
    overflow: hidden;

}
.header .inner .nav{

    float: left;
}

.header .inner .nav ul li{
    height: 58px;
    float: left;
}
.header .inner .nav ul li a{
    display: block; /*块结构*/
    height: 30px; 
    height: 58px;
    line-height: 58px;/*压线技术*/
    padding: 0 16px;
    font-size: 14px;
    text-decoration:none;/*去掉超链接下划线*/
    color: #333333
}

几个特效的处理

（1）菜单栏里的“首页”中首页效果处理，加背景，文字改颜色

index.html 中的li标签中加class=“cur”，css中定义底色和字体颜色

/*设置首页的底色*/
.header .inner .nav ul li.cur a{
    background-color: #FF9D00;
    color: white;
}

（2）原网页中有的选项，触碰的时候上端显示黄线，出菜单，没有的下端显示黄线，本节不考虑菜单

方案1：

分别设成不同的类名，触碰时给对应按钮加边框，给颜色

.header .inner .nav ul li.top_bk a:hover{
    border-top: 2px solid #FF9D00;
}
.header .inner .nav ul li.bottom_bk a:hover{
    border-bottom: 2px solid #FF9D00;
}

这个做法字会抖动，css全文如下

.header{
    /*css3介绍 这是盒子阴影*/
    height: 57px;
    border-bottom: 1px solid;
    box-shadow: 0px 0px 2px rgb(80, 80, 81,0.6);
    /*background:black;*/

}
.header .inner{
    width: 1000px;
    height: 57px;
    /*color:white;*/
    margin: 0 auto;
}
.header .inner .logo {
    padding-top: 13px;
    float: left;
    margin-right: 40px;

}

.header .inner .logo a{
    display: block;
    width: 120px;
    height:30px;
    background: url(../image/header-small-sprites3.png);
}

.header .inner .logo a h1{
    width: 120px;
    /*把里边的字挤走,里边的字是给搜索引擎看的，不是给用户看的*/
    height: 0px;
    padding-top: 30px;
    overflow: hidden;

}
.header .inner .nav{

    float: left;
}

.header .inner .nav ul li{
    height: 58px;
    float: left;
}
.header .inner .nav ul li a{
    display: block; /*块结构*/
    height: 58px;
    line-height: 58px;/*压线技术*/
    padding: 0 16px;
    font-size: 14px;
    text-decoration:none;/*去掉超链接下划线*/
    color: #333333
}
/*设置鼠标略过底色和首页的底色*/
/**************************************
.header .inner .nav ul li a:hover,
.header .inner .nav ul li.cur a{
    background-color: #FF9D00;
    color: white;
}
******************************************/
/*设置首页的底色*/
/*这个做做法字会抖动*/
.header .inner .nav ul li.cur a{
    background-color: #FF9D00;
    color: white;
}

.header .inner .nav ul li.top_bk a:hover{
    border-top: 2px solid #FF9D00;
}
.header .inner .nav ul li.bottom_bk a:hover{
    border-bottom: 2px solid #FF9D00;
}

方法二，把a加上边框，默认情况下上边框是透明色，触碰时改变颜色

修改后的css文件如下：

.header{
    /*css3介绍 这是盒子阴影*/
    height: 58px;
    border-bottom: 2px solid;
    box-shadow: 0px 0px 2px rgb(80, 80, 81,0.6);
    /*background:black;*/

}
.header .inner{
    width: 1000px;
    height: 57px;
    /*color:white;*/
    margin: 0 auto;
}
.header .inner .logo {
    padding-top: 13px;
    float: left;
    margin-right: 40px;

}

.header .inner .logo a{
    display: block;
    width: 120px;
    height:30px;
    background: url(../image/header-small-sprites3.png);
}

.header .inner .logo a h1{
    width: 120px;
    /*把里边的字挤走,里边的字是给搜索引擎看的，不是给用户看的*/
    height: 0px;
    padding-top: 30px;
    overflow: hidden;

}
.header .inner .nav{

    float: left;
}

.header .inner .nav ul li{
    height: 58px;
    float: left;
}
.header .inner .nav ul li a{
    display: block; /*块结构*/
    height: 54px;
    line-height: 54px;/*压线技术*/
    padding: 0 16px;
    font-size: 14px;
    text-decoration:none;/*去掉超链接下划线*/
    color: #333333;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}
/*设置鼠标略过底色和首页的底色*/
/**************************************
.header .inner .nav ul li a:hover,
.header .inner .nav ul li.cur a{
    background-color: #FF9D00;
    color: white;
}
******************************************/
/*设置首页的底色*/

.header .inner .nav ul li.cur a{
    background-color: #FF9D00;
    color: white;
    border-bottom: 2px solid #FF9D00;
}
/*触碰改颜色*/
.header .inner .nav ul li.top_bk a:hover{
    border-top: 2px solid #FF9D00;
}
.header .inner .nav ul li.bottom_bk a:hover{
    border-bottom: 2px solid #FF9D00;
}

（3）原网页中有的选项，触碰的时候两边有边框2px的细线，但是没有楔形

楔形是指在一个盒子的相邻的两个边框颜色不同是，角的呈现方式

.header .inner .nav ul li.top_bk a:hover{
    border-top: 2px solid #FF9D00;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
}

解决的方法是让两条边分属于不同的盒子

左右边框加给li即可

/*触碰改颜色*/
.header .inner .nav ul li.top_bk:hover{

    border-left: 1px solid #333;
    border-right: 1px solid #333;
}
.header .inner .nav ul li.top_bk a:hover{
    border-top: 2px solid #FF9D00;
}

此时有两个问题，1、左右边框压在上边框上，2、去旅行向右抖动一个字，后边的元素向右抖动两个字。也是通过压线技术解决，即触碰时盒子向左移动一个元素，宽度减少一个元素

.header .inner .nav ul li.top_bk:hover a{
    border-top: 2px solid #FF9D00;
    margin-left:-1px;
    padding-right: 15px;
}

.header .inner .nav ul li.bottom_bk a:hover{
    border-bottom: 2px solid #FF9D00;
}

现在解决字体抖动问题，但是有边框仍然有问题

改变li和a标签的属性可以解决这个问题，注意，前后都要改

.header{
    /*css3介绍 这是盒子阴影*/
    height: 58px;
    border-bottom: 2px solid;
    box-shadow: 0px 0px 2px rgb(80, 80, 81,0.6);
    /*background:black;*/

}
.header .inner{
    width: 1000px;
    height: 57px;
    /*color:white;*/
    margin: 0 auto;
}
.header .inner .logo {
    padding-top: 13px;
    float: left;
    margin-right: 40px;

}

.header .inner .logo a{
    display: block;
    width: 120px;
    height:30px;
    background: url(../image/header-small-sprites3.png);
}

.header .inner .logo a h1{
    width: 120px;
    /*把里边的字挤走,里边的字是给搜索引擎看的，不是给用户看的*/
    height: 0px;
    padding-top: 30px;
    overflow: hidden;

}
.header .inner .nav{

    float: left;
}

.header .inner .nav ul li{
    height: 58px;
    float: left;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}
.header .inner .nav ul li a{
    display: block; /*块结构*/
    /*height: 30px; 没明白？？？*/
    height: 54px;
    line-height: 54px;/*压线技术*/
    padding: 0 16px;
    font-size: 14px;
    text-decoration:none;/*去掉超链接下划线*/
    color: #333333;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;

}
/*设置鼠标略过底色和首页的底色*/
/**************************************
.header .inner .nav ul li a:hover,
.header .inner .nav ul li.cur a{
    background-color: #FF9D00;
    color: white;
}
******************************************/
/*设置首页的底色*/

.header .inner .nav ul li.cur a{
    background-color: #FF9D00;
    color: white;
    border-bottom: 2px solid #FF9D00;
}
/*触碰改颜色*/
.header .inner .nav ul li.top_bk:hover{
    border-top: 2px solid #FF9D00;
    
}
.header .inner .nav ul li.top_bk:hover a{
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    height:56px;
}

.header .inner .nav ul li.bottom_bk a:hover{
    border-bottom: 2px solid #FF9D00;
}

posted on 2022-04-28 00:30 jilingxf 阅读(347) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

jilingxf

Web前端基础精品入门（HTML+CSS+JavaScript+JS）[爱前端]听课笔记2：导航条的制作——css学习仿作马蜂窝

导航

公告