HTML+CSS制作导航条

导航条是一个网站中必不可少的元素，那么如何用HTML和CSS制作一个导航条呢？下面我给大家分享一下。

工具/材料

Sublime Text

首先打开SublimeText软件，新建一个html页面，并且在html页面中准备好html结构，如下图所示

接下来我们在html的body结构里添加导航条的内容，如下图所示

然后就需要在style标签中用CSS对导航条的样式进行定义了，如下图所示，书写样式的时候一定要注意写在style标签里面

最后运行html页面，你就会看到如下图所示的导航条，当鼠标放在某个导航上时，背景色会变成红色

一、 head里添加meta移动端的样式

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<div class="nav">

<!--汉堡logo menu--> <label for="toggle">☰</label>

<input type="checkbox" id="toggle">

<div class="menu">

<a href="#">Business</a>

<a href="#">Service</a>

<a href="#">Learn more</a>

<a href="#"><span>Free Trial</span></a>

</div></div>

这个汉堡包menu菜单样子其实有代码实现的 "☰" 而且是作为字体显示的，可以直接用font-size直接调整大小

二、css样式 -通用

body{

width: 100%

height: 100%

margin:0 //浏览器默认的body的margin是8px由浏览器的user-agent-stylesheet提供的。所以我们直接覆盖默认就可以了，

}

html{

font-family:'helvetica neue',sans-serif //可以写很多种字体样式，意思是浏览器自己一个个识别，前一个没有就看后一个，一直往后找，直到找到可以用的

}.nav{

float: right

text-align: right

height: 70px

line-height: 70px

border-bottom: 1px solid #eaeaea

}

label{

display: none

}

#toggle{

display:none

}

.menu a{

margin: 0 10px

text-decoration: none

color: gray

}

.menu{

margin: 0 30px 0 0

}

.menu a span{

color:#54d17a

}

//添加@media样式：

@media only screen and (max-width: 500px) {

label{

display: block

cursor: pointer

width: 26px

float: right

}

.menu{

width: 100%

display: none

text-align: center

}

.menu a{

display: block

clear:right

}

#toggle:checked + .menu{ //这是个技术点

transition:all 0.4s ease-in

display: block

}

}

label用for绑定的input，自带了点击事件，点击了label的哪个汉堡logo,input就checked，这样就利用纯CSS实现了点击按钮下拉菜单出现的功能

---