刚刚接触网页制作，这是我自己写的一些代码，有什么不对的希望大家能给予指导。
片段1
*{ margin:0; padding:0;}
background-color:#feff0b; /* CSS设置背景颜色，*/
background:url(../image/forumMenuBg.jpg) repeat-x;是背景图片沿着X轴重复
#topLogo {
960px;
margin:0px auto;
color:#a3a3a3;
background:#ebebeb url(../image/forumLogo.jpg) 0px 0px no-repeat;
height:82px;
text-align:right; /* text-align 只对行级元素起效果*/
}
/*导航栏分割线，可以使用右边框
#menu li a{
border-right:solid 1px;
}*/
鼠标移上去的样式
#menu li a:hover{
color:#ffffff;
background-color:#da5800;
display:inline-block;
}
片段2
li{
float:left; /*左浮动*/
list-style:none; /*去掉li默认前面的点*/
}
#menu a{
line-height:34px; /*设置文字行高，让文字在整个#menu 高度的垂直中间*/
text-decoration:none; /*去掉a链接默认下划线*/
color:#FFF; /*设置a链接为白色*/
padding:0px 15px; /*利用padding左右的值，拉开每组链接的距离*/
font-size:14px; /*设置文字大小为14px*/
display:block;/*块状显示 使段落生出行内框：*/
}
片段3鼠标经过变色
(1)
function change() {
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () { this.style.backgroundColor = "#cccccc"; }
lis[i].onmouseout = function () { this.style.backgroundColor = "#ff6a00"; }
}
}
(2)
function change() {
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () { this.className = "over"; }
lis[i].onmouseout = function () { this.className = "out"; }
}
}
css
.over {
background-color:#b6ff00;
}
.out {
background-color:#ff6a00;
}
以下知识点来自w3school
CSS display 属性
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。
HTML <nav> 标签
<nav> 标签定义导航链接的部分。
<nav> 标签是 HTML 5 中的新标签。
具体来讲，nav元素可以用于一下场合：
1.传统导航条
2.侧边栏导航
3.内页导航
4.翻页导航
在HTML5中不要用menu元素代替nav元素，nav元素也可以用于其它你觉得重要的、基本的导航链接组。