仿理工学院学生平台首页

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

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

3.页面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/index.css" />
    <!-- 引入图标样式 -->
    <link rel="stylesheet" href="./font/iconfont.css" />
  </head>
  <body>
    <!-- 页面 -->
    <header>
      <div class="top1">
        <a href=""
          ><img src="./imges/LOGO01.png" alt="" style="width: 200px;"
        /></a>
        <div>
          <a href=""><span class="iconfont icon-icon-test">首页</span></a>
          <a href=""><span class="iconfont icon-tubiaozhizuo-">财务</span></a>
          <a href=""><span class="iconfont icon-ren">个人</span></a>
          <a href=""><span class="iconfont icon-xiaoxi">消息</span></a>
          <a href=""><span class="iconfont icon-icon-test1">注销</span></a>
        </div>
      </div>
      <hr style="color: springgreen; width: 100%;" />
      <div class="top2">
        <a href="" class="iconfont icon-tubiaozhizuomoban-">课程</a>
        <a href="" class="iconfont icon-kaoshi">考试</a>
        <a href="" class="iconfont icon-chengji">成绩</a>
        <a href="" class="iconfont icon-education">毕业</a>
        <a href="" class="iconfont icon-education">学位</a>
        <a href="" class="iconfont icon-bijiben">统考</a>
      </div>
    </header>
    <!-- 主体 -->
    <div class="container">
      <!-- 左侧 -->
      <div class="left">
        <div class="study">
          <!-- <div
            style="
              background-image: url(./imges/default_major.png);
              width: 280px;
              height: 163px;
            "
          >
            <img src="./imges/.png" alt="">
          </div> -->
          <img
            src="./imges/back.png"
            alt=""
            style="width: 280px; height: 163px;"
          />
          <div class="course">
            <h3>C语言程序设计</h3>
            <p>辅导教师: 无 学期: 一 学分: 3.0 课程成绩: --</p>
            <p>
              发帖: 0 / -- 条 课件学习: 11 / -- 次 总时长: 1272.6 / 1080 分钟
            </p>
            <div>
              <a href=""
                ><span class="iconfont icon-tubiaozhizuomoban- iconbule"></span
                >课程学习</a
              >
              <a href="">
                <span class="iconfont icon-luntan iconbule"></span>课程论坛</a
              >
              <a href=""
                ><span class="iconfont icon-zuoye iconbule"></span>作业列表<span
                  >></span
                ></a
              >
              <a href=""
                ><span class="iconfont icon-bijiben iconbule"></span
                >导学资料<span>></span></a
              >
              <a href=""
                ><span class="iconfont icon-lianxi iconbule"></span
                >阶段练习<span>></span></a
              >
            </div>
          </div>
        </div>
        <div class="study">
          <img
            src="./imges/back.png"
            alt=""
            style="width: 280px; height: 163px;"
          />
          <div class="course">
            <h3>中国近现代史纲要</h3>
            <p>辅导教师: 无 学期: 一 学分: 3.0 课程成绩: --</p>
            <p>
              发帖: 0 / -- 条 课件学习: 7 / -- 次 总时长: 1094.0 / 1080 分钟
            </p>
            <div>
              <a href=""
                ><span class="iconfont icon-tubiaozhizuomoban- iconbule"></span
                >课程学习</a
              >
              <a href="">
                <span class="iconfont icon-luntan iconbule"></span>课程论坛</a
              >
              <a href=""
                ><span class="iconfont icon-zuoye iconbule"></span>作业列表<span
                  >></span
                ></a
              >
              <a href=""
                ><span class="iconfont icon-bijiben iconbule"></span
                >导学资料<span>></span></a
              >
              <a href=""
                ><span class="iconfont icon-lianxi iconbule"></span
                >阶段练习<span>></span></a
              >
            </div>
          </div>
        </div>
        <div class="study">
          <img
            src="./imges/back.png"
            alt=""
            style="width: 280px; height: 163px;"
          />
          <div class="course">
            <h3>大学英语1</h3>
            <p>辅导教师: 无 学期: 一 学分: 3.0 课程成绩: --</p>
            <p>
              发帖: 0 / -- 条 课件学习: 13 / -- 次 总时长: 1164.9 / 1080 分钟
            </p>
            <div>
              <a href=""
                ><span class="iconfont icon-tubiaozhizuomoban- iconbule"></span
                >课程学习</a
              >
              <a href="">
                <span class="iconfont icon-luntan iconbule"></span>课程论坛</a
              >
              <a href=""
                ><span class="iconfont icon-zuoye iconbule"></span>作业列表<span
                  >></span
                ></a
              >
              <a href=""
                ><span class="iconfont icon-bijiben iconbule"></span
                >导学资料<span>></span></a
              >
              <a href=""
                ><span class="iconfont icon-lianxi iconbule"></span
                >阶段练习<span>></span></a
              >
            </div>
          </div>
        </div>
        <div class="study">
          <img
            src="./imges/back.png"
            alt=""
            style="width: 280px; height: 163px;"
          />
          <div class="course">
            <h3>线性代数</h3>
            <p>辅导教师: 无 学期: 一 学分: 3.0 课程成绩: --</p>
            <p>
              发帖: 0 / -- 条 课件学习: 26 / -- 次 总时长: 1574.8 / 1080 分钟
            </p>
            <div>
              <a href=""
                ><span class="iconfont icon-tubiaozhizuomoban- iconbule"></span
                >课程学习</a
              >
              <a href="">
                <span class="iconfont icon-luntan iconbule"></span>课程论坛</a
              >
              <a href=""
                ><span class="iconfont icon-zuoye iconbule"></span>作业列表<span
                  >></span
                ></a
              >
              <a href=""
                ><span class="iconfont icon-bijiben iconbule"></span
                >导学资料<span>></span></a
              >
              <a href=""
                ><span class="iconfont icon-lianxi iconbule"></span
                >阶段练习<span>></span></a
              >
            </div>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <!-- 用户信息 -->
        <div>
          <div class="admin">
            <img src="./imges/touxiang.png" alt="" class="imgset" />
            <div>
              <p>Hi,admin</p>
              <p>上次登录：--</p>
            </div>
          </div>
          <a href="">面授课程表下载</a>
        </div>
        <!-- 通知公告 -->
        <div>
          <div class="tip">
            <span>通知公告</span>
            <span><a href="">公告</a><a href="">代办</a></span>
          </div>
          <div><img src="./imges/none.png" alt="" /></div>
        </div>
        <!-- 调查问卷 -->
        <hr style="color: rgb(250, 241, 241);" />
        <div>
          <div class="tip"><span>通知公告 </span><a href="">更多></a></div>
          <div><img src="./imges/none.png" alt="" /></div>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <footer>
      <span class="iconfont icon-icon-test">厦门理工学院继续教育学院</span>
      <p>主办单位：厦门理工学院; 技术支持：弘成科技发展有限公司;</p>
      <p>Copyright©2020弘成科技发展有限公司版权所有;</p>
    </footer>
  </body>
</html>

4.CSS代码如下：

/* 初始化 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #f2f2f2;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
a {
  text-decoration: none;
  color: darkgray;
}
header,
footer {
  /* min-width: 1200px; */
  width: 100%;
  height: 100px;
}
header {
  background: #fff;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.imgset {
  /* 圆角百分比 */
  border-radius: 50%;
}
.iconbule {
  color: rgb(111, 175, 204);
}
.top1 {
  width: 1200px;
  display: flex;
  min-height: 50px;
  /* flex: 0 0 400px; */
  justify-content: space-between;
  align-items: center;
  margin: auto 60px;
}
.top1 > div {
  display: flex;
}
.top1 > div > a {
  text-align: center;
  margin-right: 30px;
}
.top1 > div > a:first-of-type {
  color: turquoise;
}
.top1 > div > a:hover {
  color: turquoise;
}
.top2 {
  width: 1200px;
  min-height: 50px;
  margin-left: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.top2 > a {
  margin-right: 80px;
  font-size: 1.5rem;
}
.top2 > a:hover {
  padding-bottom: 3px;
  border-bottom: 4px solid orange;
}
/* 左侧 */
.container {
  margin-top: 20px;
  min-width: 1200px;
  display: flex;
  justify-content: space-between;
}
.left {
  display: flex;
  flex-flow: column nowrap;
}
.study {
  margin-bottom: 15px;
  min-height: 165px;
  display: flex;
  align-items: center;
}
.course {
  width: 570px;
  background-color: white;
  margin-left: 15px;
  min-height: 165px;
  padding-left: 10px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
}
/* 右侧 */
.right {
  width: inherit;
  background-color: #fff;
  display: flex;
  flex-flow: column nowrap;
}
.right > div {
  margin-bottom: 15px;
}
.right > div:first-of-type {
  padding: 10px 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
}
.admin {
  margin-left: 15px;
  display: flex;
}
.admin > div {
  margin-left: 20px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-evenly;
}
.right > div:first-of-type > a {
  background-color: rgb(107, 105, 105);
  border-radius: 5px;
  font-size: 1.5rem;
  text-align: center;
  margin: 10px auto;
  padding: 0 35px;
}
.tip {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ebebeb;
}
.tip > :last-of-type {
  display: flex;
}
.tip > :last-of-type > a {
  background-color: rgb(250, 241, 241);
  border: 1px solid #ebebeb;
}
.tip > :last-of-type > a:first-of-type {
  border: 1px solid #ebebeb;
  border-bottom: 1px solid #fff;
  border-top: 1px solid #179ee1;
  color: #179ee1;
  background: #fff;
}
/* 页脚 */
footer {
  background: #f0eeee;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}