html菜鸟教程导航栏,html导航栏代码
谁会html导航栏（如下代码） 怎么改成外部宽度100%，内部文字链接距离左端远一点？
style type="text/css"
body,ul,li,h3,h4,p,h1{margin:0px;padding:0px;font-size:12px;line-height:20px;}
img{border:0px;}
li{list-style:none;}
.nav{width:100%;margin:0 auto;}
.menu7 { margin:0 auto; list-style:none; height:35px; background:#fff url(menu7img/button1.gif); position:relative; border:1px solid #626262; border-width:0 1px; border-bottom:1px solid #444;width:960px;}
.menu7 li {float:left;}
.menu7 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none; font-size:12px; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 8px; cursor:pointer;}
.menu7 li a b {float:left; display:block; padding:0 16px 0 8px;}
.menu7 li.current a {color:#fff; background:url(menu7img/button3.gif);}
.menu7 li.current a b {background:url(menu7img/button3.gif) no-repeat right top;}
.menu7 li a:hover {color:#fff; background:#000 url(menu7img/button4.gif);}
.menu7 li a:hover b {background:url(menu7img/button4.gif) no-repeat right top;}
.menu7 li.current a:hover {color:#fff; background:#000 url(menu7img/button3.gif); cursor:default;}
.menu7 li.current a:hover b {background:url(menu7img/button3.gif) no-repeat right top;}
/style
div class="nav"
ul class="menu7"
lia href="#nogo"b首页/b/a/li
lia href="#nogo"b免费模板/b/a/li
lia href="#nogo"b网络营销教程/b/a/li
lia href="#nogo"b电子商务外包/b/a/li
li class="current"a href="#nogo"b免费模板/b/a/li
lia href="#nogo"b关于我们/b/a/li
/ul
/div
HTML初学菜鸟求教
HTML5学习路线可以分为3个阶段：了解HTML5、熟练掌握HTML5、精通HTML5；
Tips：HTML5此处指的是HTML、CSS、JavaScript以及HTML5和CSS3（新增的）
首先，先了解一下HTML5
可以去HTML5学堂了解一下HTML5是什么，HTML5能够做什么以及HTML5行业的状态，在已了解的基础上去发现自己是否喜欢和适合HTML5这个职业。
大概时间：2~3天
其次学习HTML与CSS
在一些机构培训当中，全日制，每天学8个小时，也需要学习1~1.5个月，而且学不完整不扎实。
自学的情况下，折算相应时间即可，另外需要注意，自学时选择合适的书籍进行学习，会相对高效一些。
选择好的学习资源（主要看知识逻辑、表达方式等），才能够更好的去吸收知识，学习时间成本也会低一些。
资源推荐：
HTML+CSS方面的可以去看《HTML5布局之路》；
JavaScript方面的可以去看《Head First JavaScript》，它比较适合入门；
最后是JavaScript，原生JS、AJAX、jQuery，差不多也得需要2~3个月（每天8小时）
至于说精通~~~对HTML5技术领域有深刻的研究与认知，能够根据自身的开发经验与项目经验构建自己的前端框架或者工具。最起码3~5年甚至更长，其前提还是不断深入研究，而非“工具式”的使用。
菜鸟教程-HTML
!DOCTYPE html声明为html5文档，有助于浏览器正确显示网页
html元素是html页面的根元素
head元素包含了文档的元数据，如定义网页编码格式
title元素描述了文档的标题
body元素包含了可见的页面内容
h1元素定义一个大标题
p元素定义一个段落
注：在浏览器的页面上使用键盘的F12按键开启调试模式，就可以看到组成标签
“HTML 标签”和“HTML 元素”通常是描述同样的意思，但是严格来说，一个HTML元素包含了开始标签和结束标签。只有body区域才会在浏览器中显示。
标题是通过h1-h6标签来定义的，字号逐渐减小。
HTML链接是通过标签a来定义的，在href中指定链接的地址。
图像是通过img来定义的，图像的名称和尺寸是以属性的形式来提供的。
HTML文档由HTML元素定义。
DREAMWEAVER添加什么代码使得这个导航栏文字居中
先插入一个表格，那表格中就会有若干个单元格。 然后有两个方法： 1.用phoposhop修改图片，在图片上写上文字，然后插入到网页的单元格中 2.就是把图片作为那个单元格的背景，再在单元格中输入文字即可。把图片做为背景要注意，把单元格的大小与图片的大小设置成一样大小。 单元格的属性栏？单击单元格后下方就自然显示出来啦，再点击属性栏左上方的td标签，那样，这个单元格就已经被选中了。 如果属性栏还没有显示出来，就要按Ctrl+f3或点击 标题栏的窗口按钮-属性（点击属性即可）--此为dreamweaver8中的操作方式，其他应该也是差不了太多的
怎么用HTML+CSS实现横向2级导航栏，谢谢了啊！！
这个不太好实现。标签的伪类focus可以很好的实现这种效果，但是在IE6下只支持a的伪类hover、active、visited、link。其他的标签在IE6下都没有伪类。所以建议用js，如果是闲来无事可以试一下。
html导航栏,这种类型的怎么写！？
这个只是一个图标字体，一般要结合js点击或者经过触发事件。
代码：
head
meta?charset='utf-8'?/
titleHTML调试/title
script?type="text/javascript"?src="js/jquery-1.8.0.min.js"/script
script?src='js/zui.min.js'?type='text/javascript'?charset='utf-8'/script
link?rel='stylesheet'?type='text/css'?href='css/zui.css'?/
style?type="text/css"
body,
div,
ul,
li?{
margin:?0;
padding:?0;
}
body?{
font-family:?"微软雅黑",?Arial,?Helvetica,?sans-serif;
color:?#333333;
line-height:?25px;
font-size:?14px;
}
a:link,
a:visited?{
text-decoration:?none;
color:?#333333;
}
a:hover?{
text-decoration:?underline;
color:?#08A5E0;
text-decoration:?none;
}
ul,
ul?li?{
list-style-type:?none;
}
.cl?{
zoom:?1;
}
.navbg?{
height:?40px;
width:?100%;
background:?#08A5E0;
box-shadow:?1px?1px?7px?#999;
position:?absolute;
z-index:?99;
left:?0;
}
#navul?li?{
float:?left;
margin-right:?1px;
width:?100px;
height:?40px;
position:?relative;
text-align:?center;
line-height:?40px;
}
#navul?li.navhome?{
text-align:?left;
padding:?0?0px?0?40px;
width:?100px;
}
#navul?li?a:link,
#navul?li?a:visited?{
color:?#FFFFFF;
}
#navul?li?ul?{
display:?none;
position:?absolute;
z-index:?10000;
top:?38px;
left:?-1px;
background:?#006D96;
border:?#004E6C?1px?solid;
border-bottom:?none;
}
#navul?li?ul?li?{
display:?block;
width:?98px;
float:?none;
margin-right:?0px;
height:?28px;
position:?relative;
line-height:?28px;
border-bottom:?#004E6C?1px?solid;
font-size:?12px;
}
#navul?li.navmoon?{
background:?#006D96;
border:?#004E6C?1px?solid;
width:?98px;
height:?38px;
line-height:?38px;
}
#navul?li.navmoon?a?{
color:?#FFFFFF;
}
#navul?li.navhome?a:hover?{
color:?#FCFF00;
}
#navul?li.navmoon?ul?{
display:?block;
}
#navul?li.navmoon?ul?a?{
display:?block;
width:?98px;
height:?28px;
line-height:?28px;
}
#navul?li.navmoon?ul?a:hover?{
background:?#000000;
}
/style
/head
body
div?class="navbg"
ul?id="navul"?class="cl"
li?class="navhome"
a?href=""?target="_blank"HOME/a
/li
li
a?href=""?title="Html"Html/a
ul
li
a?href=""?title="HTML"HTML/a
/li
li
a?href=""?title="HTML5"HTML5/a
/li
/ul
/li
li
a?href=""?title="CSS"CSS/a
ul
li
a?href=""?title="CSS入门"CSS入门/a
/li
li
a?href=""?title="CSS工具"CSS工具/a
/li
li
a?href=""?title="CSS技巧"CSS技巧/a
/li
li
a?href=""?title="CSS实例"CSS实例/a
/li
li
a?href=""?title="CSS3"CSS3/a
/li
li
a?href=""?title="CSS?hack"CSS?hack/a
/li
li
a?href=""?title="CSS2.0?手册"CSS2.0?手册/a
/li
/ul
/li
li
a?href=""?title="网页特效"网页特效/a
ul
li
a?href=""?title="导航菜单"导航菜单/a
/li
li
a?href=""?title="表单按钮"表单按钮/a
/li
li
a?href=""?title="表格图层"表格图层/a
/li
li
a?href=""?title="图片特效"图片特效/a
/li
li
a?href=""?title="滚动特效"滚动特效/a
/li
li
a?href=""?title="文字特效"文字特效/a
/li
li
a?href=""?title="时间日期"时间日期/a
/li
li
a?href=""?title="窗口特效"窗口特效/a
/li
li
a?href=""?title="鼠标特效"鼠标特效/a
/li
/ul
/li
li
a?href=""?title="前端资讯"前端资讯/a
ul
li
a?href=""?title="用户体验"用户体验/a
/li
li
a?href=""?title="前端观察"前端观察/a
/li
li
a?href=""?title="职业生涯"职业生涯/a
/li
/ul
/li
li
a?href=""?title="前端技巧"前端技巧/a
ul
li
a?href=""?title="布局技巧"布局技巧/a
/li
li
a?href=""?title="网页字体"网页字体/a
/li
li
a?href=""?title="flash"flash/a
/li
/ul
/li
li
a?href=""?title="杂七杂八"杂七杂八/a
ul
li
a?href=""?title="帝国cms"帝国cms/a
/li
li
a?href=""?title="电脑技巧"电脑技巧/a
/li
li
a?href=""?title="随笔杂谈"随笔杂谈/a
/li
/ul
/li
li
a?href=""?title="Javascript"Javascript/a
ul
li
a?href=""?title="Jquery"Jquery/a
/li
li
a?href=""?title="Js学习"Js学习/a
/li
li
a?href=""?title="Js教程"Js教程/a
/li
/ul
/li
li
a?href=""?title="网站优化"网站优化/a
ul
li
a?href=""?title="SEO杂谈"SEO杂谈/a
/li
li
a?href=""?title="站长工具"站长工具/a
/li
li
a?href=""?title="经验分享"经验分享/a
/li
/ul
/li
li?style="width:?50px;"
a?href=""?title="更多"i?class="icon?icon-align-justify"/i/a
ul
li
a?href=""?title="SEO杂谈"更多1/a
/li
li
a?href=""?title="更多2"更多2/a
/li
li
a?href=""?title="更多3"更多3/a
/li
/ul
/li
/ul
/div
script?type="text/javascript"
$(window).load(function()?{
$(".navbg").capacityFixed();
});
$(function()?{
$("#navul??li").not(".navhome").hover(function()?{
$(this).addClass("navmoon")
},?function()?{
$(this).removeClass("navmoon")
})
var?maxwidth?=?580;
$(".news_text?img").each(function()?{
if($(this).width()??maxwidth)?{
$(this).width(maxwidth);
}
});
});
function?$tomato(id)?{
return?document.getElementById(id);
}
function?runCode(obj)?{
var?winname?=?window.open('',?"_blank",?'');
winname.document.open('text/html',?'replace');
winname.document.writeln(obj.value);
winname.document.close();
}
(function($)?{
$.fn.capacityFixed?=?function(options)?{
var?opts?=?$.extend({},?$.fn.capacityFixed.deflunt,?options);
var?FixedFun?=?function(element)?{
var?top?=?opts.top;
element.css({
"top":?top
});
$(window).scroll(function()?{
var?scrolls?=?$(this).scrollTop();
if(scrolls??top)?{
if(window.XMLHttpRequest)?{
element.css({
position:?"fixed",
top:?0
});
}?else?{
element.css({
top:?scrolls
});
}
}?else?{
element.css({
position:?"absolute",
top:?top
});
}
});
element.find(".close-ico").click(function(event)?{
element.remove();
event.preventDefault();
})
};
return?$(this).each(function()?{
FixedFun($(this));
});
};
$.fn.capacityFixed.deflunt?=?{
right:?0,
top:?25
};
})(jQuery);
/script
/body
结果：