CSS与DIV的一些基础知识（2）

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

div,body

{

    margin:0;

    padding:0;

}

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

<ul>

            <li>MyHome</li>

            <li>公司简介</li>

            <li>公司业务</li>

            <li>职业发展规划</li>

            <li>我要应聘</li>

            <li>在线问答</li>

</ul>

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

#nav ul li

{

        float:left;

        margin-right:1px;

        height:35px;

        line-height:35px;

        text-align:center;

    padding:0 10px;

}

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

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

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

 

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

 

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

 

  之后是，应用到这个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
}