CSS与DIV的一些基础知识（2）_html/css_WEB-ITnose

margin:外边距，就是这个标签与其他标签之间的距离 padding：内边距，标签内部边距 为了各浏览器的兼容性，最好每次在css文件的顶部加入，只要用到标签就应该加入下面的重置

div,body

{

margin:0;

padding:0;

}

display:block;可将内联元素变成块元素 float:left;浮动，可将块元素排在一行 clear:both 清除浮动 html标签：有序列表 ul 里面的项是 li，ul和li都是块状元素，所以一个元素一行，要并行的话就浮动就可以了 float:left, 默认子项前存在圆点，可用list-style:none;去除（ul中）

• MyHome
• 公司简介
• 公司业务
• 职业发展规划
• 我要应聘
• 在线问答

重置居中：让行高=文字的行高就行，并且text-align:center，如下

#nav ul li

{

float:left;

margin-right:1px;

height:35px;

line-height:35px;

text-align:center;

padding:0 10px;

}

网站中menu的话，按如上设计就可以了（基本结构）

text-decoration:none;表示文字正常样式 text-decoration:underline带下划线

10. 标签：a:hover 是鼠标经过时

下面是经过这两次学习的一个小例子，一个导航条，首先是html方面的部分代码

                  
                 <     div      id     ="nav"     >           <     ul     >           <     li     ><     a      href     ="#"     >     MyHome                <     li     ><     a      href     ="#"     >     个人简介                <     li     ><     a      href     ="#"     >     文档分类                <     li     ><     a      href     ="#"     >     人生发展规划                <     li     ><     a      href     ="#"     >     我要提问                <     li     ><     a      href     ="#"     >     在线问答                                             

之后是，应用到这个div的css代码

                  
                 div,body,ul,li     {      margin     :     0     ;      padding     :     0     ;          }     #nav     {      width     :     960px     ;      height     :     35px     ;      margin     :     0 auto     ;      margin-top     :     35px     ;      background-color     :     #CCC     ;          }     #nav ul     {      width     :     960px     ;      height     :     35px     ;      list-style     :     none     ;          }     #nav ul li     {      float     :     left     ;      margin-right     :     1px     ;      height     :     35px     ;      line-height     :     35px     ;       text-align     :     center     ;            }     #nav ul li a     {       font-size     :     14px     ;      color     :     Black     ;      text-decoration     :     none     ;      padding     :     0 10px     ;      height     :     35px     ;      display     :     block     ;      float     :     left     ;          }     #nav ul li a:hover     {      color     :     White     ;      background     :     #000     }