简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >端午作业之仿理工学院学生平台首页

端午作业之仿理工学院学生平台首页

简行
简行原创
2020年06月28日 15:29:28642浏览

仿理工学院学生平台首页

1.运用FlexBox布局技术，对以下首页图片进行仿站:


2.使用FlexBox布局，背景的处理，a标签，阿里图标的使用等，展示图如下：

3.页面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/index.css" />
  8.     <!-- 引入图标样式 -->
  9.     <link rel="stylesheet" href="./font/iconfont.css" />
  10.   </head>
  11.   <body>
  12.     <!-- 页面 -->
  13.     <header>
  14.       <div class="top1">
  15.         <a href=""
  16.           ><img src="./imges/LOGO01.png" alt="" style="width: 200px;"
  17.         /></a>
  18.         <div>
  19.           <a href=""><span class="iconfont icon-icon-test">首页</span></a>
  20.           <a href=""><span class="iconfont icon-tubiaozhizuo-">财务</span></a>
  21.           <a href=""><span class="iconfont icon-ren">个人</span></a>
  22.           <a href=""><span class="iconfont icon-xiaoxi">消息</span></a>
  23.           <a href=""><span class="iconfont icon-icon-test1">注销</span></a>
  24.         </div>
  25.       </div>
  26.       <hr style="color: springgreen; width: 100%;" />
  27.       <div class="top2">
  28.         <a href="" class="iconfont icon-tubiaozhizuomoban-">课程</a>
  29.         <a href="" class="iconfont icon-kaoshi">考试</a>
  30.         <a href="" class="iconfont icon-chengji">成绩</a>
  31.         <a href="" class="iconfont icon-education">毕业</a>
  32.         <a href="" class="iconfont icon-education">学位</a>
  33.         <a href="" class="iconfont icon-bijiben">统考</a>
  34.       </div>
  35.     </header>
  36.     <!-- 主体 -->
  37.     <div class="container">
  38.       <!-- 左侧 -->
  39.       <div class="left">
  40.         <div class="study">
  41.           <!-- <div
  42.             style="
  43.               background-image: url(./imges/default_major.png);
  44.               width: 280px;
  45.               height: 163px;
  46.             "
  47.           >
  48.             <img src="./imges/.png" alt="">
  49.           </div> -->
  50.           <img
  51.             src="./imges/back.png"
  52.             alt=""
  53.             style="width: 280px; height: 163px;"
  54.           />
  55.           <div class="course">
  56.             <h3>C语言程序设计</h3>
  57.             <p>辅导教师: 无 学期: 一 学分: 3.0 课程成绩: --</p>
  58.             <p>
  59.               发帖: 0 / -- 条 课件学习: 11 / -- 次 总时长: 1272.6 / 1080 分钟
  60.             </p>
  61.             <div>
  62.               <a href=""
  63.                 ><span class="iconfont icon-tubiaozhizuomoban- iconbule"></span
  64.                 >课程学习</a
  65.               >
  67.               <a href="">
  68.                 <span class="iconfont icon-luntan iconbule"></span>课程论坛</a
  69.               >
  70.               <a href=""
  71.                 ><span class="iconfont icon-zuoye iconbule"></span>作业列表<span
  72.                   >></span
  73.                 ></a
  74.               >
  75.               <a href=""
  76.                 ><span class="iconfont icon-bijiben iconbule"></span
  77.                 >导学资料<span>></span></a
  78.               >
  79.               <a href=""
  80.                 ><span class="iconfont icon-lianxi iconbule"></span
  81.                 >阶段练习<span>></span></a
  82.               >
  83.             </div>
  84.           </div>
  85.         </div>
  86.         <div class="study">
  87.           <img
  88.             src="./imges/back.png"
  89.             alt=""
  90.             style="width: 280px; height: 163px;"
  91.           />
  92.           <div class="course">
  93.             <h3>中国近现代史纲要</h3>
  94.             <p>辅导教师: 无 学期: 一 学分: 3.0 课程成绩: --</p>
  95.             <p>
  96.               发帖: 0 / -- 条 课件学习: 7 / -- 次 总时长: 1094.0 / 1080 分钟
  97.             </p>
  98.             <div>
  99.               <a href=""
  100.                 ><span class="iconfont icon-tubiaozhizuomoban- iconbule"></span
  101.                 >课程学习</a
  102.               >
  104.               <a href="">
  105.                 <span class="iconfont icon-luntan iconbule"></span>课程论坛</a
  106.               >
  107.               <a href=""
  108.                 ><span class="iconfont icon-zuoye iconbule"></span>作业列表<span
  109.                   >></span
  110.                 ></a
  111.               >
  112.               <a href=""
  113.                 ><span class="iconfont icon-bijiben iconbule"></span
  114.                 >导学资料<span>></span></a
  115.               >
  116.               <a href=""
  117.                 ><span class="iconfont icon-lianxi iconbule"></span
  118.                 >阶段练习<span>></span></a
  119.               >
  120.             </div>
  121.           </div>
  122.         </div>
  123.         <div class="study">
  124.           <img
  125.             src="./imges/back.png"
  126.             alt=""
  127.             style="width: 280px; height: 163px;"
  128.           />
  130.           <div class="course">
  131.             <h3>大学英语1</h3>
  132.             <p>辅导教师: 无 学期: 一 学分: 3.0 课程成绩: --</p>
  133.             <p>
  134.               发帖: 0 / -- 条 课件学习: 13 / -- 次 总时长: 1164.9 / 1080 分钟
  135.             </p>
  136.             <div>
  137.               <a href=""
  138.                 ><span class="iconfont icon-tubiaozhizuomoban- iconbule"></span
  139.                 >课程学习</a
  140.               >
  142.               <a href="">
  143.                 <span class="iconfont icon-luntan iconbule"></span>课程论坛</a
  144.               >
  145.               <a href=""
  146.                 ><span class="iconfont icon-zuoye iconbule"></span>作业列表<span
  147.                   >></span
  148.                 ></a
  149.               >
  150.               <a href=""
  151.                 ><span class="iconfont icon-bijiben iconbule"></span
  152.                 >导学资料<span>></span></a
  153.               >
  154.               <a href=""
  155.                 ><span class="iconfont icon-lianxi iconbule"></span
  156.                 >阶段练习<span>></span></a
  157.               >
  158.             </div>
  159.           </div>
  160.         </div>
  161.         <div class="study">
  162.           <img
  163.             src="./imges/back.png"
  164.             alt=""
  165.             style="width: 280px; height: 163px;"
  166.           />
  167.           <div class="course">
  168.             <h3>线性代数</h3>
  169.             <p>辅导教师: 无 学期: 一 学分: 3.0 课程成绩: --</p>
  170.             <p>
  171.               发帖: 0 / -- 条 课件学习: 26 / -- 次 总时长: 1574.8 / 1080 分钟
  172.             </p>
  173.             <div>
  174.               <a href=""
  175.                 ><span class="iconfont icon-tubiaozhizuomoban- iconbule"></span
  176.                 >课程学习</a
  177.               >
  179.               <a href="">
  180.                 <span class="iconfont icon-luntan iconbule"></span>课程论坛</a
  181.               >
  182.               <a href=""
  183.                 ><span class="iconfont icon-zuoye iconbule"></span>作业列表<span
  184.                   >></span
  185.                 ></a
  186.               >
  187.               <a href=""
  188.                 ><span class="iconfont icon-bijiben iconbule"></span
  189.                 >导学资料<span>></span></a
  190.               >
  191.               <a href=""
  192.                 ><span class="iconfont icon-lianxi iconbule"></span
  193.                 >阶段练习<span>></span></a
  194.               >
  195.             </div>
  196.           </div>
  197.         </div>
  198.       </div>
  199.       <!-- 右侧 -->
  200.       <div class="right">
  201.         <!-- 用户信息 -->
  202.         <div>
  203.           <div class="admin">
  204.             <img src="./imges/touxiang.png" alt="" class="imgset" />
  206.             <div>
  207.               <p>Hi,admin</p>
  208.               <p>上次登录：--</p>
  209.             </div>
  210.           </div>
  211.           <a href="">面授课程表下载</a>
  212.         </div>
  213.         <!-- 通知公告 -->
  215.         <div>
  216.           <div class="tip">
  217.             <span>通知公告</span>
  218.             <span><a href="">公告</a><a href="">代办</a></span>
  219.           </div>
  220.           <div><img src="./imges/none.png" alt="" /></div>
  221.         </div>
  222.         <!-- 调查问卷 -->
  223.         <hr style="color: rgb(250, 241, 241);" />
  224.         <div>
  225.           <div class="tip"><span>通知公告 </span><a href="">更多></a></div>
  227.           <div><img src="./imges/none.png" alt="" /></div>
  228.         </div>
  229.       </div>
  230.     </div>
  231.     <!-- 页脚 -->
  232.     <footer>
  233.       <span class="iconfont icon-icon-test">厦门理工学院继续教育学院</span>
  234.       <p>主办单位：厦门理工学院; 技术支持：弘成科技发展有限公司;</p>
  235.       <p>Copyright©2020弘成科技发展有限公司版权所有;</p>
  236.     </footer>
  237.   </body>
  238. </html>

4.CSS代码如下：

  1. /* 初始化 */
  2. * {
  3.   margin: 0;
  4.   padding: 0;
  5.   box-sizing: border-box;
  6. }
  7. body {
  8.   background: #f2f2f2;
  9.   display: flex;
  10.   flex-flow: column nowrap;
  11.   align-items: center;
  12. }
  13. a {
  14.   text-decoration: none;
  15.   color: darkgray;
  16. }
  18. header,
  19. footer {
  20.   /* min-width: 1200px; */
  21.   width: 100%;
  22.   height: 100px;
  23. }
  24. header {
  25.   background: #fff;
  26.   display: flex;
  27.   flex-flow: column nowrap;
  28.   align-items: center;
  29. }
  31. .imgset {
  32.   /* 圆角百分比 */
  33.   border-radius: 50%;
  34. }
  35. .iconbule {
  36.   color: rgb(111, 175, 204);
  37. }
  39. .top1 {
  40.   width: 1200px;
  41.   display: flex;
  42.   min-height: 50px;
  43.   /* flex: 0 0 400px; */
  44.   justify-content: space-between;
  45.   align-items: center;
  46.   margin: auto 60px;
  47. }
  48. .top1 > div {
  49.   display: flex;
  50. }
  51. .top1 > div > a {
  52.   text-align: center;
  53.   margin-right: 30px;
  54. }
  55. .top1 > div > a:first-of-type {
  56.   color: turquoise;
  57. }
  58. .top1 > div > a:hover {
  59.   color: turquoise;
  60. }
  62. .top2 {
  63.   width: 1200px;
  64.   min-height: 50px;
  65.   margin-left: 60px;
  66.   display: flex;
  67.   justify-content: flex-start;
  68.   align-items: center;
  69. }
  70. .top2 > a {
  71.   margin-right: 80px;
  72.   font-size: 1.5rem;
  73. }
  74. .top2 > a:hover {
  75.   padding-bottom: 3px;
  76.   border-bottom: 4px solid orange;
  77. }
  78. /* 左侧 */
  79. .container {
  80.   margin-top: 20px;
  81.   min-width: 1200px;
  82.   display: flex;
  83.   justify-content: space-between;
  84. }
  85. .left {
  86.   display: flex;
  87.   flex-flow: column nowrap;
  88. }
  89. .study {
  90.   margin-bottom: 15px;
  91.   min-height: 165px;
  92.   display: flex;
  93.   align-items: center;
  94. }
  95. .course {
  96.   width: 570px;
  97.   background-color: white;
  98.   margin-left: 15px;
  99.   min-height: 165px;
  100.   padding-left: 10px;
  101.   display: flex;
  102.   flex-flow: column nowrap;
  103.   justify-content: space-evenly;
  104. }
  106. /* 右侧 */
  107. .right {
  108.   width: inherit;
  109.   background-color: #fff;
  110.   display: flex;
  111.   flex-flow: column nowrap;
  112. }
  113. .right > div {
  114.   margin-bottom: 15px;
  115. }
  116. .right > div:first-of-type {
  117.   padding: 10px 0;
  118.   display: flex;
  119.   flex-flow: column nowrap;
  120.   align-items: flex-start;
  121. }
  122. .admin {
  123.   margin-left: 15px;
  124.   display: flex;
  125. }
  126. .admin > div {
  127.   margin-left: 20px;
  128.   display: flex;
  129.   flex-flow: column nowrap;
  130.   justify-content: space-evenly;
  131. }
  132. .right > div:first-of-type > a {
  133.   background-color: rgb(107, 105, 105);
  134.   border-radius: 5px;
  135.   font-size: 1.5rem;
  136.   text-align: center;
  137.   margin: 10px auto;
  138.   padding: 0 35px;
  139. }
  141. .tip {
  142.   display: flex;
  143.   justify-content: space-between;
  144.   border-bottom: 1px solid #ebebeb;
  145. }
  146. .tip > :last-of-type {
  147.   display: flex;
  148. }
  149. .tip > :last-of-type > a {
  150.   background-color: rgb(250, 241, 241);
  151.   border: 1px solid #ebebeb;
  152. }
  153. .tip > :last-of-type > a:first-of-type {
  154.   border: 1px solid #ebebeb;
  155.   border-bottom: 1px solid #fff;
  156.   border-top: 1px solid #179ee1;
  157.   color: #179ee1;
  158.   background: #fff;
  159. }
  161. /* 页脚 */
  162. footer {
  163.   background: #f0eeee;
  164.   display: flex;
  165.   flex-flow: column nowrap;
  166.   justify-content: center;
  167.   align-items: center;
  168. }

总结

1.阿里图标跟使用前不一致，有些图片无法设置为彩色图案，有待进一步解决
2.背景图的属性使用生疏，需再熟练
3.各个模块的宽高设置错误，影响整体布局，需要多联系
4.首页使用FlexBox且多次使用进行一个页面的布局，对弹性盒子的各个属性有一定的了解

上一条：Laravel Observer (ORM 观察器)下一条：Flex 容器的常用属性与简单案例
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多