ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

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

2022-04-28 01:03:28  阅读：213  来源： 互联网

标签：Web 仿作 ul 前端 li header nav inner height


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

image


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

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

pandding:0 10px;

image

实现如下

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）菜单栏里的“首页”中首页效果处理，加背景，文字改颜色

image

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

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

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

image

方案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）原网页中有image的选项，触碰的时候两边有边框2px的细线，但是没有楔形


image

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


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

image

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

左右边框加给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;
}

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

image

改变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;
}


image

标签：Web,仿作,ul,前端,li,header,nav,inner,height
来源： https://www.cnblogs.com/jilingxf/p/16201268.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有