简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 仿移动布局制作的阿拉在线云课堂
Blogger Information
Blog 43
fans 1
comment 0
visits 33820
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
仿移动布局制作的阿拉在线云课堂
蔚蓝世纪
Original
389 people have browsed it
使用移动布局模仿制作了一个“阿拉在线云课堂”，在线预览，请点击：

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

话不多说，直接上代码。

html代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width,    initial-scale=1.0" />
  6. <title>在线课堂</title>
  7. <link rel="stylesheet" href="css/kecheng.css" />
  8. </head>
  9. <body>
  10. <!-- 页眉 -->
  11. <header>
  12. <a href=""><img src="images/search2.png" alt="search" /></a>
  13. <button><a href="">课程 / 老师 / 行业 / 课程时间</a></button>
  14. <a href=""><img src="images/提醒2.png" alt="提醒" /></a>
  15. </header>
  17. <!-- 轮播图 -->
  18. <div class="slider">
  19.   <img src="images/slider.png" alt="轮播图" />
  20. </div>
  22. <!-- 主导航区 -->
  23. <nav>
  24.   <button>
  25.     <div>
  26.       <a href=""><img src="images/课程排行.png" alt="" /></a>
  27.       <a href="">课程安排</a>
  28.     </div>
  29.     <div>
  30.       <a href=""><img src="images/最新课程.png" alt="" /></a>
  31.       <a href="">最新课程</a>
  32.     </div>
  33.     <div>
  34.       <a href=""><img src="images/课程直播.png" alt="" /></a>
  35.       <a href="">课程直播</a>
  36.     </div>
  37.     <div>
  38.       <a href=""><img src="images/精品课程.png" alt="" /></a>
  39.       <a href="">精品课程</a>
  40.     </div>
  41.   </button>
  42. </nav>
  44. <!-- 课程安排 -->
  45. <div class="ke">
  46.   <a href="">课程安排</a>
  47.   <a href="">更多 ></a>
  48. </div>
  49. <hr />
  50. <div class="arrangement">
  51.   <div class="arrangment-list">
  52.     <a href=""><img src="images/语文.png" alt="yuwen" /></a>
  53.     <p>语文</p>
  54.   </div>
  55.   <div class="arrangment-list">
  56.     <a href=""><img src="images/数学.png" alt="yuwen" /></a>
  57.     <p>数学</p>
  58.   </div>
  59.   <div class="arrangment-list">
  60.     <a href=""><img src="images/物理.png" alt="yuwen" /></a>
  61.     <p>物理</p>
  62.   </div>
  63.   <div class="arrangment-list">
  64.     <a href=""><img src="images/化学.png" alt="yuwen" /></a>
  65.     <p>化学</p>
  66.   </div>
  67. </div>
  68. <!-- 课程列表 -->
  69. <div class="ke">
  70.   <a href="">课程列表</a>
  71.   <a href="">更多 ></a>
  72. </div>
  73. <hr />
  74. <div class="list-course">
  75.   <div class="courses-desc">
  76.     <p>
  77.       <img
  78.         src="images/语文.png"
  79.         alt=""
  80.       />甲甲：语文教师。长期从事高三教学、教研工作；悉心研究教学与高考规律，洞察各地高考试题走向，致力于通过全面贯彻语文备考的“自觉意识”，提高考生的备考效率和综合素质。
  81.     </p>
  82.   </div>
  83.   <div class="courses-desc">
  84.     <p>
  85.       <img
  86.         src="images/数学.png"
  87.         alt=""
  88.       />乙乙：数学教师。原中国管理科学研究院特约研究员，首都师范大学特级教师工作中心兼职硕士生导师。
  89.     </p>
  90.   </div>
  91.   <div class="courses-desc">
  92.     <p>
  93.       <img
  94.         src="images/物理.png"
  95.         alt=""
  96.       />丙丙：物理教师。讲课有亲和力，时刻紧扣考试大纲来帮助同学们快速、准确的解题，提高应试技巧。教育部新课标标准实验教材编写课题组成员；中国物理学会中学分会委员。
  97.     </p>
  98.   </div>
  99.   <div class="courses-desc">
  100.     <p>
  101.       <img
  102.         src="images/化学.png"
  103.         alt=""
  104.       />丁丁：化学教师，原中国化学会理事会理事、北京化学会理事会常务理事、北京教育考试院高考化学评价组成员、北京师范大学化学学院硕士生导师。
  105.     </p>
  106.   </div>
  107. </div>
  109. <!-- 页脚 -->
  110. <footer>
  111.   <div>
  112.     <a href=""><img src="images/首页.png" alt="" /></a>
  113.     <p>首页</p>
  114.   </div>
  115.   <div>
  116.     <a href=""><img src="images/分类.png" alt="" /></a>
  117.     <p>分类</p>
  118.   </div>
  119.   <div>
  120.     <a href=""><img src="images/发现.png" alt="" /></a>
  121.     <p>发现</p>
  122.   </div>
  123.   <div>
  124.     <a href=""><img src="images/课程.png" alt="" /></a>
  125.     <p>课程</p>
  126.   </div>
  127.   <div>
  128.     <a href=""><img src="images/我的.png" alt="" /></a>
  129.     <p>我的</p>
  130.   </div>
  131. </footer>
  132. </body>
  133. </html>

代码运行效果：

总结:

1. 使用flex初练手，做移动端确实方便。
2. 如果代码呈现白色，不起作用，请检查标点符号是否为英文书写方式。
3. 练习中没有使用图标字体，使用a标签加的图标，嗯嗯，也不错。
4. 页脚把主体的一总分内容遮起来了,随后再好好研究怎么解决的。
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看上去还好, 尽管丑了点
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！