学成在线首页案例模仿四（代码全自写的，部分参考）

第一、二栏代码链接：
链接: link.
第三、四栏代码链接：
链接: link.
第五-八栏代码链接：
链接: link.
9. 第九栏
html代码：

<div class="box w rumen">
        <div class="head">
            <h3>牛人推荐</h3>
        </div>
        <div class="box-bd niuren">
            <ul class="clearfix">
                <li>
                    <div class="jieshao">
                        <h4>崔老师 <span>Java EE</span> </h4>
                        <p class="info">
                            从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……
                        </p>
                    </div>
                </li>
                <li>
                    <div class="jieshao">
                        <h4>崔老师 <span>Java EE</span> </h4>
                        <p class="info">
                            从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……
                        </p>
                    </div>
                </li>
                <li>
                    <div class="jieshao">
                        <h4>崔老师 <span>Java EE</span> </h4>
                        <p class="info">
                            从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……
                        </p>
                    </div>
                </li>
                <li>
                    <div class="jieshao">
                        <h4>崔老师 <span>Java EE</span> </h4>
                        <p class="info">
                            从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……
                        </p>
                    </div>
                </li>
                <li>
                    <div class="jieshao">
                        <h4>崔老师 <span>Java EE</span> </h4>
                        <p class="info">
                            从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……
                        </p>
                    </div>
                </li>
                <li class="biyejia">
                    <img src="img/biyeji.png" alt="">
                </li>
                <li>
                    <div class="jieshao">
                        <h4>崔老师 <span>Java EE</span> </h4>
                        <p class="info">
                            从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……
                        </p>
                    </div>
                </li>
                <li>
                    <div class="jieshao">
                        <h4>崔老师 <span>Java EE</span> </h4>
                        <p class="info">
                            从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……
                        </p>
                    </div>
                </li>
                <li>
                    <div class="jieshao">
                        <h4>崔老师 <span>Java EE</span> </h4>
                        <p class="info">
                            从事多年Java软件开发及相关教育工作，熟悉JavaSE、JavaEE、Struts1,2、Spring……
                        </p>
                    </div>
                </li>
            </ul>
        </div>
    </div>

css代码：

.niuren ul li {
    float: left;
    background: url(img/cuilaoshi.png);
}

.jieshao {
    width: 100%;
    height: 104px;
    background:rgba(0, 0, 0,.5);
    margin-top: 167px;
}

.niuren ul li .jieshao h4 {
    font-size: 18px;
    color: #ffffff;
    padding: 21px 0 12px 0
}

.niuren ul li .jieshao .info {
    font-size: 12px;
    color: #ffffff;
    margin-top: -20px;

}

.niuren ul .biyejia {
    width: 472px;
    height: 270px;
}

.niuren ul .biyejia img {
    height: 100%;
}

结果展示：
10.底栏
html代码：

<div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="img/header_logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />
                    © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
                <a href="#" class="app">下载app</a>
            </div>
            <div class="links">
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>新手指南</dt>
                    <dd><a href="#">如何注册</a></dd>
                    <dd><a href="#">如何选课</a></dd>
                    <dd><a href="#">如何拿到毕业证</a></dd>
                    <dd><a href="#">学分是什么</a></dd>
                    <dd><a href="#">考试未通过怎么办</a></dd>
                </dl>
                <dl>
                    <dt>合作伙伴</dt>
                    <dd><a href="#">合作机构</a></dd>
                    <dd><a href="#">合作导师</a></dd>
                </dl>
            </div>
        </div>
    </div>

css代码：

.clearfix {
    *zoom: 1;
}

.clearfix:before,.clearfix:after {
    content: "";
    display: block;
}

.clearfix::after {
    clear: both;
}

.footer {
    height: 275px;
    background-color: #ffffff;
    margin-top: 100px;
}

.footer .w {
    padding-top: 35px;
}

.copyright {
    float: left;
}

.copyright p {
    font-size: 12px;
    color: #666666;
    margin: 20px 0 15px 0 ;
}

.copyright .app {
    display: block;
    width: 118px;
    height: 33px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 33px;
    color: #00a4ff;
    font-size: 16px;
}

.links {
    float: right;
}

.links dt {
    font-size: 16px;
    color: #333333;
    margin-bottom: 5px;
}

.links dl dd a {
    font-size: 12px;
    color: #333333;
}

.links dl {
    float: left;
    margin-left: 100px;
}

结果展示：