HTML&CSS联系 | 易学教程

目标：需要达到的效果

HTML是很简单的，就几个独立的div,如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css_test</title>
        <link type="text/css" rel="stylesheet" href="css/css_test.css"/>
    </head>
    <body>
        <div class="header">
            <ul id="nav">
                <li><a class="navl" href="#">首页</a></li>
                <li><a class="navl" href="#">入口一</a></li>
                <li><a class="navl" href="#">入口二</a></li>
                <li><a class="navl" href="#">入口三</a></li>
            </ul>
        </div>
        <div class="content">
            <div id='menu'></div>
            <div id='news'></div>
        </div>
        <div class="footer"></div>
    </body>
</html>

Css实现效果：

.header{
    background-color: yellowgreen;
    width: 500px;
/*     height: 50px; */
    margin: 0 auto;  /*margin有上下左右4个属性,其中属性可以复制，比如只输入上和左,则下和右就复制上和左的属性值*/
    overflow: hidden;
}

.content{
    /*父元素的高度如果不设置的话，默认是由子元素给撑开的，如果子元素设置了
     *浮动，则需要防止父元素的高度塌陷 
     *使用overflow属性开启元素BFC属性,可以容纳浮动的元素,从而解决父元素高度塌陷的问题
     */ 
    background-color: green;
    width: 500px;
    margin: 10px auto;
    overflow: hidden;
}

#menu{
    background-color: black;
    width: 100px;
    height: 300px;
    margin: 10px auto;  
    float: left;         /*设置浮动，元素会尽量向给定的方向上方浮动*/
}

#news{
    background-color: red;
    width: 400px;
    height: 300px;
    margin: 10px auto;  
    float: left;
}

.footer{
    background-color: #DEB887;
    width: 500px;
    height: 100px;
    margin: 0 auto;
}

/*去除列表样式,并设置内外边框为0*/
#nav{
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* 导航栏中的a标签需要显示为块元素 */
.navl{
    display: block;
    width: 100px;
    float: left;
}

来源：https://www.cnblogs.com/smarttony/p/11982687.html

标签

margin