AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

学成网页面首页定制

2023-02-19 246
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 学成网页面首页定制

学成网页面首页定制


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


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


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



上面为两个部分设置为@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  布局   流失布局 这些知识的基础上才能看懂上面的代码初稿。

文章标签：
前端开发
t75yjb52rsccc
目录
相关文章
低代码布道师
|
6月前
|
存储 JavaScript 前端开发
订水商城实战教程10-宫格导航
订水商城实战教程10-宫格导航
低代码布道师
45 0
赵广陆
|
前端开发
HTML+CSS仿京东购物车页面静态页面
HTML+CSS仿京东购物车页面静态页面
赵广陆
174 2
赵广陆
|
前端开发 JavaScript
HTML+CSS+JS仿京东购物车页面动态效果
HTML+CSS+JS仿京东购物车页面动态效果
赵广陆
171 0
鑫鑫子
|
前端开发 Python
京东首页静态页面html+css
京东首页静态页面html+css
鑫鑫子
85 0
王同学睡醒了
|
11月前
|
前端开发
移动端开发——京东首页制作（流式布局）
移动端开发——京东首页制作（流式布局）
王同学睡醒了
68 0
yuanfan_2012
|
Linux Docker 容器
5分钟搭建heimdall定制导航页
5分钟搭建heimdall定制导航页
yuanfan_2012
820 0
5分钟搭建heimdall定制导航页
叶一一
|
前端开发 IDE 开发工具
「趣学前端」日常浏览的页面为什么可以五颜六色
用技术实现梦想，用梦想打开创意之门。为了给不懂技术的朋友讲解日常开发中怎么实现网页的效果，我准备出一个系列。
叶一一
154 1
阿里云社区
|
JavaScript 前端开发 开发者
整合项目首页面 | 学习笔记
快速学习 整合项目首页面
阿里云社区
119 0
整合项目首页面 | 学习笔记
花花叔叔
新浪导航案例
新浪导航案例
花花叔叔
113 0
新浪导航案例
时间静止不是简史
|
前端开发 JavaScript
某东购物车（动态）网页搭建
网页编程实战二: 利用JavaScript实现某东购物车（动态）网页搭建
时间静止不是简史
156 0
某东购物车（动态）网页搭建

热门文章

最新文章

  • 1
    Flutter之禅 内存优化篇
  • 2
    《Cadence 16.6电路设计与仿真从入门到精通》——2.4 Design Entry CIS原理图图形界面　
  • 3
    记一次对网络抖动经典案例的分析
  • 4
    国外成人网站xHamster大量用户信息黑市变卖，部分账号涉及英美政府官员
  • 5
    用户密码以BCrypt加密的方式来防范被破解
  • 6
    带你理清CPU，cache和存储器之间的逻辑运作
  • 7
    Git设置代理服务器
  • 8
    【DSW Gallery】PAI-DSW开通及授权
  • 9
    吐血整理：机器学习的30个基本概念，都在这里了（手绘图解）
  • 10
    MOSS站点的迁移(备份还原)
  • 1
    设计模式之 5 大创建型模式，万字长文深剖 ，近 30 张图解！
    49
  • 2
    《C++新特性：为多线程数据竞争检测与预防保驾护航》
    41
  • 3
    Kotlin - 区间与数组
    41
  • 4
    Kotlin - 参数与异常
    39
  • 5
    Kotlin - 运算符与中缀表达式
    34
  • 6
    Kotlin - 函数与Lambda表达式
    23
  • 7
    Kotlin - 分支与循环
    19
  • 8
    天气预报1天-中国气象局-地址查询版免费API接口教程
    20
  • 9
    《C++智能合约与区块链底层交互全解析：构建坚实的去中心化应用桥梁》
    19

    • 相关电子书

    更多
  • QQ移送页面框架优化实践
  • QQ移动页面框架优化实践
  • 低代码开发师（初级）实战教程

    • 相关实验场景

    更多
  • 收银台的场景化界面实践
  • 网站用户流量分析—适用于电商网站、资讯网站、游戏主站等各类Web站点场景
  • 小试牛刀，一键部署电商商城
    • 下一篇
    阿里云OSS设置跨域访问