仿移动布局制作的阿拉在线云课堂

使用移动布局模仿制作了一个“阿拉在线云课堂”，在线预览，请点击：

http://www.nywldst.com/php11/0411-12/demo6.html

话不多说，直接上代码。

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,    initial-scale=1.0" />
<title>在线课堂</title>
<link rel="stylesheet" href="css/kecheng.css" />
</head>
<body>
<!-- 页眉 -->
<header>
<a href=""><img src="images/search2.png" alt="search" /></a>
<button><a href="">课程 / 老师 / 行业 / 课程时间</a></button>
<a href=""><img src="images/提醒2.png" alt="提醒" /></a>
</header>
<!-- 轮播图 -->
<div class="slider">
  <img src="images/slider.png" alt="轮播图" />
</div>
<!-- 主导航区 -->
<nav>
  <button>
    <div>
      <a href=""><img src="images/课程排行.png" alt="" /></a>
      <a href="">课程安排</a>
    </div>
    <div>
      <a href=""><img src="images/最新课程.png" alt="" /></a>
      <a href="">最新课程</a>
    </div>
    <div>
      <a href=""><img src="images/课程直播.png" alt="" /></a>
      <a href="">课程直播</a>
    </div>
    <div>
      <a href=""><img src="images/精品课程.png" alt="" /></a>
      <a href="">精品课程</a>
    </div>
  </button>
</nav>
<!-- 课程安排 -->
<div class="ke">
  <a href="">课程安排</a>
  <a href="">更多 ></a>
</div>
<hr />
<div class="arrangement">
  <div class="arrangment-list">
    <a href=""><img src="images/语文.png" alt="yuwen" /></a>
    <p>语文</p>
  </div>
  <div class="arrangment-list">
    <a href=""><img src="images/数学.png" alt="yuwen" /></a>
    <p>数学</p>
  </div>
  <div class="arrangment-list">
    <a href=""><img src="images/物理.png" alt="yuwen" /></a>
    <p>物理</p>
  </div>
  <div class="arrangment-list">
    <a href=""><img src="images/化学.png" alt="yuwen" /></a>
    <p>化学</p>
  </div>
</div>
<!-- 课程列表 -->
<div class="ke">
  <a href="">课程列表</a>
  <a href="">更多 ></a>
</div>
<hr />
<div class="list-course">
  <div class="courses-desc">
    <p>
      <img
        src="images/语文.png"
        alt=""
      />甲甲：语文教师。长期从事高三教学、教研工作；悉心研究教学与高考规律，洞察各地高考试题走向，致力于通过全面贯彻语文备考的“自觉意识”，提高考生的备考效率和综合素质。
    </p>
  </div>
  <div class="courses-desc">
    <p>
      <img
        src="images/数学.png"
        alt=""
      />乙乙：数学教师。原中国管理科学研究院特约研究员，首都师范大学特级教师工作中心兼职硕士生导师。
    </p>
  </div>
  <div class="courses-desc">
    <p>
      <img
        src="images/物理.png"
        alt=""
      />丙丙：物理教师。讲课有亲和力，时刻紧扣考试大纲来帮助同学们快速、准确的解题，提高应试技巧。教育部新课标标准实验教材编写课题组成员；中国物理学会中学分会委员。
    </p>
  </div>
  <div class="courses-desc">
    <p>
      <img
        src="images/化学.png"
        alt=""
      />丁丁：化学教师，原中国化学会理事会理事、北京化学会理事会常务理事、北京教育考试院高考化学评价组成员、北京师范大学化学学院硕士生导师。
    </p>
  </div>
</div>
<!-- 页脚 -->
<footer>
  <div>
    <a href=""><img src="images/首页.png" alt="" /></a>
    <p>首页</p>
  </div>
  <div>
    <a href=""><img src="images/分类.png" alt="" /></a>
    <p>分类</p>
  </div>
  <div>
    <a href=""><img src="images/发现.png" alt="" /></a>
    <p>发现</p>
  </div>
  <div>
    <a href=""><img src="images/课程.png" alt="" /></a>
    <p>课程</p>
  </div>
  <div>
    <a href=""><img src="images/我的.png" alt="" /></a>
    <p>我的</p>
  </div>
</footer>
</body>
</html>

代码运行效果：

总结:

1. 使用flex初练手，做移动端确实方便。

2. 如果代码呈现白色，不起作用，请检查标点符号是否为英文书写方式。

3. 练习中没有使用图标字体，使用a标签加的图标，嗯嗯，也不错。

4. 页脚把主体的一总分内容遮起来了,随后再好好研究怎么解决的。

使用移动布局模仿制作了一个“阿拉在线云课堂”，在线预览，请点击：

话不多说，直接上代码。

html代码:

代码运行效果：

总结:

1. 使用flex初练手，做移动端确实方便。

2. 如果代码呈现白色，不起作用，请检查标点符号是否为英文书写方式。

3. 练习中没有使用图标字体，使用a标签加的图标，嗯嗯，也不错。

4. 页脚把主体的一总分内容遮起来了,随后再好好研究怎么解决的。

相关文章