学成网页面首页定制-阿里云开发者社区

学成网页面首页定制

上面的案例算是一个综合的网页设计吧！如果是你你会咋整呢？用代码去实现！会不会有点难呢？

这里运用到的知识点有布局定位浮动流失布局也又是你要思考这个网页交给你你会如何去做呢？上面的项目是

基础在日后的工作中算是最简单的了.因为学校是带你去入这个门，剩下的要靠自觉去钻研。

上面为两个部分设置为@1 @2

上面的部分身为@3 @4 @5

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style type="text/css">
  body {
    width: 100%;
    min-width: 900x;
    max-width: 960px;
    margin: 0 auto;
    font-size: 10px;
    padding: 2px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
    background-color: #f3f5f7;
    height: 100%;
    /* border: 3px solid cyan; */
    padding-left: 25%;
    padding-right: 25%;
  }
  div{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 900;
    font-size: 1.666667rem;
  }
  .one1{
    border: 3px solid royalblue;
    /* background-color: antiquewhite; */
    width: 100%;
    height: 48px;
    background-color: #f3f5f7;
  }
  .one2{
    border: 3px solid lightblue;
    /* background-color: cadetblue; */
    height: 211px;
    width: 100%;
    background-color: #1c036c;
  }
  .one3{
    /* background-color: pink; */
    border: 3px solid forestgreen;
    width: 100%;
    height: 1564px;
    background-color: #f3f5f7;
  }
  .one4{
    /* background-color: gold; */
    border: 3px solid darkblue;
    height: 100%;
    width: 60%;
    margin: 0 auto;
    background-color: l;
  }
  .one5{
    position: relative;
    /* background-color: azure; */
    border: 5px solid mediumaquamarine;
    width: 100px;
    height: 215px;
    background-color: aquamarine;
    right: 300px;
    top: 300px;
  }
  </style>
  <!-- 导入初始化文件 -->
  <link rel="stylesheet" href="../css/normalize.css">
  <title>项目主体布局</title>
</head>
<body>
  <div class="one1">@1</div>
  <div class="one2">@2</div>
  <div class="one3" style="margin: 0;padding: 0;">
  <div class="one5">@5</div>
  <div class="one4">@4</div>
  </div>
</body>
</html>

第二部分完成导航栏和第二部分的内容

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
  body {
    width: 100%;
    min-width: 900x;
    max-width: 960px;
    margin: 0 auto;
    font-size: 10px;
    padding: 2px;
    border: 2px solid black;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
    line-height: 1.5;
    background-color: #f3f5f7;
    height: 100%;
  }
  .header {
    background-color: #f3f5f7;
    width: 100%;
    height: 100px;
    border: 1px solid black;
    text-align: center;
    display: flex;
    padding-top: 2%;
    background-color:  #f3f5f7;
  }
  .header1 {
    background-color: #f3f5f7;
    width: 90%;
    height: 80%;
    justify-content: center;
    border: 1px solid black;
    margin: 0 auto;
  }
  .header1 img {
    padding-top: 3%;
    float: left;
    width: 101px;
    height: 26px;
    display: flex;
  }
  .header1 p {
    padding-top: 3%;
    float: left;
    line-height: 80%;
    justify-content: space-around;
    margin: 2%;
    margin-right: 0%;
    border-bottom: 2px solid #00a4ff;
  }
  .p1 {
    /* border: 2px red solid; */
    border-bottom: 2px solid #00a4ff;
  }
  .p2 {
    width: 180px;
    height: 19px;
    border: 1px solid #00a4ff;
  }
  /* 上面为第一部份内容 */
  /* .header4::before {
    content: "123456";
    display: block;
    width: 60%px;
    height: 250px;
    background: url("../images/banner.png") no-repeat;
    box-sizing: 50px
  }
   */
  .header3 {
    width: 80%;
    height: 256px;
    margin: 0 auto;
  }
  .header4{
    /* 相对定位 */
    position: relative;
  }
  .header3{
    /* float: left; */
    /* 绝对定位 */
    position: absolute;
    top: 0 0 0 0;
    height: 100%;
  }
  .cssdf{
    /* float: left; */
    position: absolute;
    /* top: 0 0 0 0; */
  }
  .A{
    border: 1PX solid red;
    position: relative;
    width: 100%;
    height: 100px;
  }
  .B{
    border: 1PX solid yellow;
    position: absolute;
    top: 0 0 0 0;
    width: 100%;
    height: 100px;
  }
  .C{
    border:  1px solid green;
    position: absolute;
    width: 100%;
    height: 100px;
  }
  </style>
</head>
<body>
  <div class="header">
  <div class="header1">
    <img src="../images/logo.png">
    <p class="p1">首页</p>
    <p>课程</p>
    <p>职业规划</p>
    <p class="p2"></p>
    <img src="../images/btn.png" style="height: 46px;width: 50px;float: left;margin: 0%;padding-top: 2%;" />
    <p>个人中心</p>
    <img src="../images/ld.png" style="height: 30px;width: 30px; margin:1%;padding-top:3%;" />
    <p style="height: 30px;width: 30px;border-radius:50%"><img src="../images/user.png"
      style="height: 20px;width: 20px;" /></p>
    <p style="border-bottom: 2px red solid;">qq:lesstome</p>
  </div>
  </div>
  <!-- 恭喜自己完成了第一部分哦2022/5/8 -->
  <div class="header4">
  <div class="cssdf">
    <img  src="../images/banner.png" style="width: 100%;"/>
  </div>
  <div class="header3" style="background-color: #13014b; height:335px;width: 191px; color: azure;">
    <p>前端开发</p>
    <p>前端开发</p>
    <p>移动端开发</p>
    <p>人工智能</p>
    <p>商业预算</p>
    <p>月计算&大数据</p>
    <p>运维&测试</p>
    <p>Ul设计</p>
    <p>产品</p>
  </div>
  </div>
</body>
</html>

代码初稿有很多地方不是很完善。

<!DOCTYPE html>
<html lang="zh">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 导入CSS`初始化 `normalize.css` -->
  <link rel="stylesheet" href="../css/normalize.css">
  <!-- 导入Css文件 外链式CSS文件-->
  <link rel="stylesheet" href="../less/Test.css">
  <!-- 本项目利用Less文件初始化 -->
  </head>
  <body>
  <!-- 定义视口标签 -->
  <div class="header">
    <div class="header1">
    <img src="../images/logo.png">
    <p class="p1">首页</p>
    <p>课程</p>
    <p>职业规划</p>
    <p class="p2"></p>
    <img src="../images/btn.png" style="height: 46px;width: 50px;float: left;margin: 0%;padding-top: 2%;" />
    <p>个人中心</p>
    <img src="../images/ld.png" style="height: 30px;width: 30px; margin:1%;padding-top:3%;" />
    <p style="height: 30px;width: 30px;border-radius:50%"><img src="../images/user.png"
      style="height: 20px;width: 20px;" /></p>
    <p style="border-bottom: 2px red solid;">qq:lesstome</p>
    </div>
  </div>
  <!-- 恭喜自己完成了第一部分哦2022/5/8 -->
  <div class="header4">
    <div class="header3" style="background-color: #13014b; height: 250px;width: 191px; color: azure;">
    <p>前端开发</p>
    <p>前端开发</p>
    <p>移动端开发</p>
    <p>人工智能</p>
    <p>商业预算</p>
    <p>月计算&大数据</p>
    <p>运维&测试</p>
    <p>Ul设计</p>
    <p>产品</p>
    </div>
  </div>
  <!-- 恭喜自己完成了第二部分哦2022/5/8 -->
  <div class="mode1">
    <ul style="color:#8dcbff;">精品推荐</ul>
    <ul>jquery</ul>
    <ul>Spang</ul>
    <ul>Mysql</ul>
    <ul>JavaWeb</ul>
    <ul>MSql</ul>
    <ul>JavaWeb</ul>
    <ul style="color: #8dcbff;">修改兴趣</ul>
  </div>
  <!-- 恭喜自己完成了第三部分部分哦2022/5/8  采用的是弹性布局-->
  <div class="mode2">
    <ul style="color: #282828;">精品推荐</ul>
    <ul style="font-size: 12px;">查看全部</ul>
  </div>
  <!-- 恭喜自己完成了第4部分部分哦2022/5/8  采用的是弹性布局-->
  <!-- 定位子绝对定位父亲相对定位  一个大的div中放入十个小的div -->
  <div class="parent">
    <div style="color: #13014b; ">
    <img src="../images/pic1.png" />
    <p>Think PHP 5.0 博客系统实战</p>
    <p>项目实操</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic2.png" />
    <p>Think PHP 5.0 博客系统实战</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic3.png" />
    <p>Angular 2 最新框架+主流技术+项目实战</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic4.png" />
    <p>Android Hybrid App 开发实战hH5+原生</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic5.png" />
    <p>Cocoos 博客系统实战 </p>
    <p>项目实操</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b; ">
    <img src="../images/pic3.png" />
    <p>Android Hybrid App 开发实战hH5+原生</p>
    <p>项目实操</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic2.png" />
    <p>Think PHP 5.0 博客系统实战</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic3.png" />
    <p>Angular 2 最新框架+主流技术+项目实战</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic4.png" />
    <p>Android Hybrid App 开发实战hH5+原生</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic5.png" />
    <p>Coccom博客系统实战</p>
    <p>项目实操</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
  </div>
  <!-- 恭喜自己完成了第5部分部分哦2022/5/8  采用的是弹性布局-->
  <!-- 插入一个的模块称为A模块 -->
  <div class="mode3">
    <ul>编程入门</ul>
    <ul style="color: #8dcbff;">热门</ul>
    <ul>初级</ul>
    <ul>中级</ul>
    <ul>高级</ul>
    <ul>查看全部</ul>
  </div>
  <!-- 插入一个模块 -->
  <div class="acc1">
    <img src="../images/left.png" />
    <div class="notcss">
    <img src="../images/right-top.png" />
    <div class="parentdiv1">
      <div style="color: #13014b; ">
      <img src="../images/pic7.png" />
      <p>UGUL源深度的创建</p>
      <p>项目实操</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
      </div>
      <div style="color: #13014b;">
      <img src="../images/pic5.png" />
      <p>Coccom博客系统实战</p>
      <p>项目实操</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
      </div>
      <div style="color: #13014b;">
      <img src="../images/pic5.png" />
      <p>Conns图解/p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
      </div>
      <div style="color: #13014b;">
      <img src="../images/pic6.png" />
      <p>UNITY入门/p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
      </div>
    </div>
    </div>
  </div>
  <div class="mode4">
    <ul>数据分析师</ul>
    <ul style="color: #8dcbff;">热门</ul>
    <ul>初级</ul>
    <ul>中级</ul>
    <ul>高级</ul>
    <ul>查看全部</ul>
  </div>
  <div class="acc2">
    <img src="../images/left2.png" />
    <div class="notcss1">
    <img src="../images/rt2.png" />
    <div class="parentdiv2">
      <div style="color: #13014b; ">
      <img src="../images/pic7.png" />
      <p>UGUL源深度的创建</p>
      <p>项目实操</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
      </div>
      <div style="color: #13014b;">
      <img src="../images/pic6.png" />
      <p>Coccom博客系统实战</p>
      <p>项目实操</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
      </div>
      <div style="color: #13014b;">
      <img src="../images/pic4.png" />
      <p>Conns图解/p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
      </div>
      <div style="color: #13014b;">
      <img src="../images/pic3.png" />
      <p>UNITY入门/p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
      </div>
    </div>
    </div>
  </div>
  <div class="mode5">
    <ul>机械学习工程师</ul>
    <ul style="color: #8dcbff;">热门</ul>
    <ul>初级</ul>
    <ul>中级</ul>
    <ul>高级</ul>
    <ul>查看全部</ul>
  </div>
  <!-- 与上面的模块相同 -->
  <div class="parent1">
    <div style="color: #13014b; ">
    <img src="../images/pic7.png" />
    <p>UGUL源深度的创建</p>
    <p>项目实操</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic5.png" />
    <p>Conns图解/p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic6.png" />
    <p>UNITY入门/p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic8.png" />
    <p>KAMI2首页界面切块效果</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b; ">
    <img src="../images/pic9.png" />
    <p>微软人工智能一数分析平台</p>
    <p>项目实操</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
  </div>
  <div class="mode6">
    <ul>前端开发工程师</ul>
    <ul style="color: #8dcbff;">热门</ul>
    <ul>初级</ul>
    <ul>中级</ul>
    <ul>高级</ul>
    <ul>查看全部</ul>
  </div>
  <!-- 与上面的模块相同 -->
  <div class="aparent1">
    <div style="color: #13014b; ">
    <img src="../images/pic9.png" />
    <p>微软人工智能一数分析平台</p>
    <p>项目实操</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic8.png" />
    <p>Kamiz首页页面切换效果<< /p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic8.png" />
    <p>Kamiz首页页面切换效果</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic6.png" />
    <p>UNITY入门</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
    <img src="../images/pic4.png" />
    <p>Android Hybrid App 开发实战hH5+原生</p>
    <p style="color:#ff9159;">高级</p>
    <p>.1125人在学习</p>
    </div>
  </div>
  <!-- mode7 -->
  <div class="mode7">
    <ul>牛人推荐</ul>
  </div>
  <div class="parent2">
    <div style="color: #13014b;" id="one">
    <div class="one"></div> 
    </div>
    <div style="color: #13014b; ">
    <img src="../images/teacher2_03.png" />
    </div>
    <div style="color: #13014b; ">
    <img src="../images/teacher3_03.png" />
    </div>
    <div style="color: #13014b; ">
    <img src="../images/teacher6_03.png" />
    </div>
    <div style="color: #13014b; ">
    <img src="../images/teacher5_03.png" />
    </div>
  </div>
  <div class="parent3">
    <div style="color: #13014b;flex: 0 0 40%;">
    <img src="../images/best_03.png" class="bnv" />
    </div>
    <div style="color: #13014b; ">
    <img src="../images/teacher9_03.png" />
    </div>
    <div style="color: #13014b; ">
    <img src="../images/teacher8_03.png" />
    </div>
    <div style="color: #13014b; ">
    <img src="../images/teacher7_03.png" />
    </div>
  </div>
  <footer>
    <img src="../images/logo.png">
  </footer>
  </body>
</html>

LESS

body {
  width: 100%;
  min-width: 900x;
  max-width: 960px;
  margin: 0 auto;
  font-size: 10px;
  border: 1px solid black;
  font-family: -apple-system, Helvetica, sans-serif;
  color: #666;
  line-height: 1.5;
  background-color: #f3f5f7;
  height: 100%;
  border: 1px solid black;
}
.header {
  background-color: #f3f5f7;
  width: 100%;
  height: 100px;
  border: 1px solid green;
  text-align: center;
  display: flex;
  padding-top: 2%;
  background-color: #f3f5f7;
}
.header1 {
  background-color: #f3f5f7;
  width: 90%;
  height: 80%;
  justify-content: center;
  border: 1px solid red;
  margin: 0 auto;
}
.header1 img {
  padding-top: 3%;
  float: left;
  width: 101px;
  height: 26px;
  display: flex;
}
.header1 p {
  padding-top: 3%;
  float: left;
  line-height: 80%;
  justify-content: space-around;
  margin: 2%;
  margin-right: 0%;
  border-bottom: 2px solid #00a4ff;
}
.p1 {
  /* border: 2px red solid; */
  border-bottom: 2px solid #00a4ff;
}
.p2 {
  width: 180px;
  height: 19px;
  border: 1px solid #00a4ff;
}
/* 上面为第一部份内容 */
.header4::after {
  content: "123456";
  display: block;
  width: 60%px;
  height: 250px;
  background: url("../images/banner.png") no-repeat;
  box-sizing: 50px
}
.header3 {
  float: left;
  width: 80%;
  height: 256px;
  margin: 0 auto;
}
/* <!-- 恭喜自己完成了第二部分哦2022/5/8 --> */
/* 父代 */
.mode1 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  display: flex;
}
.mode1 ul {
  padding-top: 1%;
  font-size: 18px;
  line-height: 50px;
  margin: 1px;
  margin-bottom: 0px display: block;
  justify-content: space-around;
  height: 50px;
  width: 12.5%;
  background-color: #ffffff;
  border-right: 2px solid #a5a5a5;
}
/* <!-- 恭喜自己完成了第三部分部分哦2022/5/8  采用的是弹性布局--> */
/* 弹性布局 */
.mode2 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: #FFF2E2;
  display: flex;
}
.mode2 ul {
  font-weight: 600;
  font-size: 1.375rem;
  flex: 9;
  justify-content: flex-start;
}
.mode2 ul:nth-child(2) {
  flex: 1;
}
/* <!-- 恭喜自己完成了第4部分部分哦2022/5/8  采用的是弹性布局--> */
/* 方案一 */
.parent {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parent div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parent div img {
  width: 100%;
}
/* 方案二 */
/* .p{
  display: block;
  width: 100%;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
} */
/* .p div {
  border: 1px solid red;
  text-align: center;
  display: inline-block;
  will-change: 20%;
  margin: 0.625rem;
} */
/* <!-- 恭喜自己完成了第5部分部分哦2022/5/8  采用的是弹性布局--> */
/* 与上面的模块相同 */
.mode3 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: lavenderblush;
  display: flex;
}
.mode3 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode3 ul:nth-child(2) {
  flex: 1;
}
/* 插入一个模块 */
.acc1 {
  width: 100%;
  height: 22rem;
  background-color: paleturquoise;
  display: flex;
}
/* 弹性布局x y */
/* 思路先X Y X */
.acc1 img {
  width: 20%;
}
.notcss img {
  width: 100%;
  flex: 1;
}
.parentdiv1 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parentdiv1 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 25%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parentdiv1 div img {
  width: 100%;
}
.mode4 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: peachpuff;
  display: flex;
}
.mode4 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode4 ul:nth-child(2) {
  flex: 1;
}
/* 插入一个模块 2*/
.acc2 {
  width: 100%;
  height: 22rem;
  background-color: paleturquoise;
  display: flex;
}
/* 弹性布局x y */
/* 思路先X Y X */
.acc2 img {
  width: 20%;
}
.notcss1 img {
  width: 100%;
  flex: 1;
}
.parentdiv2 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parentdiv2 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 25%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parentdiv2 div img {
  width: 100%;
}
.mode5 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: lightblue;
  display: flex;
}
.mode5 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode5 ul:nth-child(2) {
  flex: 1;
}
.parent1 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parent1 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parent1 div img {
  width: 100%;
}
.mode6 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  display: flex;
  background-color: gainsboro;
}
.mode6 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode6 ul:nth-child(2) {
  flex: 1;
}
.aparent1 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: pink;
}
.aparent1 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.aparent1 div img {
  width: 100%;
}
/* 模块 */
.mode7 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  display: flex;
  background-color: lightcyan;
}
.mode7 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode7 ul:nth-child(2) {
  flex: 1;
}
/* 倒数第3模块 */
.parent2 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: skyblue;
}
.parent2 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 18rem;
  color: red;
}
.parent2 div img {
  width: 100%;
}
/* 定位解决 */
.one{
  margin: 0;
  padding: 0;
  // background-color: #9d9fa6;
  opacity: 0.9;
  width: 100%;
  height: 10px;
}
#one::before {
  content: "崔老师";
  display: block;
  width: 60%px;
  height: 250px;
  background: url("../images/teacher1_03.png") no-repeat;
  box-sizing: 50px
}
/* 倒数第二模块*/
.parent3 {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parent3 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 18rem;
  color: red;
}
.parent3 div img {
  height: 18rem;
}
.parent3 div img {
  width: 100%;
}
/* 最后的一个模块 */
footer {
  width: 100%;
  height: 100px;
}

body {
  width: 100%;
  min-width: 900x;
  max-width: 960px;
  margin: 0 auto;
  font-size: 10px;
  font-family: -apple-system, Helvetica, sans-serif;
  color: #666;
  line-height: 1.5;
  background-color: #f3f5f7;
  height: 100%;
  border: 1px solid black;
}
.header {
  width: 100%;
  height: 100px;
  border: 1px solid green;
  text-align: center;
  display: flex;
  padding-top: 2%;
  background-color: #f3f5f7;
}
.header1 {
  background-color: #f3f5f7;
  width: 90%;
  height: 80%;
  justify-content: center;
  border: 1px solid red;
  margin: 0 auto;
}
.header1 img {
  padding-top: 3%;
  float: left;
  width: 101px;
  height: 26px;
  display: flex;
}
.header1 p {
  padding-top: 3%;
  float: left;
  line-height: 80%;
  justify-content: space-around;
  margin: 2%;
  margin-right: 0%;
  border-bottom: 2px solid #00a4ff;
}
.p1 {
  /* border: 2px red solid; */
  border-bottom: 2px solid #00a4ff;
}
.p2 {
  width: 180px;
  height: 19px;
  border: 1px solid #00a4ff;
}
/* 上面为第一部份内容 */
.header4::after {
  content: "123456";
  display: block;
  width: 60%px;
  height: 250px;
  background: url("../images/banner.png") no-repeat;
  box-sizing: 50px;
}
.header3 {
  float: left;
  width: 80%;
  height: 256px;
  margin: 0 auto;
}
/* <!-- 恭喜自己完成了第二部分哦2022/5/8 --> */
/* 父代 */
.mode1 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  display: flex;
}
.mode1 ul {
  padding-top: 1%;
  font-size: 18px;
  line-height: 50px;
  margin: 1px;
  margin-bottom: 0px display: block;
  justify-content: space-around;
  height: 50px;
  width: 12.5%;
  background-color: #ffffff;
  border-right: 2px solid #a5a5a5;
}
/* <!-- 恭喜自己完成了第三部分部分哦2022/5/8  采用的是弹性布局--> */
/* 弹性布局 */
.mode2 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: #FFF2E2;
  display: flex;
}
.mode2 ul {
  font-weight: 600;
  font-size: 1.375rem;
  flex: 9;
  justify-content: flex-start;
}
.mode2 ul:nth-child(2) {
  flex: 1;
}
/* <!-- 恭喜自己完成了第4部分部分哦2022/5/8  采用的是弹性布局--> */
/* 方案一 */
.parent {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parent div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parent div img {
  width: 100%;
}
/* 方案二 */
/* .p{
  display: block;
  width: 100%;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
} */
/* .p div {
  border: 1px solid red;
  text-align: center;
  display: inline-block;
  will-change: 20%;
  margin: 0.625rem;
} */
/* <!-- 恭喜自己完成了第5部分部分哦2022/5/8  采用的是弹性布局--> */
/* 与上面的模块相同 */
.mode3 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: lavenderblush;
  display: flex;
}
.mode3 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode3 ul:nth-child(2) {
  flex: 1;
}
/* 插入一个模块 */
.acc1 {
  width: 100%;
  height: 22rem;
  background-color: paleturquoise;
  display: flex;
}
/* 弹性布局x y */
/* 思路先X Y X */
.acc1 img {
  width: 20%;
}
.notcss img {
  width: 100%;
  flex: 1;
}
.parentdiv1 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parentdiv1 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 25%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parentdiv1 div img {
  width: 100%;
}
.mode4 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: peachpuff;
  display: flex;
}
.mode4 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode4 ul:nth-child(2) {
  flex: 1;
}
/* 插入一个模块 2*/
.acc2 {
  width: 100%;
  height: 22rem;
  background-color: paleturquoise;
  display: flex;
}
/* 弹性布局x y */
/* 思路先X Y X */
.acc2 img {
  width: 20%;
}
.notcss1 img {
  width: 100%;
  flex: 1;
}
.parentdiv2 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parentdiv2 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 25%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parentdiv2 div img {
  width: 100%;
}
.mode5 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: lightblue;
  display: flex;
}
.mode5 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode5 ul:nth-child(2) {
  flex: 1;
}
.parent1 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parent1 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parent1 div img {
  width: 100%;
}
.mode6 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  display: flex;
  background-color: gainsboro;
}
.mode6 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode6 ul:nth-child(2) {
  flex: 1;
}
.aparent1 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: pink;
}
.aparent1 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.aparent1 div img {
  width: 100%;
}
/* 模块 */
.mode7 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  display: flex;
  background-color: lightcyan;
}
.mode7 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode7 ul:nth-child(2) {
  flex: 1;
}
/* 倒数第3模块 */
.parent2 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: skyblue;
}
.parent2 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 18rem;
  color: red;
}
.parent2 div img {
  width: 100%;
}
/* 定位解决 */
.one {
  margin: 0;
  padding: 0;
  opacity: 0.9;
  width: 100%;
  height: 10px;
}
#one::before {
  content: "崔老师";
  display: block;
  width: 60%px;
  height: 250px;
  background: url("../images/teacher1_03.png") no-repeat;
  box-sizing: 50px;
}
/* 倒数第二模块*/
.parent3 {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: lavender;
}
.parent3 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 18rem;
  color: red;
}
.parent3 div img {
  height: 18rem;
}
.parent3 div img {
  width: 100%;
}
/* 最后的一个模块 */
footer {
  width: 100%;
  height: 100px;
}

这又是上面代码运行的效果图。

在上面的基础上我进行了改进。结果如下图。

<!DOCTYPE html>
<html lang="zh">
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 导入CSS`初始化 `normalize.css` -->
  <link rel="stylesheet" href="../css/normalize.css">
  <!-- 导入Css文件 外链式CSS文件-->
  <link rel="stylesheet" href="../css/Demo.css">
  <!-- 本项目利用Less文件初始化 -->
  </head>
  <body>
  <!-- 定义视口标签 -->
  <div>
    <h1>1234567</h1>
  </div>
    <div class="header">
    <div class="header1">
    <img src="../images/logo.png">
    <p class="p1">首页</p>
    <p>课程</p>
    <p>职业规划</p>
    <p class="p2"></p>
    <img src="../images/btn.png" style="height: 46px;width: 50px;float: left;margin: 0%;padding-top: 2%;" />
    <p>个人中心</p>
    <img src="../images/ld.png" style="height: 30px;width: 30px; margin:1%;padding-top:3%;" />
    <p style="height: 30px;width: 30px;border-radius:50%"><img src="../images/user.png"
      style="height: 20px;width: 20px;" /></p>
    <p style="border-bottom: 2px red solid;">qq:lesstome</p>
    </div>
  </div>
  <!-- 恭喜自己完成了第一部分哦2022/5/8 -->
  <div class="header4">
    <div class="cssdf">
    <img src="../images/banner.png" style="width: 100%;" />
    </div>
    <div class="header3" style="background-color: #13014b; height:335px;width: 191px; color: azure;">
    <p>前端开发</p>
    <p>前端开发</p>
    <p>移动端开发</p>
    <p>人工智能</p>
    <p>商业预算</p>
    <p>月计算&大数据</p>
    <p>运维&测试</p>
    <p>Ul设计</p>
    <p>产品</p>
    </div>
    <!-- 恭喜自己完成了第二部分哦2022/5/8 -->
    <div class="mode1">
    <ul style="color:#8dcbff;">精品推荐</ul>
    <ul>jquery</ul>
    <ul>Spang</ul>
    <ul>Mysql</ul>
    <ul>JavaWeb</ul>
    <ul>MSql</ul>
    <ul>JavaWeb</ul>
    <ul style="color: #8dcbff;">修改兴趣</ul>
    </div>
    <!-- 恭喜自己完成了第三部分部分哦2022/5/8  采用的是弹性布局-->
    <div class="mode2">
    <ul style="color: #282828;">精品推荐</ul>
    <ul style="font-size: 12px;">查看全部</ul>
    </div>
    <!-- 恭喜自己完成了第4部分部分哦2022/5/8  采用的是弹性布局-->
    <!-- 定位子绝对定位父亲相对定位  一个大的div中放入十个小的div -->
    <div class="parent">
    <div style="color: #13014b; ">
      <img src="../images/pic1.png" />
      <p>Think PHP 5.0 博客系统实战</p>
      <p>项目实操</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic2.png" />
      <p>Think PHP 5.0 博客系统实战</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic3.png" />
      <p>Angular 2 最新框架+主流技术+项目实战</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic4.png" />
      <p>Android Hybrid App 开发实战hH5+原生</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic5.png" />
      <p>Cocoos 博客系统实战 </p>
      <p>项目实操</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b; ">
      <img src="../images/pic3.png" />
      <p>Android Hybrid App 开发实战hH5+原生</p>
      <p>项目实操</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic2.png" />
      <p>Think PHP 5.0 博客系统实战</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic3.png" />
      <p>Angular 2 最新框架+主流技术+项目实战</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic4.png" />
      <p>Android Hybrid App 开发实战hH5+原生</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic5.png" />
      <p>Coccom博客系统实战</p>
      <p>项目实操</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    </div>
    <!-- 恭喜自己完成了第5部分部分哦2022/5/8  采用的是弹性布局-->
    <!-- 插入一个的模块称为A模块 -->
    <div class="mode3">
    <ul>编程入门</ul>
    <ul style="color: #8dcbff;">热门</ul>
    <ul>初级</ul>
    <ul>中级</ul>
    <ul>高级</ul>
    <ul>查看全部</ul>
    </div>
    <!-- 插入一个模块 -->
    <div class="acc1">
    <img src="../images/left.png" />
    <div class="notcss">
      <img src="../images/right-top.png" />
      <div class="parentdiv1">
      <div style="color: #13014b; ">
        <img src="../images/pic7.png" />
        <p>UGUL源深度的创建</p>
        <p>项目实操</p>
        <p style="color:#ff9159;">高级</p>
        <p>.1125人在学习</p>
      </div>
      <div style="color: #13014b;">
        <img src="../images/pic5.png" />
        <p>Coccom博客系统实战</p>
        <p>项目实操</p>
        <p style="color:#ff9159;">高级</p>
        <p>.1125人在学习</p>
      </div>
      <div style="color: #13014b;">
        <img src="../images/pic5.png" />
        <p>Conns图解/p>
        <p style="color:#ff9159;">高级</p>
        <p>.1125人在学习</p>
      </div>
      <div style="color: #13014b;">
        <img src="../images/pic6.png" />
        <p>UNITY入门/p>
        <p style="color:#ff9159;">高级</p>
        <p>.1125人在学习</p>
      </div>
      </div>
    </div>
    </div>
    <div class="mode4">
    <ul>数据分析师</ul>
    <ul style="color: #8dcbff;">热门</ul>
    <ul>初级</ul>
    <ul>中级</ul>
    <ul>高级</ul>
    <ul>查看全部</ul>
    </div>
    <div class="acc2">
    <img src="../images/left2.png" />
    <div class="notcss1">
      <img src="../images/rt2.png" />
      <div class="parentdiv2">
      <div style="color: #13014b; ">
        <img src="../images/pic7.png" />
        <p>UGUL源深度的创建</p>
        <p>项目实操</p>
        <p style="color:#ff9159;">高级</p>
        <p>.1125人在学习</p>
      </div>
      <div style="color: #13014b;">
        <img src="../images/pic6.png" />
        <p>Coccom博客系统实战</p>
        <p>项目实操</p>
        <p style="color:#ff9159;">高级</p>
        <p>.1125人在学习</p>
      </div>
      <div style="color: #13014b;">
        <img src="../images/pic4.png" />
        <p>Conns图解/p>
        <p style="color:#ff9159;">高级</p>
        <p>.1125人在学习</p>
      </div>
      <div style="color: #13014b;">
        <img src="../images/pic3.png" />
        <p>UNITY入门/p>
        <p style="color:#ff9159;">高级</p>
        <p>.1125人在学习</p>
      </div>
      </div>
    </div>
    </div>
    <div class="mode5">
    <ul>机械学习工程师</ul>
    <ul style="color: #8dcbff;">热门</ul>
    <ul>初级</ul>
    <ul>中级</ul>
    <ul>高级</ul>
    <ul>查看全部</ul>
    </div>
    <!-- 与上面的模块相同 -->
    <div class="parent1">
    <div style="color: #13014b; ">
      <img src="../images/pic7.png" />
      <p>UGUL源深度的创建</p>
      <p>项目实操</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic5.png" />
      <p>Conns图解/p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic6.png" />
      <p>UNITY入门/p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic8.png" />
      <p>KAMI2首页界面切块效果</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b; ">
      <img src="../images/pic9.png" />
      <p>微软人工智能一数分析平台</p>
      <p>项目实操</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    </div>
    <div class="mode6">
    <ul>前端开发工程师</ul>
    <ul style="color: #282828;font-size: 13px;">热门</ul>
    <ul>初级</ul>
    <ul>中级</ul>
    <ul>高级</ul>
    <ul>查看全部</ul>
    </div>
    <!-- 与上面的模块相同 -->
    <div class="aparent1">
    <div style="color: #13014b; ">
      <img src="../images/pic9.png" />
      <p>微软人工智能一数分析平台</p>
      <p>项目实操</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic8.png" />
      <p>Kamiz首页页面切换效果<< /p>
        <p style="color:#ff9159;">高级</p>
        <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic8.png" />
      <p>Kamiz首页页面切换效果</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic6.png" />
      <p>UNITY入门</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    <div style="color: #13014b;">
      <img src="../images/pic4.png" />
      <p>Android Hybrid App 开发实战hH5+原生</p>
      <p style="color:#ff9159;">高级</p>
      <p>.1125人在学习</p>
    </div>
    </div>
    <!-- mode7 -->
    <div class="mode7">
    <ul style="color: black;font: size 22px;padding-bottom: 20%;">牛人推荐</ul>
    </div>
    <div class="parent2">
    <div style="color: #13014b; ">
      <img src="../images/teacher1_03.png" />
    </div>
    <div style="color: #13014b; ">
      <img src="../images/teacher2_03.png" />
    </div>
    <div style="color: #13014b; ">
      <img src="../images/teacher3_03.png" />
    </div>
    <div style="color: #13014b; ">
      <img src="../images/teacher6_03.png" />
    </div>
    <div style="color: #13014b; ">
      <img src="../images/teacher5_03.png" />
    </div>
    </div>
    <!-- mode8 -->
    <div class="mode8">
    </div>
    <div class="parent3">
    <div style="color: #13014b;flex: 0 0 40%;">
      <img src="../images/best_03.png" class="bnv" />
    </div>
    <div style="color: #13014b; ">
      <img src="../images/teacher9_03.png" />
    </div>
    <div style="color: #13014b; ">
      <img src="../images/teacher8_03.png" />
    </div>
    <div style="color: #13014b; ">
      <img src="../images/teacher7_03.png" />
    </div>
    </div>
    <div class="mode9">
    <ul>
      <img src="../images/logo.png">
      <p>学成网在线致力于普及中国最好的教育他与中国一流大学和机构合作提供在线教程。</p><br>
      。2017年XTCG INC 保留所有权利。一户ICP配15025210
      <div
      style="color: #8dcbff;padding-top: 4%;border: 2px #8dcbff solid;width:60%;height:50px;line-height:50px;padding-left:30%;">
      下载App
      </div>
    </ul>
    <ul>
      <div>
      <p style="font-size: 22px;color: red;opacity: 0.99;">
        关于学成网
      </p>
      <br>
      关于
      <br>
      工作机会
      <br>
      客户服务
      <br>
      帮助
      </div>
    </ul>
    <ul>
      <div>
      <p style="font-size: 22px;color: #8dcbff;">
        新手指导
      </p>
      <br>
      如何注册
      <br>
      如何选课
      <br>
      如何到拿毕业证
      <br>
      学分是什么
      <br>
      考试未通过咋办
      </div>
    </ul>
    <ul>
      <div style="border: 0px;">
      <p style="font-size: 22px;color: #8dcbff;">
        合作伙伴
      </p 合作伙伴 </p>
      <br>
      合作机构
      <br>
      合作导师
      </div>
    </ul>
    </div>
  </footer> -->
  </body>
</html>

body {
  width: 100%;
  min-width: 900x;
  max-width: 960px;
  margin: 0 auto;
  font-size: 10px;
  padding: 2px;
  border: 2px solid black;
  font-family: -apple-system, Helvetica, sans-serif;
  color: #666;
  line-height: 1.5;
  background-color: #f3f5f7;
  height: 100%;
}
.header {
  z-index: 99;
  background-color: #f3f5f7;
  width: 100%;
  height: 100px;
  border: 1px solid black;
  text-align: center;
  display: flex;
  padding-top: 2%;
  background-color: #f3f5f7;
}
.header1 {
  z-index: 98;
  background-color: #f3f5f7;
  width: 90%;
  height: 80%;
  justify-content: center;
  border: 1px solid black;
  margin: 0 auto;
}
.header1 img {
  z-index: 97;
  padding-top: 3%;
  float: left;
  width: 101px;
  height: 26px;
  display: flex;
}
.header1 p {
  padding-top: 3%;
  float: left;
  line-height: 80%;
  justify-content: space-around;
  margin: 2%;
  margin-right: 0%;
  border-bottom: 2px solid #00a4ff;
}
.p1 {
  /* border: 2px red solid; */
  border-bottom: 2px solid #00a4ff;
}
.p2 {
  width: 180px;
  height: 19px;
  border: 1px solid #00a4ff;
}
/* 上面为第一部份内容 */
.header3 {
  width: 60%;
  height: 256px;
  margin: 0 auto;
}
.header4 {
  z-index: 99;
  /* 相对定位 */
  position: relative;
}
.header3 {
  /* float: left; */
  /* 绝对定位 */
  position: absolute;
  top: 0 0 0 0;
  height: 100%;
}
.cssdf {
  width: 100%;
  height: 100%;
  /* float: left; */
  position: absolute;
  /* top: 0 0 0 0; */
}
/* <!-- 恭喜自己完成了第二部分哦2022/5/8 --> */
/* 父代 */
.mode1 {
  position: relative;
  top: 400px;
  /* background-color: #00a4ff; */
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  display: flex;
}
.mode1 ul {
  padding-top: 1%;
  font-size: 14px;
  line-height: 50px;
  margin: 1px;
  margin-bottom: 0px display: block;
  justify-content: space-around;
  height: 50px;
  width: 12.5%;
  background-color: #f3f5f7;
  border-right: 2px solid #a5a5a5;
}
/* <!-- 恭喜自己完成了第三部分部分哦2022/5/8  采用的是弹性布局--> */
/* 弹性布局 */
.mode2 {
  position: relative;
  top: 400px;
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: #f3f5f7;
  display: flex;
  opacity: 0.99;
}
.mode2 ul {
  font-weight: 600;
  font: size 12px;
  flex: 9;
  justify-content: flex-start;
}
.mode2 ul:nth-child(2) {
  flex: 1;
}
/* <!-- 恭喜自己完成了第4部分部分哦2022/5/8  采用的是弹性布局--> */
/* 方案一 */
.parent {
  position: relative;
  top: 400px;
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: #f3f5f7;
}
.parent div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parent div img {
  width: 100%;
}
/* 方案二 */
/* .p{
  display: block;
  width: 100%;
  background-color: black;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
} */
/* .p div {
  border: 1px solid red;
  text-align: center;
  display: inline-block;
  will-change: 20%;
  margin: 0.625rem;
} */
/* <!-- 恭喜自己完成了第5部分部分哦2022/5/8  采用的是弹性布局--> */
/* 与上面的模块相同 */
.mode3 {
  position: relative;
  top: 400px;
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: #f3f5f7;
  display: flex;
}
.mode3 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode3 ul:nth-child(2) {
  flex: 1;
}
/* 插入一个模块 */
.acc1 {
  position: relative;
  top: 400px;
  width: 100%;
  height: 22rem;
  background-color: #f3f5f7;
  display: flex;
}
/* 弹性布局x y */
/* 思路先X Y X */
.acc1 img {
  width: 20%;
}
.notcss img {
  width: 100%;
  flex: 1;
}
.parentdiv1 {
  display: block;
  top: 200px;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: #f3f5f7;
}
.parentdiv1 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 25%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parentdiv1 div img {
  width: 100%;
}
.mode4 {
  position: relative;
  top: 400px;
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: #f3f5f7;
  display: flex;
}
.mode4 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode4 ul:nth-child(2) {
  flex: 1;
}
/* 插入一个模块 2*/
.acc2 {
  position: relative;
  top: 400px;
  width: 100%;
  height: 22rem;
  background-color: #f3f5f7;
  display: flex;
}
/* 弹性布局x y */
/* 思路先X Y X */
.acc2 img {
  width: 20%;
}
.notcss1 img {
  width: 100%;
  flex: 1;
}
.parentdiv2 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: #f3f5f7;
}
.parentdiv2 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 25%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parentdiv2 div img {
  width: 100%;
}
.mode5 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  background-color: #f3f5f7;
  display: flex;
}
.mode5 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode5 ul:nth-child(2) {
  flex: 1;
}
.parent1 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: #f3f5f7;
}
.parent1 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.parent1 div img {
  width: 100%;
}
.mode6 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  display: flex;
  background-color: #f3f5f7;
}
.mode6 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode6 ul:nth-child(2) {
  flex: 1;
}
.aparent1 {
  position: relative;
  top: 4rem;
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  background-color: #f3f5f7;
}
.aparent1 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 16rem;
  color: red;
}
.aparent1 div img {
  width: 100%;
}
/* 模块 */
.mode7 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 50px;
  /* background-color: #CCE8CF; */
  display: flex;
  background-color: #f3f5f7;
}
.mode7 ul {
  flex: 9;
  justify-content: flex-start;
}
.mode7 ul:nth-child(2) {
  flex: 1;
}
/* 模块 */
.mode8 {
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 30px;
  /* background-color:; */
  display: flex;
  background-color: #f3f5f7;
}
.mode8 ul {
  flex: 9;
  justify-content: flex-start;
}
/* 倒数第3模块 */
.parent2 {
  display: block;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  /* background-color: #f3f5f7; */
}
.parent2 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 18rem;
  color: red;
}
.parent2 div img {
  width: 100%;
}
/* 倒数第二模块*/
.parent3 {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  margin: 1px;
  /* background-color: #f3f5f7; */
}
.parent3 div {
  border: 2px solid black;
  box-sizing: border-box;
  border-left: 1px solid red;
  flex: 0 0 20%;
  border: 1px solid #FFFF;
  height: 18rem;
  color: red;
}
.parent3 div img {
  height: 18rem;
}
.parent3 div img {
  width: 100%;
}
/* 最后的一个模块 */
.mode9 {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  border-top: 6px solid #ffffff;
  width: 100%;
  height: 280px;
  /* background-color: #CCE8CF; */
  display: flex;
  background-color: #ffffff;
  opacity: 0.7;
}
.mode9 ul {
  flex: 1;
  justify-content: space-around;
  border-right: 1px solid black;
}
.mode9 ul:nth-child(1) {
  flex: 2;
}

要求你在学完了前端的HTML CSS 布局流失布局这些知识的基础上才能看懂上面的代码初稿。

学成网页面首页定制

热门文章

最新文章

相关课程

相关电子书

相关实验场景