学成在线网页制作（详细）

项目分析

如图：

分为四个模块：

1. header头部模块
2. 精品推荐模块
3. 编程入门模块
4. 数据分析师模块
5. 机器学习模块
6. 前端工程师开发模块
7. footer模块

如果仔细观察的话，第2，5，6属于一个模块，样式结构相同。同样的3，4模块相同，这样只要做出一个另外一个复制黏贴即可。

详细制作

先确定版心，版心的宽度，然后给他封装成类，这样方便后面每个模块的父盒子调用。
初始化一些值：

* {
    margin: 0;
    padding: 0;
}
.ul {
    list-style: none;
}

.w {
    width: 1280px;
}

.fl {
    float: left;
}
// 有一些其他样式的初始化没有弄，不过下面代码都重新设置了，之后再写项目先考虑周全，初始化全一点。

header模块

分析：给header设置一个版心；居中对齐，里面分四个部分，logo,列表，搜索框，user模块；很显然这四个都是块级元素，那么就要给这四个盒子分别一个向左的浮动，user也就是最后一个盒子向右浮动。其他的就是样式了，话不多说上代码。

样式部分：

/* header模块儿开始 */

header {
    height: 42px;
    /* background-color: gray; */
    margin: 20px auto;                    // 上下20px的外间距，左右居中对齐；
}


/* logo模块 */

header .logo {
    width: 195px;
    height: 42px;
    /* background-color: aqua; */
    background-image: url(../images/logo.png);
}


/* nav导航模块 */

header ul {
    margin-left: 70px;
    height: 42px;
    list-style: none;
}

header ul li {
    float: left;
}

header ul li a {
    height: 42px;
    text-decoration: none;
    font-size: 14px;
    color: black;
    padding: 5px 15px;
    line-height: 42px;
    margin-right: 2px;
}

header ul li a:hover {
    color: skyblue;
    border-bottom: 2px solid skyblue;
}
/* header模块结束 */

结构部分：

<!-- header模块开始 -->
    <header class="w">
        <!-- logo模块 -->
        <div class="logo fl">
        </div>
        <!-- nav导航模块 -->
        <ul class="fl">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">课程</a>
            </li>
            <li>
                <a href="#">职业规划</a>
            </li>
        </ul>
        <!-- 搜索模块 -->
        <div class="search fl">                
            <input type="search" class="sousuo fl" placeholder="请输入课程名称">
            <button class="fl"></button>
        </div>
        <!-- 用户模块 -->
        <div class="user">
            <img src="./images/user.png" alt="">
            <span>qq-leishui</span>
        </div>
    </header>
    <!-- head模块结束 -->

banner模块

分析：设置一个父盒子，宽度不用给，给它添加一个蓝色背景，底色有了以后，再创建一个子盒子，给它版心的宽度，居中对齐，在子盒子里面放两个小盒子，一个左浮动，一个右浮动，左边浮动的盒子里面放一个无序列表，右边盒子里放三个模块，头部盒子，下面放一个列表，最下面放一个盒子。
代码如下：
样式：

/* banner模块开始 */

.banner {
    height: 420px;
    background-color: #1c036c;
}

.lunbo {
    width: 1280px;
    margin: 0 auto;
    height: 420px;
    background: url(../images/banner2_20190819_210028.png) no-repeat center top;
}


/* 左侧侧边栏导航 */

.lunbo .subnav {
    float: left;
    width: 150px;
    height: 420px;
    background-color: rgb(0, 0, 0, .3);
    padding: 0 20px;
}

.lunbo .subnav ul {
    list-style: none;
}

.lunbo .subnav ul li {
    height: 45px;
    line-height: 45px;
}

.lunbo .subnav ul li a {
    text-decoration: none;
    color: aliceblue;
}

.lunbo .subnav ul li span {
    float: right;
}

.lunbo .subnav ul li a:hover {
    color: aqua;
}


/* 左侧侧边栏导航结束 */


/* 右侧课程模块 */

.lunbo .course {
    float: right;
    width: 230px;
    height: 300px;
    margin-top: 50px;
    background-color: #ffffff;
}

.course .kechengbiao {
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #9bceea;
    color: white;
}

.course .chengxusheji {
    /* background-color: #9bceea; */
    height: 250px;
    padding: 0 20px;
}

.course .chengxusheji h4 {
    color: #5a5a5a;
    font-weight: 400;
    font-size: 16px;
}

.course .chengxusheji p {
    font-size: 12px;
    color: #b1b1b1;
}

.course .chengxusheji ul {
    list-style: none;
}

.course .chengxusheji ul li {
    padding: 10px 0;
    border-bottom: 1px dotted black;
}

.course .chengxusheji a {
    display: block;
    border: 1px solid #00a4ff;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #00a4ff;
    text-decoration: none;
    margin-top: 15px;
    font-weight: 700;
}
/* 右边课程模块结束 */
/* banner模块结束 */

结构：

<!-- banner模块开始 -->
    <div class="banner">
        <div class="lunbo">
            <!-- 左侧侧边栏导航 -->
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发 <span>&gt;</span></a></li>