htmlcss网页导航栏制作代码(如何用html制作导航栏)
急求用HTML,CSS做一个简单导航菜单
div id="nav"
ul
lia href="xxx.com(写上需要连接的URL)"首页/a/li
lia href="xxx.com(写上需要连接的URL)"关于我们/a/li
lia href="xxx.com(写上需要连接的URL)"产品概念/a/li
/ul
/div
照这个写法写应该不会错了，你的太小了，看不清，大概就给你这么写一下了
html框架如何实现左边为导航栏,右边为连接页面,代码写出来
1、首先打开Deamweaver8，新建一网页文件，接着输入以下导航菜单的内容。
2、此时对应效果如图。
3、接下来准备相关的导航按钮图片（可以事先利用PS制作好）。
4、然后将以下CSS代码加入到head/head之间。
5、网页此时的效果如图，就完成了。
我用html做了一个导航栏，代码如下：
ul的父亲是div啊，你把div的内左边内边矩设为0，padding-left：0；试试。
HTML+CSS制作导航条
导航条是一个网站中必不可少的元素，那么如何用HTML和CSS制作一个导航条呢？下面我给大家分享一下。
工具/材料
Sublime Text
01
首先打开Sublime Text软件，新建一个html页面，并且在html页面中准备好html结构，如下图所示
02
接下来我们在html的body结构里添加导航条的内容，如下图所示
03
然后就需要在style标签中用CSS对导航条的样式进行定义了，如下图所示，书写样式的时候一定要注意写在style标签里面
04
最后运行html页面，你就会看到如下图所示的导航条，当鼠标放在某个导航上时，背景色会变成红色
求大神用HTML5和CSS做出这个导航条，求源代码，急求大神帮忙
看看合不合你用
!DOCTYPE?html
html
??
????head
????????meta?charset="UTF-8"
????????title/title
????/head
????style?type="text/css"
????????*?{margin:?0;overflow:?hidden;}
????????i,em,strong{font-style:?normal;}
????????.bar{border-radius:?10px;width:?450px;box-sizing:?;}
????????.sndli?em{display:?block;float:?right;height:?30px;border-right:?1px?dashed?#666;margin:?5px?0?0?0;}
????????a{text-decoration:?none;height:?40px;width:?150px;line-height:?40px;color:?#000000;display:?block;background:-webkit-gradient(linear,?0%?0%,?0%?100%,from(#b8c4cb),?to(#f6f6f8))}
????????ul,li{margin:?0;padding:?0;}
????????.outlili{list-style:?none;float:?left;box-sizing:?border-box;text-align:?center;position:?relative;}
????????.inli?li{list-style:?none;box-sizing:?border-box;text-align:?center;background:#DCDCDC;}
????????ul.inli{display:?none;}
????????.inli0li{float:?left;width:?33%;}
????????.inli0li:hover{background:?#AAA;}
????????ul.outlili.sndli:hoverul{display:?block;}
????/style
????body
????div?class="bar"
????????ul?class="outli"
????????????li?class="sndli"
????????????????a?href="javascript:void(0)"1em/em/a
????????????????ul?class="inli"
????????????????????li
????????????????????????ul?class="inli0"
????????????????????????????li1.1/li
????????????????????????????li1.12/li
????????????????????????????li1.13/li
????????????????????????/ul
????????????????????/li
????????????????????li
????????????????????????ul?class="inli0"
????????????????????????????li1.21/li
????????????????????????????li1.22/li
????????????????????????????li1.23/li
????????????????????????/ul
????????????????????/li
????????????????????li
????????????????????????ul?class="inli0"
????????????????????????????li1.31/li
????????????????????????????li1.32/li
????????????????????????????li1.33/li
????????????????????????/ul
????????????????????/li
????????????????/ul
????????????/li
????????????li?class="sndli"
????????????????a?href="javascript:void(0)"2em/em/a
????????????????ul?class="inli"
????????????????????li
????????????????????????ul?class="inli0"
????????????????????????????li2.1/li
????????????????????????????li2.12/li
????????????????????????????li2.13/li
????????????????????????/ul
????????????????????/li
????????????????????li
????????????????????????ul?class="inli0"
????????????????????????????li2.21/li
????????????????????????????li2.22/li
????????????????????????????li2.23/li
????????????????????????/ul
????????????????????/li
????????????????????li
????????????????????????ul?class="inli0"
????????????????????????????li2.31/li
????????????????????????????li2.32/li
????????????????????????????li2.33/li
????????????????????????/ul
????????????????????/li
????????????????/ul
????????????/li
????????????li?class="sndli"
????????????????a?href="javascript:void(0)"3/a
????????????????ul?class="inli"
????????????????????li
????????????????????????ul?class="inli0"
????????????????????????????li3.1/li
????????????????????????????li3.12/li
????????????????????????????li3.13/li
????????????????????????/ul
????????????????????/li
????????????????????li
????????????????????????ul?class="inli0"
????????????????????????????li3.21/li
????????????????????????????li3.22/li
????????????????????????????li3.23/li
????????????????????????/ul
????????????????????/li
????????????????????li
????????????????????????ul?class="inli0"
????????????????????????????li3.31/li
????????????????????????????li3.32/li
????????????????????????????li3.33/li
????????????????????????/ul
????????????????????/li
????????????????/ul
????????????/li
????????/ul
????/div
????/body
/html
