马蜂窝的首页是非常正能量 ，青春的网页 ，首页非常大气
logo在上一篇我们已经制作好 ，现在我们开始制作导航条
这个导航条字数不等 ，宽窄不一致 ，就是所有的li不一样宽 ，字多就宽 ，字少就窄 ，需要用padding去撑
pandding:0 10px;
实现如下
1 、index.html里body->header->innetr下添加菜单的内容
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;
}
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
