HTML+CSS制作导航条

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

创新互联建站长期为上1000家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为北戴河企业提供专业的网站设计制作、成都网站建设，北戴河网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

工具/材料

Sublime Text

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

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

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

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

CSS样式制作导航条的步骤

一、定义一个盒子（“menu”）,用来装这个导航的。

二、用无序列表（ul）中的列（li）放导航的内容。

三、把li的浮动（float）设置为向左浮动（float：left；），这样，就实现了水平导航条了。

四、在做其他的一些修饰。（下面我给我弄的一个简单的导航条给你理解）

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=utf-8" /

title无标题文档/title

style type="text/css"

#menu{

width:500px;

margin:0 auto; /*令盒子居中*/

font-size:20px; /*定义字体的大小*/

}

ul{

margin:0; padding:0; /*把浏览器默认的间隔去掉*/

list-style:none; /*把前面的序列号去掉*/

}

li{

float:left; /*向左浮动，这个是实现水平的重要步骤！！*/

padding:0 15px; /*li里面的字体和边框的距离*/

}

a{

text-decoration:none; /*去掉超链接的下划线*/

color:#333; /*超链接的字体颜色*/

}

a:hover{

color:#696;

}

/style

/head

body

div id="menu"

ul

lia href="#"菜单1/a/li

lia href="#"菜单1/a/li

lia href="#"菜单1/a/li

lia href="#"菜单1/a/li

/ul

/div

/body

/html

[img]

用css定义一条导航栏

css定义一条导航栏

首先建立一个DIV，为其命名为“nav”，在DIV中建立一个ul无序列表，导航共有几个栏目，就为列表添加几个li的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。

然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：

ul {width:宽度值；height：高度值； list-style:none；}

如果是横向导航，还需为里面的列表项li标签设置左浮动的样式，代码为：li {float:left;}

每个栏目之间分隔的距离可通过margin（外边距）属性来设置。

导航条的更多样式及详细步骤可去这里参考

CSS导航条如何添加汉堡条

一、 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="#"spanFree 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实现了点击按钮下拉菜单出现的功能

网站名称：css导航条样式,导航栏特效代码css
当前URL：http://kswjz.com/article/dsopisc.html