【网页设计】学成在线案例

news2024/11/28 0:40:00

Demo

        典型的企业级网站，目的是为了整体感知企业级网站的布局流程，复习以前知识。

        集合代码见文章最后。

5.1 准备素材和工具

  1. 学成在线 PSD 源文件。
  2. 开发工具 = PS（切图） + sublime（代码） + chrome（测试）。

5.2 案例准备工作

这一部分是建立整个 project 的结构的

  1. 我们本次采取结构与样式相分离思想：
  2. 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。
  3. study 目录内新建 images 文件夹，用于保存图片。
  4. 新建首页文件 index.html（ 以后网站首页统一规定为 index.html )。
  5. 新建 style.css 样式文件。我们本次采用外链样式表。
  6. 将样式引入到我们的 HTML 页面文件中。
  7. 样式表写入清除内外边距的样式，来检测样式表是否引入成功。
<!-- 引入样式表 --> 
<head>
    <link rel="stylesheet" href="style.css">
</head>

5.3 CSS 属性书写顺序

个人代码能力的专业性，体现在代码的规范标准，优雅，高质量等中。

  1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
  4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc {
    <!-- 布局定位属性 --> 
    display: block;
    position: relative;
    float: left;
    <!-- 盒子自身属性 --> 
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    <!-- 文本属性 --> 
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    <!-- 其他属性 --> 
    <!-- 这里的 background 属性使用了 rgba，是 CSS3 的一种使用方法 --> 
    background: rgba(0,0,0,.5);
    border-radius: 10px;
}

5.4 页面布局分析

为了提高网页制作的效率，布局时通常有以下的布局流程：

  1. 必须确定页面的版心（可视区），我们测量可得知。
  2. 分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成的。（第一准则）
  3. 一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置。（第二准则）
  4. 制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
  5. 所以，先理清楚布局结构，再写代码尤为重要。这需要我们多写多积累。
  6. 开始运用盒子模型的原理，通过 DIV+CSS 布局来控制网页的各个模块。

5.5 确定版心

这个页面的版心是 1200 像素，每个版心都要水平居中对齐，可以定义版心为公共类：

.w {
    width: 1200px;
    margin: auto;
}

5.6 头部制作 

  • 1 号是版心盒子 header 1200 * 42 的盒子水平居中对齐，上下给一个 margin 值就可以
  • 版心盒子里面包含 2 号盒子 logo
  • 版心盒子里面包含 3 号盒子 nav 导航栏
  • 版心盒子里面包含 4 号盒子 search 搜索框
  • 版心盒子里面包含 5 号盒子 user 个人信息
  • 注意：要求里面的 4 个盒子必须都是浮动

注：这里文字在中间可以有两种思路（这里采用第一种）
        1. 盒子大小与内部盒子最大高度相同，再给上 8 个像素，下 8 个像素隔开
        2. 也可以把盒子高度设置成占满，通过调整内部的行高来隔开

内部制作部分分 logo，navy，search，user 部分。

logo
        这部分只需要设置好盒子的大小，嵌入图片即可

navy
        导航栏注意点：实际开发中，我们不会直接用链接 a 而是用 li 包含链接 (li+a) 的做法。

  • li+a 语义更清晰，一看这就是有条理的列表型内容
  • 如果直接用 a，搜索殷勤容易辨别为有堆砌关键字的嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名。

        注意：

  1. 让导航栏一行显示，给 li 加浮动，因为 li 是块级元素，需要一行显示
  2. 这个 nav 导航栏可以不给宽度，将来可以继续添加其余文字
  3. 因为导航栏里面文字不一样多，所以最好给链接 a 左右 padding 撑开盒子，而不是设置宽度

        其中，观察到 “首页” 下面有条横线，这是典型的鼠标经过的标签，所以添加关于 hover 的声明。 

search
        search 搜索框：一个 search 大盒子里面包含 2 个表单

        这里有个小主意，input 文本框右侧的边框可以去掉，和 button 按钮连接在一起。
        同时在设置 “输入关键词” 的 padding 值的时候，会撑大盒子，此时大盒子的宽度要减去这部分。
        button 有个默认的边框，这部分需要删除。同时在初步写的时候，会发现 bottom 掉下来了。这是因为 input 文本框和 button 按钮都是行内块元素，之间有个默认的间隙。解决方法是，对两者都声明浮动。
        button 的图片声明成背景（因为占满了整个盒子）。

user
        内容直接将图片嵌入，加上文字即可。
        格式需要设置文字大小，颜色，右边距。关于如何将文字和图片对齐居中，后面会具体单开一篇讲。

<!-- 1.头部区域开始啦 -->
    <div class="header w">
        <!-- logo部分 -->
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
        <!-- 导航栏部分 nav -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 搜索模块 -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
        <!-- 用户模块 -->
        <div class="user">
            <img src="images/user.png" alt="">
            qq-lilei
        </div>
    </div>
<!-- 头部区域结束啦 -->
body {
    background-color: #f3f5f7;
}
<!-- li 太多了，去掉前面的原点可以统一声明 --> 
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.header {
    height: 42px;
    /* background-color: pink; */
    /* 注意此地方会层叠 w 里面的margin */
    margin: 30px auto;
}
.logo {
    float: left;
    width: 198px;
    height: 42px;
}
.nav {
    float: left;
    margin-left: 60px;
}
.nav ul li {
    float: left;
    margin: 0 15px;
}
.nav ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;   
}
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff;
}
/* search搜索模块 */
.search {
    float: left;
    width: 412px;
    height: 42px;
    margin-left: 70px;
}
.search input {
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0;
    color: #bfbfbf;
    font-size: 14px;
    padding-left: 15px;
}
.search button {
    float: left;
    width: 50px;
    height: 42px;
    /* 按钮button默认有个边框需要我们手动去掉 */
    border: 0;
    background: url(images/btn.png);
}
.user {
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
}

5.7 banner 制作

  • 1 号盒子是通栏的大盒子 banner，不给宽度，给高度，给一个蓝色背景
  • 2 号盒子是版心，要水平居中对齐
  • 3 号盒子版心内，左对齐 subnav 侧导航栏
  • 4 号盒子版心内，右对齐 course 课程

版心
        这里注意，对中间版心盒子背景图片的声明需要添加对应声明，使背景图片不需要重复，且居中。

subnavy
        很典型的列表，注意盒子大小、背景颜色（半透明黑色）、文字大小颜色等样式即可。
        需要注意，这里给 padding 值没有撑开盒子的原因，是因为没有给盒子宽度。
        比较有意思的是右侧的小三角，写法可以如下：再给个小盒子，里面装着这个小三角，让他居右即可。
        对于鼠标经过的标签不要漏掉。

course
        对盒子要声明右浮动，再声明一个 margin-top 值即可。
        此时有个问题，按照上一章的讲解，我复合盒子中多个 margin-top 值的声明会导致塌陷，但这里并没有？这是因为浮动的盒子不会有外边距合并问题。
        对于上下两个模块，则可以如下：上模块用 h2 声明；下面的 bd 模块再分两个部分，继续学习用常见的 ur li 即可，全部课程则是用链接 a 来做。
        对下模块，课程名字可以采用 h4，正在学习则使用正常文字。中间的分隔线当做 li 的下边框即可。
        全部课程盒子的大小要考虑边框（1px），与上面 li 的下边框边距用 margin-top 隔开。

<!-- 2. banner部分start -->
    <div class="banner">
        <!-- 版心 -->
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发 <span> &gt; </span></a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                </ul>
            </div>

            <!-- course 课程表模块 -->
            <div class="course">
                <h2>我的课程表</h2>
                <div class="bd">
                    <ul>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                    </ul>

                    <a href="#" class="more">全部课程</a>
                </div>
            </div>
        </div>
    </div>
<!-- banner部分end -->
/* banner区域 */
.banner {
    height: 421px;
    background-color: #1c036c;
}
.banner .w {
    height: 421px;
    background: url(images/banner2.png) no-repeat top center;
}
.subnav {
    float: left;
    width: 190px;
    height: 421px;
    background: rgba(0,0,0, 0.3);
}
.subnav ul li {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}
.subnav ul li a {
    font-size: 14px;
    color: #fff;
}
.subnav ul li a span {
    float: right;
}
.subnav ul li a:hover {
    color: #00a4ff;
}
.course {
    float: right;
    width: 230px;
    height: 300px;
    background-color: #fff;
    /* 浮动的盒子不会有外边距合并的问题 */
    margin-top: 50px;
}
.course h2 {
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
}
.bd {
    padding: 0 20px;
}
.bd ul li {
    padding: 14px 0;
    border-bottom: 1px solid #ccc;
}
.bd ul li h4 {
    font-size: 16px;
    color: #4e4e4e;
}
.bd ul li p {
    font-size: 12px;
    color: #a5a5a5;
}
.bd .more {
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;
    margin-top: 5px;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-size: 16px;
    font-weight: 700;
}

5.8 精品推荐小模块

  • 大盒子水平居中 goods 精品，注意此处有个盒子阴影
  • 1 号盒子是标题 H3 左侧浮动
  • 2 号盒子里面放链接左侧浮动， goods-item 距离可以控制链接的左右外边距（注意行内元素只给左右内外边距）
  • 3 号盒子右浮动 mod 修改

        good 的宽度继承整体，但是高度要单独声明。同时不要忘记与上面模块的间隙 margin-top 参数的设置。
        “精品推荐” 可用 h3 标签，后面部分则继续采用 ur li 的格式，“修改兴趣” 则是正常文字。注意都要声明浮动。
        垂直居中的声明建议对整体声明行高，通过继承使内部文字垂直居中。左边距对 h3 声明，右边距对 mod 声明即可。
        内部文字左右间距声明 padding 即可。小竖线当做每个小 li 的左边框是很聪明的做法。

<!-- 3.精品推荐模块开始 -->
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
<!-- 精品推荐模块结束 -->
/* 精品推荐模块 */
.goods {
    height: 60px;
    background-color: #fff;
    margin-top: 10px;
    box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1);
    /* 行高会继承， 会继承给3个孩子 */
    line-height: 60px;
}
.goods h3 {
    float: left;
    margin-left: 30px;
    font-size: 16px;
    color: #00a4ff;
}
.goods ul {
    float: left;
    margin-left: 30px;
}
.goods ul li {
    float: left;
}
.goods ul li a {
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
    border-left: 1px solid #ccc;
}
.mod {
    float: right;
    margin-right: 30px;
    font-size: 14px;
    color: #00a4ff;
}

5.9 精品推荐大模块

        这部分和讲解浮动时举得例子很相似，即上下布局。由于已经做过很相似的，这里说明简要点。

  • 1 号盒子为最大的盒子， box 版心水平居中对齐
  • 2 号盒子为上面部分，box-hd -- 里面左侧标题 H3 左浮动，右侧链接 a 右浮动
  • 3 号盒子为底下部分，box-bd -- 里面是无序列表，有 10 个小 li 组成
  • 小 li 外边距的问题，这里有个小技巧：给 box-hd 宽度为 1215 就可以一行装开 5 个 li

        复习点：我们用到清除浮动，因为 box-hd 里面的盒子个数不一定是多少，所以我们就不给高度了，但是里面的盒子浮动会影响下面的布局，因此需要清除浮动。

        最上边的 box 中，“精品推荐” 声明左浮动，“查看全部” 声明有浮动。头部边距，文字大小及颜色参照示意图声明即可。
        核心部分采用 10 个 li 即可，要记得对每个 li 的浮动，右边距声明即可。此时发现每一行都只能装 4 个，第 5 个会掉出来，原因是父亲装不下了，每一行最后一个 li 的右边距要取消。此时我们发现，如果有 n 行，就要对第 5*n 个单独声明右边距，随着行数增多，这是越来越麻烦的，所以这里有另外一个策略：把 li 的父亲 ul 修改足够宽到一行能装开 5 个盒子即可（不要过大，防止能装下第 6 个），这里是大于 5*(228+15) 小于 6*(228+15) 即可。
        对于每个 li 中的图片，要保证与 li 相同大小。直接嵌入会发现图片要多出一截，解决方法是：对 li 中的图片宽度进行单独的声明。
        li 中的文字用标签 h4，下面的定义为 info，用标签 span 声明相关样式。

        关于每个 li 右上角的 hot，new，需要学习完定位才能做，详细见下一篇文章。

        后续的一些布局就和这个核心模块大同小异了，可以自行尝试解决。

<!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>

            </ul>
        </div>
    </div>
<!-- 4. box核心内容区域结束 -->
.box {
    margin-top: 30px;
}
.box-hd {
    height: 45px;
}
.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}
.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}
/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
.box-bd ul {
    width: 1225px;
}
.box-bd ul li {
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
   
}
.box-bd ul li img {
    width: 100%;
}
.box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box-bd .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999;
}
.box-bd .info span {
    color: #ff7c2d;
}

5.10 底部模块

  • 1 号盒子是通栏大盒子，底部 footer 给高度，底色是白色
  • 2 号盒子版心水平居中
  • 3 号盒子版权 copyright 左对齐
  • 4 号盒子链接组 links 右对齐

        如果直接建立一个 footer 盒子，刷新后会发现直接与上面的核心模块重叠了，这是因为 li 没有声明高度，这个父盒子的高度就变成了 0（详细参考上一篇 “浮动” 文章中的讲解）。不给高度的原因是方便继续添加更多的 li。这里需要对父盒子清除浮动，即对父盒子添加 clearfix 的 class 属性。

.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }

        footer 整体分作两个部分，一个左浮动，一个右浮动。同时注意到与上面有一定间隔，若声明一个 margin-top，此时刷新会发现整个 footer 盒子下去了，这就是因为外边距合并。所以这里建议使用 padding-top。
        对于左侧盒子，又分作三部分，一张图片，一段文字和一个链接。注意形式声明。不要忘记对 a 声明行内块元素。
        对于右侧模块，是三个一模一样的盒子，根据前面讲过，这里采用 dl 来制作。由于本身属于块元素，所以都要声明右浮动，同时再补充一个左边距。

<!-- 5. footer 模块制作 -->
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="images/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>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
            </div>
        </div>
    </div>
/* footer 模块 */
.footer {
    height: 415px;
    background-color: #fff;
}
.footer .w {
    padding-top: 35px;
}
.copyright {
    float: left;
}
.copyright p {
    font-size: 12px;
    color: #666;
    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 dl {
    float: left;
    margin-left: 100px;
}
.links dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}
.links dl dd a {
    color: #333;
    font-size: 12px;
}

Code 

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学车在线首页</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 1.头部区域开始啦 -->
    <div class="header w">
        <!-- logo部分 -->
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
        <!-- 导航栏部分 nav -->
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 搜索模块 -->
        <div class="search">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
        <!-- 用户模块 -->
        <div class="user">
            <img src="images/user.png" alt="">
            qq-lilei
        </div>
    </div>
    <!-- 头部区域结束啦 -->
    <!-- 2. banner部分start -->
    <div class="banner">
        <!-- 版心 -->
        <div class="w">
            <div class="subnav">
                <ul>
                    <li><a href="#">前端开发 <span> &gt; </span></a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                    <li><a href="#">前端开发 <span> &gt; </span> </a></li>
                </ul>
            </div>

            <!-- course 课程表模块 -->
            <div class="course">
                <h2>我的课程表</h2>
                <div class="bd">
                    <ul>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习 程序语言设计</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                    </ul>

                    <a href="#" class="more">全部课程</a>
                </div>
            </div>
        </div>
    </div>
    <!-- banner部分end -->
    <!-- 3.精品推荐模块开始 -->
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
    <!-- 精品推荐模块结束 -->
    <!-- 4. box核心内容区域开始 -->
    <div class="box w">
        <div class="box-hd">
            <h3>精品推荐</h3>
            <a href="#">查看全部</a>
        </div>
        <div class="box-bd">
            <ul class="clearfix">
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
                <li>
                    <img src="images/pic.png" alt="">
                    <h4>
                        Think PHP 5.0 博客系统实战项目演练
                    </h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>

            </ul>
        </div>
    </div>
    <!-- 4. box核心内容区域结束 -->

    <!-- 5. footer 模块制作 -->
    <div class="footer">
        <div class="w">
            <div class="copyright">
                <img src="images/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>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
}
.w {
    width: 1200px;
    margin: auto;
}
body {
    background-color: #f3f5f7;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
.clearfix:before,.clearfix:after {
    content:"";
    display:table; 
  }
  .clearfix:after {
    clear:both;
  }
  .clearfix {
     *zoom:1;
  }   
 
.header {
    height: 42px;
    /* background-color: pink; */
    /* 注意此地方会层叠 w 里面的margin */
    margin: 30px auto;
}
.logo {
    float: left;
    width: 198px;
    height: 42px;
}
.nav {
    float: left;
    margin-left: 60px;
}
.nav ul li {
    float: left;
    margin: 0 15px;
}
.nav ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;
    line-height: 42px;
    font-size: 18px;
    color: #050505;   
}
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff;
}
/* search搜索模块 */
.search {
    float: left;
    width: 412px;
    height: 42px;
    margin-left: 70px;
}
.search input {
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0;
    color: #bfbfbf;
    font-size: 14px;
    padding-left: 15px;
}
.search button {
    float: left;
    width: 50px;
    height: 42px;
    /* 按钮button默认有个边框需要我们手动去掉 */
    border: 0;
    background: url(images/btn.png);
}
.user {
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
}
/* banner区域 */
.banner {
    height: 421px;
    background-color: #1c036c;
}
.banner .w {
    height: 421px;
    background: url(images/banner2.png) no-repeat top center;
}
.subnav {
    float: left;
    width: 190px;
    height: 421px;
    background: rgba(0,0,0, 0.3);
}
.subnav ul li {
    height: 45px;
    line-height: 45px;
    padding: 0 20px;
}
.subnav ul li a {
    font-size: 14px;
    color: #fff;
}
.subnav ul li a span {
    float: right;
}
.subnav ul li a:hover {
    color: #00a4ff;
}
.course {
    float: right;
    width: 230px;
    height: 300px;
    background-color: #fff;
    /* 浮动的盒子不会有外边距合并的问题 */
    margin-top: 50px;
}
.course h2 {
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
}
.bd {
    padding: 0 20px;
}
.bd ul li {
    padding: 14px 0;
    border-bottom: 1px solid #ccc;
}
.bd ul li h4 {
    font-size: 16px;
    color: #4e4e4e;
}
.bd ul li p {
    font-size: 12px;
    color: #a5a5a5;
}
.bd .more {
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;
    margin-top: 5px;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-size: 16px;
    font-weight: 700;
}
/* 精品推荐模块 */
.goods {
    height: 60px;
    background-color: #fff;
    margin-top: 10px;
    box-shadow: 0 2px 3px 3px rgba(0,0,0, 0.1);
    /* 行高会继承， 会继承给3个孩子 */
    line-height: 60px;
}
.goods h3 {
    float: left;
    margin-left: 30px;
    font-size: 16px;
    color: #00a4ff;
}
.goods ul {
    float: left;
    margin-left: 30px;
}
.goods ul li {
    float: left;
}
.goods ul li a {
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
    border-left: 1px solid #ccc;
}
.mod {
    float: right;
    margin-right: 30px;
    font-size: 14px;
    color: #00a4ff;
}
.box {
    margin-top: 30px;
}
.box-hd {
    height: 45px;
}
.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}
.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}
/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
.box-bd ul {
    width: 1225px;
}
.box-bd ul li {
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
   
}
.box-bd ul li img {
    width: 100%;
}
.box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: 400;
}
.box-bd .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999;
}
.box-bd .info span {
    color: #ff7c2d;
}
/* footer 模块 */
.footer {
    height: 415px;
    background-color: #fff;
}
.footer .w {
    padding-top: 35px;
}
.copyright {
    float: left;
}
.copyright p {
    font-size: 12px;
    color: #666;
    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 dl {
    float: left;
    margin-left: 100px;
}
.links dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}
.links dl dd a {
    color: #333;
    font-size: 12px;
}

image

        用于存储相关图片

        建议有空制作完剩下的部分。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2227748.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

第三十三篇：TCP协议如何避免/减少网络拥塞，TCP系列八

第三十三篇：TCP协议如何避免/减少网络拥塞，TCP系列八

一、流量控制 一般来说&#xff0c;我们总是希望数据传输得更快一些&#xff0c;但是如果发送方把数据发送得太快&#xff0c;接收方可能来不及接收&#xff0c;造成数据的丢失&#xff0c;数据重发&#xff0c;造成网络资源的浪费甚至网络拥塞。所谓的流量控制&#xff08;fl…
阅读更多...
基础知识-因果分析-daythree-独立性检验-贝叶斯公式及应用

基础知识-因果分析-daythree-独立性检验-贝叶斯公式及应用

根据概率乘法公式有P(AB)P(B|A)P(A)变形为除法形式&#xff0c;则有 更一般地&#xff0c;假设事件的集合B1&#xff0c;B2&#xff0c;…&#xff0c;Bn构成样本空间的一个划分&#xff0c;则根据全概率公式有 将式(2.14)中的B替换为Bi&#xff0c;则有 再代入P(A)的全概率计算…
阅读更多...
QT界面开发--我的第一个windows窗体【菜单栏、工具栏、状态栏、铆接部件、文本编辑器、按钮、主界面】

QT界面开发--我的第一个windows窗体【菜单栏、工具栏、状态栏、铆接部件、文本编辑器、按钮、主界面】

经过前面的铺垫&#xff0c;今天我们就开始我们图形化界面之旅了&#xff0c;我们的第一个窗体主要包括&#xff1a;菜单栏、状态栏、工具栏、铆接部件、还有Qt提供的一些主窗体的API。 第一部分&#xff1a;主界面(QMainWindow) 当创建好项目后&#xff0c;我们直接运行&…
阅读更多...
Docker镜像的创建、修改与导出

Docker镜像的创建、修改与导出

Docker镜像的创建、修改与导出 前言一、创建Docker镜像1. 基于已有镜像创建方法一：修改现有镜像方法二：使用Dockerfile通过源码编译安装nginx二、修改Docker镜像1. 基于已有镜像创建新镜像方法一：修改现有镜像2. 使用`docker commit`命令创建新镜像方法一：提交正在运行的容…
阅读更多...
3GPP协议解读_NTN系列（一）_38.811_非地面网络(NTN)的背景、应用场景和信道建模

3GPP协议解读_NTN系列（一）_38.811_非地面网络(NTN)的背景、应用场景和信道建模

非地面网络 1. Scope4. 非地面网络背景介绍4.1 5G中的非地面网络4.2 非地面网络在5G中的用例4.3 卫星和空中接入网的架构4.4 卫星和空中接入网终端的特点4.5 空气/星载飞行器特性4.6 NTN的覆盖模式4.7 NTN网络架构选项4.8 频谱 5. 非地面网络应用场景5.1 应用场景概览5.2 属性介…
阅读更多...
基于SSM+小程序的智慧旅游平台登录管理系统（旅游2）

基于SSM+小程序的智慧旅游平台登录管理系统（旅游2）

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 旅游平台开发微信小程序功能有管理员和用户。 1、管理员功能有个人中心&#xff0c;用户管理&#xff0c;景点分类管理&#xff0c;旅游景点管理&#xff0c;景点购票管理&#xff0c;景…
阅读更多...
函数式接口与回调函数实践

函数式接口与回调函数实践

函数式接口与回调函数实践 一、Java 的函数式接口 是指仅包含一个抽象方法的接口&#xff0c;通常用于 lambda 表达式或方法引用。Java 8 引入了很多内置的函数式接口&#xff0c;比如 Runnable、Callable、Predicate、Function、Consumer 等 演示&#xff0c;数据类型转换的函…
阅读更多...
小米迎来「新起点」：硬核创新从超越到引领，小米SU7 Ultra 发布

小米迎来「新起点」：硬核创新从超越到引领，小米SU7 Ultra 发布

发布 | 大力财经 10月29日&#xff0c;小米15系列暨小米澎湃OS 2新品发布会在北京召开&#xff0c;小米集团创始人、董事长兼CEO雷军宣布了小米汽车原型车在纽北跑出6分46秒874的圈速&#xff0c;登顶“纽北全球最速四门车”的好消息&#xff0c;并领衔发布了小米15系列手机、…
阅读更多...
Go语言优秀的web框架推荐-酒香也怕巷子深 好的框架也需要宣传

Go语言优秀的web框架推荐-酒香也怕巷子深 好的框架也需要宣传

温馨提示&#xff1a;我们分享的文章是给需要的人&#xff0c;不需要的人请绕过&#xff0c;文明浏览&#xff0c;误恶语伤人&#xff01; 前言 俗话说得好“酒香也怕巷子深”&#xff0c;好的东西不宣传也不能让大家知晓&#xff01;需要的人无法获取好的东西&#xff0c;好…
阅读更多...
双十一特辑，解决铲屎官难题——性价比高的宠物空气净化器推荐

双十一特辑，解决铲屎官难题——性价比高的宠物空气净化器推荐

谁家好人受得了猫咪这么掉毛啊&#xff01;最近换季&#xff0c;掉毛情况越发严重&#xff0c;家里都快被毛发淹没了。每天下班回来&#xff0c;第一件事就是清扫一地的猫毛。那就算了&#xff0c;一呼吸还收获一鼻子浮毛&#xff0c;又是沉重一击&#xff0c;这日子快要没法过…
阅读更多...
如何在 Windows 上安装 Python：一步一步的指南

如何在 Windows 上安装 Python：一步一步的指南

Python 已成为 当今最受欢迎的编程语言之一&#xff0c;在商业的各个领域中广泛应用。开发者使用 Python 构建应用程序和开发网站&#xff0c;而数据工程师则使用 Python 进行数据分析、统计分析以及构建机器学习模型。 检测是否已安装Python 默认情况下&#xff0c;Windows …
阅读更多...
自动驾驶-传感器简述

自动驾驶-传感器简述

自动驾驶车辆上的传感器类型包含激光雷达、毫米波雷达、相机、imu、rtk、超声波雷达等&#xff0c;这些传感器用来接收外部世界多姿多彩的信号&#xff0c;根据接收到的信号&#xff0c;车载大脑对信号进行处理&#xff0c;那信号的准确程度就尤为重要。 本文将各个传感器的特性…
阅读更多...
文本列的性能优化？深入Oracle全文索引

文本列的性能优化？深入Oracle全文索引

一.什么是全文索引&#xff1f; 全文索引通过分析和处理文本&#xff0c;将文档中的单词分解为词条&#xff08;tokens&#xff09;&#xff0c;然后存储词条与其所在文档的映射关系。这使得数据库可以快速定位包含特定关键字的记录&#xff0c;而不必对所有文本逐字匹配。 二…
阅读更多...
解决IllegalAccessException: java.lang.Class＜xxx.xActivity＞ is not accessible

解决IllegalAccessException: java.lang.Class＜xxx.xActivity＞ is not accessible

异常信息 Caused by: java.lang.IllegalAccessException: java.lang.Class<com.xxx.xActivity> is not accessible from java.lang.Class<android.app.AppComponentFactory>at java.lang.Class.newInstance(Native Method)at android.app.AppComponentFactory.inst…
阅读更多...
基于spootboot学生选课系统设计与实现

基于spootboot学生选课系统设计与实现

资料下载 https://download.csdn.net/download/qq_63753925/89888794 https://download.csdn.net/download/qq_63753925/89888793 https://download.csdn.net/download/qq_63753925/89885091 https://download.csdn.net/download/qq_63753925/89882320 摘 要 近年来&#xf…
阅读更多...
计算机网络IP地址分类，子网掩码，子网划分复习资料

计算机网络IP地址分类，子网掩码，子网划分复习资料

IP 地址的概念 IP 地址是独立于硬件地址的逻辑地址&#xff0c;它是由软件提供的地址。 IP 地址是网络层地址。 IP 编址方案和分类 IP 地址由 32 位二进制数构成&#xff0c;分为前缀(网络地址)和后缀(主机地址) 同一网段中每台计算机的 IP 地址是唯一的网络地址的分配全球…
阅读更多...
山海鲸报表VS微软Power BI：哪个报表工具更适合企业？

山海鲸报表VS微软Power BI：哪个报表工具更适合企业？

在当今数据驱动的商业环境中&#xff0c;选择一款合适的报表工具对企业至关重要。山海鲸报表和微软Power BI都是广受欢迎的报表工具&#xff0c;但两者在功能、用户体验和应用场景上各有不同。那么&#xff0c;在实际使用中&#xff0c;究竟哪款工具更能满足企业需求呢&#xf…
阅读更多...
【电子通识】四线制电阻屏怎么判断是哪一路出现异常？

【电子通识】四线制电阻屏怎么判断是哪一路出现异常？

在文章【电子通识】四线电阻屏原理中我们聊了一下四线电阻屏触摸的原理，如电阻屏结构、如何计算坐标等方面。 那么在实际的问题分析中，如果是屏硬件问题，那我们如何去判断到底是X还是Y出现异常或是说X+还是X-，是Y+还是Y-出现问题呢？ 首先要知道，XY轴为什么会出问题，其实…
阅读更多...
Linux基础环境搭建（CentOS7）- 安装Scala和Spark

Linux基础环境搭建（CentOS7）- 安装Scala和Spark

#Linux基础环境搭建&#xff08;CentOS7&#xff09;- 安装Scala和Spark Linux基础环境搭建&#xff08;CentOS7&#xff09;- 安装Scala和Spark 大家注意以下的环境搭建版本号&#xff0c;如果版本不匹配有可能出现问题&#xff01;&#xff08;spark不要下2.4版本的 会报错…
阅读更多...
EPLAN创建宏并自定义部件库详细案例操作（二）

EPLAN创建宏并自定义部件库详细案例操作（二）

#通过导入EDZ格式部件库的样式，模仿制作一个自定义的部件库# 续 EPLAN创建宏并自定义部件库详细案例操作（一） 需要宏文件（欧姆龙2D/3D），可以在此下载。 https://download.csdn.net/download/weixin_44166380/89933112 三、PLC地址编址 实际上，本操作可以忽略，但是如果…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023