网页首页布局 布局案例：通用的头部和底部

 <!-- 头部 -->
    <div class="header">
        <!-- 头部内容区 -->
        <div class="content">
            <div class="nav">
                <li class="item"><a href="">首页</a></li>
                <li class="item"><a href="">公司新闻</a></li>
                <li class="item"><a href="">最新产品</a></li>
                <li class="item"><a href="">关于我们</a></li>
                <li class="item"><a href="">联系我们</a></li>
            </div>
        </div>
    </div>


    <!-- 主体 -->
    <div class="container">主体</div>

    <!-- 底部 -->
    <div class="footer">
        <div class="content">
            <p>
                <a href="">&copy;php中文网版本所以</a> &nbsp; | &nbsp;
                <a href="">0551-666***999</a> &nbsp; | &nbsp;
                <a href="">院ICP备1837303121</a>
            </p>
        </div>
    </div>

body {
   
    /* border: 1px solid red; */
    margin: ;
}

.header {
   
    background-color: lightgray;
}

.header .content {
   
    width: 90%;
    background-color: black;
    margin: 0 auto;
    height: 60px;
}


/* 头部中的导航 */

.header .content .nav {
   
    /* 清空ul默认样式 */
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}

.header .content .nav .item {
   
    list-style: none;
}

.header .content .nav .item a {
   
    float: left;
    min-height: 60px;
    min-width: 80px;
    /* 水平居中 */
    text-align: center;
    /* 垂直居中 */
    line-height: 60px;
    /* d导航前景色 */
    color: white;
    padding: 0 15px;
    /* 去掉a标签的默认下划线 */
    text-decoration: none;
}

.header .content .nav .item a:hover {
   
    background-color: red;
    font-size: 1.1em;
}


/* 主体 */

.container {
   
    width: 90%;
    min-height: 800px;
    background-color: lightgray;
    margin: 5px auto;
}

.footer {
   
    background-color: lightgray;
}

.footer .content {
   
    width: 90%;
    background-color: #444444;
    height: 60%;
    margin: 0 auto;
}

.footer .content p {
   
    text-align: center;
    /* 垂直居中 */
    line-height: 60px;
}

.footer .content p a {
   
    color: #999999;
    text-decoration: none;
}

.footer .content p a:hover {
   
    color: white;
}

布局案例:通用的双飞翼布局

   <!-- 头部 -->
    <div class="header">
        <!-- 头部内容区 -->
        <div class="content">
            <div class="nav">
                <li class="item"><a href="">首页</a></li>
                <li class="item"><a href="">公司新闻</a></li>
                <li class="item"><a href="">最新产品</a></li>