用html写三个导航条（html做网页导航条代码）
本文目录一览：
怎么用html+css做一个导航条？
首先要建立一个DIV，为其命名为“nav”，在DIV中建立一个ul无序列表，导航共有几个栏目，就为列表添加几个li的列表项，为每个列表项中的内容加上超链接，链接到所需的项目页面。
然后设置CSS样式，为列表规定宽度和高度，去掉列表前面的符号，代码为：
ul {width:宽度值；height：高度值； list-style:none；}
如果是横向导航，还需为里面的列表项li标签设置左浮动的样式，代码为：li {float:left;}
每个栏目之间分隔的距离可通过margin（外边距）属性来设置。
Html网页导航条怎么做，最简练有效的步骤
1打开网站后台
2找到栏目设置，不同的程序位置有所不同，
3进入栏目设置，吧设计好的栏目导航词条 按顺序填写，排序越小也靠前
4填写完毕，一定要保存，然后生成一下，有的程序不需要生成，伪静态的也不需要生成。
5切换到前台，刷新一下就制作完成。
HTML5怎么做导航栏
建议使用FF，Safari，举个例子：
!doctype html
html
head
titleHTML5+CSS3+JavaScript/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
meta http-equiv="Content-Type" content="text/html; charset=gbk" /
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
meta http-equiv="Content-Language" content="zh-cn" /
meta name="Generator" content="EditPlus"
meta name="Author" content=""
meta name="Keywords" content=""
style type="text/css"
body {
behavior: url(ie-css3.htc);
}
* {margin:0 auto;padding:0;}
body {font-size:13px;font-family:Arial;}
ul li {list-style:none;}
#menu {
width:982px;
height:35px;
margin-top:20px;display:block;
background: #e3e3e3;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
-moz-box-shadow: 1px 1px 3px #333;
-webkit-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
-webkit-border-top-left-radius:4px;;
-webkit-border-top-right-radius:4px;
-moz-border-radius-topleft:4px;
-moz-border-radius-topright:4px;
-webkit-border-bottom-left-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-bottomleft:4px;
-moz-border-radius-bottomright:4px;
-o-border-radius:4px;
-khtml-border-radius:4px;
text-shadow: 0 1px 0 white;
}
#menu ul {
margin-left:0;
}
#menu ul li {
display:inline;
}
#menu ul li a:link, a:visited {
text-align:center;float:left;width:6.8em;text-decoration:none;padding:7.5px 0.75em;font-size:16px;font-weight:bold;margin-top:0px;border-right:1px solid #ccc;color: #454545;
}
#menu ul li a:hover {
text-decoration:none;
background:-webkit-gradient(linear, left top, left bottom, from(#333), to(#ccc));
background: -moz-linear-gradient(top, #333, #ccc);
-webkit-background-size:0 35px;
color: #ddd;
text-shadow: 0 1px 0 black;
}
.text {
border:1px solid gray;width:150px;height:17px;position:relative;top:8px;left:13px;font-family:Arial;
-webkit-border-top-left-radius:90px;;
-webkit-border-top-right-radius:90px;
-moz-border-radius-topleft:90px;
-moz-border-radius-topright:90px;
-webkit-border-bottom-left-radius:90px;
-webkit-border-bottom-right-radius:90px;
-moz-border-radius-bottomleft:90px;
-moz-border-radius-bottomright:90px;
-o-border-radius:90px;
-khtml-border-radius:90px;
}
/style
script language="JavaScript" type="text/javascript"
(function()
{
if(!0)
return;
var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog, eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=0,length=e.length;
while(ilength)
{
document.createElement_x(e[i++])
}
})();
/script
/head
body
menu id="menu"form action="index.php" method="get"
ul
lia href="#" title="HomePage"HomePage/a/li
lia href="#" title="Introuduce"Introuduce/a/li
lia href="#" title="Products"Products/a/li
lia href="#" title="My album"My album/a/li
lia href="#" title="Shopping"Shopping/a/li
lia href="#" title="Contact our"Contact our/a/li
/ul
input type="search" class="c9c1-717a-59b0-f148 text" value="search..." //form
/menu
body
html导航条怎么设置？
1、用Dreamweaver新建一个HTML文件;
2、按ctrl+s先保存，以防突然断电数据丢失;
3、修改title为html+css实现横向导航;
4、新建一个div id为“a”，添加ul li标签;
5、在li中添加自己想要的文字 并调整好文字间距,按F12预览，如下图所示:
6、首先去掉字体前面的小黑点，代码如下：
7、预览，如图所示:
8、接下来，使文字横向排列，设置代码如下，给li设置左浮动效果；
9、按F12预览，效果如下：
如图HTML导航条的编写？
上网一搜都会有，下面是我的写法：
鼠标在three上的时候three的背景变色亲
body
style
.demo ul {
list-style: none; /*这里是把ul列表开头自带的"•"给去掉*/
}
.demo {
position: fixed;/*位置固定*/
top: 0%;/*距离顶部零距离，其实就是固定在顶部*/
width: 100%;/*宽度占满浏览器宽度*/
background: yellow;/*背景颜色*/
}
.demo ul li {
float: left;/*列表内容li从左向右横向展示*/
margin-right: 2%;/*每个li之间的间隔为2%*/
overflow: hidden;/*内容过多就会隐藏*/
}
.demo ul li a:hover {
color: rgb(0, 0, 0);/*hover是鼠标覆盖的意思，这里字体颜色变为黑*/
background: rgb(255, 0, 0);/*背景颜色变为红*/
}
.demo ul li a {
text-decoration: none;/*去掉了超链接的下划线*/
}
/style
div class="59b0-f148-129e-d408 demo"
ul
liaone/a/li
liatwo/a/li
liathree/a/li
liafour/a/li
liafive/a/li
liasix/a/li
/ul
/div
/body
亲测可用
