devbox
AI算法构造者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍 第5天

作者：AI算法构造者 | 2024-02-05 10:14:50

赞

踩

2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍 第5天

第 五 天 整个网站例

5.1 准备工作 项目目录与版心

base.css

5.2 网页制作思路

5.3 header 区域-整体布局

5.4 header区域-logo

5.5 header区域-导航

 index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>学成在线</title>
  7.     <!-- 顺序要求：先清除再设置  -->
  8.     <link rel="stylesheet" href="./css/base.css">
  9.     <link rel="stylesheet" href="./css/index.css">
  10. </head>
  11. <body>
  12.     <!-- 头部区域 -->
  13.     <div class="header">
  14.         <div class="wrapper">
  15.             <!-- logo -->
  16.             <div class="logo">
  17.                 <h1><a href="#">学成在线</a></h1>
  18.             </div>
  19.             <!-- 导航 -->
  20.             <div class="nav">
  21.                 <ul>
  22.                     <li><a href="#" class="active">首页</a></li>
  23.                     <li><a href="#">课程</a></li>
  24.                     <li><a href="#">职业</a></li>
  25.                 </ul>
  26.             </div>
  27.             <!-- 搜索 -->
  28.             <div class="search">search</div>
  29.             <!-- 用户 -->
  30.             <div class="user">用户</div>
  31.         </div>
  32.     </div>
  33. </body>
  34. </html>

base.css

  1. /* 基础公共样式：清除默认样式 + 设置通用样式*/
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7.  
  8. li {
  9.     list-style: none;
  10. }
  11.  
  12. body {
  13.     font: 14px/1.5 "Microsoft Yaher", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  14.     color: #333;
  15. }
  16.  
  17. a {
  18.     color: #333;
  19.     text-decoration: none;
  20. }

index.css

  1. /* 首页样式 */
  2. /* 版心 */
  3. .wrapper {
  4.     margin: 0 auto;
  5.     width: 1200px;
  6. }
  7.  
  8. body {
  9.     background-color: #f3f5f7;
  10. }
  11.  
  12. /* 头部区域 */
  13. .header {
  14.     height: 100px;
  15.     background-color: #fff;
  16. }
  17.  
  18. .header .wrapper {
  19.     padding-top: 29px;
  20.     display: flex;
  21. }
  22.  
  23. /* logo */
  24. .logo a {
  25.     display: block;
  26.     width: 195px;
  27.     height: 41px;
  28.     background-image: url(../images/logo.png);
  29.     font-size: 0;
  30. }
  31.  
  32. /* 导航 */
  33. .nav {
  34.     margin-left: 102px;
  35. }
  36.  
  37. .nav ul {
  38.     display: flex;
  39. }
  40.  
  41. .nav li {
  42.     margin-right: 24px;
  43. }
  44.  
  45. .nav li a {
  46.     display: block;
  47.     padding: 6px 8px;
  48.     line-height: 27px;
  49.     font-size: 19px;
  50. }
  51.  
  52. /* active 类选器 表示默认选中的a */
  53. .nav li .active,
  54. .nav li a:hover{
  55.     border-bottom: 2px solid #00a4ff;
  56. }

5.6 header区域-搜索区域

5.7 header区域-用户区域

  1. <!-- 头部区域 -->
  2.     <div class="header">
  3.         <div class="wrapper">
  4.             <!-- logo -->
  5.             <div class="logo">
  6.                 <h1><a href="#">学成在线</a></h1>
  7.             </div>
  8.             <!-- 导航 -->
  9.             <div class="nav">
  10.                 <ul>
  11.                     <li><a href="#" class="active">首页</a></li>
  12.                     <li><a href="#">课程</a></li>
  13.                     <li><a href="#">职业</a></li>
  14.                 </ul>
  15.             </div>
  16.             <!-- 搜索 -->
  17.             <div class="search">
  18.                 <input type="text" placeholder="请输入关键词">
  19.                 <a href="#"></a>
  20.             </div>
  21.             <!-- 用户 -->
  22.             <div class="user">
  23.                 <img src="./img/user.png">
  24.                 <span>学员用户</span>
  25.             </div>
  26.         </div>
  27.     </div>
  28.  
  29.  
  30. CSS
  31. /* 导航 */
  32. .nav {
  33.     margin-left: 102px;
  34. }
  35.  
  36. .nav ul {
  37.     display: flex;
  38. }
  39.  
  40. .nav li {
  41.     margin-right: 24px;
  42. }
  43.  
  44. .nav li a {
  45.     display: block;
  46.     padding: 6px 8px;
  47.     line-height: 27px;
  48.     font-size: 19px;
  49. }
  50.  
  51. /* active 类选器 表示默认选中的a */
  52. .nav li .active,
  53. .nav li a:hover{
  54.     border-bottom: 2px solid #00a4ff;
  55. }
  56.  
  57. .search {
  58.     display: flex;
  59.     margin-left: 64px;
  60.     padding-left: 19px;
  61.     padding-right: 12px;
  62.     width: 412px;
  63.     height: 40px;
  64.     background-color: #f3f5f7;
  65.     border-radius: 20px;
  66. }
  67.  
  68. .search input {
  69.     flex: 1;
  70.     border: 0;
  71.     background-color: transparent;
  72.     /* 去掉表单控件的焦点框 */
  73.     outline: none;
  74. }
  75.  
  76. /* 父级是flex布局，子级变弹性盒子：加宽高生效 */
  77. .search a {
  78.     width: 16px;
  79.     height: 16px;
  80.     background-image: url(../img/search.png);
  81.     align-self: center;
  82. }
  83.  
  84. /* 用户 */
  85. .user {
  86.     margin-left: 32px;
  87.     margin-top: 4px;
  88. }
  89.  
  90. .user img {
  91.     margin-right: 7px;
  92.     /* vertical-align 行内块和行内垂直方向对方方式 */
  93.     vertical-align: middle;
  94. }
  95.  
  96. .user span {
  97.     font-size: 16px;
  98.     color: #666;
  99. }

5.8 banner区域

 index.css--banner

  1. /* banner 区域 */
  2. .banner {
  3.     height: 420px;
  4.     background-color: #0092cb;
  5. }
  6.  
  7. .banner .wrapper {
  8.     display: flex;
  9.     justify-content: space-between;
  10.     height: 420px;
  11.     background-image: url(../img/banner2.png);
  12. }
  13.  
  14. /* 侧导航 */
  15. .banner .left {
  16.     padding: 3px 20px;
  17.     width: 191px;
  18.     height: 420px;
  19.     background-color: rgba(0, 0, 0, 0, 42);
  20. }
  21.  
  22. .banner .left a {
  23.     /*  */
  24.     display: block;
  25.     height: 46px;
  26.     /* background-image: url(../img/); */
  27.     line-height: 46px;
  28.     font-size: 16px;
  29.     color: #fff;
  30. }
  31.  
  32. .banner .left a:hover {
  33.     background-image: url(../img/right-hover.png);
  34.     color: #00a4ff;
  35. }
  36.  
  37. /* 课程表 */
  38. .banner .right {
  39.     margin-top: 60px;
  40.     width: 218px;
  41.     height: 305px;
  42.     background-color: #209dd5;
  43.     border-radius: 10px;
  44. }
  45.  
  46. .banner .right h3 {
  47.     margin-left: 14px;
  48.     height: 48px;
  49.     line-height: 48px;
  50.     font-size: 15px;
  51.     color: #fff;
  52.     font-weight: 400;
  53. }
  54.  
  55. .banner .right .content {
  56.     padding: 14px;
  57.     height: 257px;
  58.     background-color: #fff;
  59.     border-radius: 10px;
  60. }
  61.  
  62. .banner .right dl {
  63.     margin-bottom: 12px;
  64.     border-bottom: 1px solid #e0e0e0;
  65. }
  66.  
  67. .banner .right dt {
  68.     margin-bottom: 8px;
  69.     font-size: 14px;
  70.     line-height: 20px;
  71.     font-weight: 700;
  72. }
  73.  
  74. .banner .right dd {
  75.     margin-bottom: 8px;
  76.     font-size: 12px;
  77.     line-height: 16px;
  78. }
  79.  
  80. .banner .right dd span {
  81.     color: #00a4ff;
  82. }
  83.  
  84. .banner .right dd strong {
  85.     color: #7d7d7d;
  86.     font-weight: 400;
  87. }
  88.  
  89. .banner .right a {
  90.     display: block;
  91.     height: 32px;
  92.     background-color: #00a4ff;
  93.     text-align: center;
  94.     font-size: 32xp;
  95.     color: #fff;
  96.     line-height: 32px;
  97.     border-radius: 15px;
  98. }

  1. <!-- banner 区域 -->
  2.     <div class="banner">
  3.         <div class="wrapper">
  4.             <div class="left">
  5.                 <ul>
  6.                     <li><a href="#">前端开发</a></li>
  7.                     <li><a href="#">前端开发</a></li>
  8.                     <li><a href="#">前端开发</a></li>
  9.                     <li><a href="#">前端开发</a></li>
  10.                     <li><a href="#">前端开发</a></li>
  11.                     <li><a href="#">前端开发</a></li>
  12.                     <li><a href="#">前端开发</a></li>
  13.                     <li><a href="#">前端开发</a></li>
  14.                     <li><a href="#">前端开发</a></li>
  15.                 </ul>
  16.             </div>
  17.             <div class="right">
  18.                 <h3>我的课程表</h3>
  19.                 <div class="content">
  20.                     <dl>
  21.                         <dt>数据可视化课程</dt>
  22.                         <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
  23.                     </dl>
  24.                     <dl>
  25.                         <dt>数据可视化课程</dt>
  26.                         <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
  27.                     </dl>
  28.                     <dl>
  29.                         <dt>数据可视化课程</dt>
  30.                         <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
  31.                     </dl>
  32.                     <a href="#">全部课程</a>
  33.                 </div>
  34.             </div>
  35.         </div>
  36.     </div>

5.9 精品推荐区域

  1. /* 精品推荐 */
  2. .recommed {
  3.     display: flex;
  4.     margin-top: 11px;
  5.     padding: 0 20px;
  6.     height: 60px;
  7.     background-color: #FFF;
  8.     box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
  9.     line-height: 60px;
  10. }
  11. .recommed h3 {
  12.     font-size: 18px;
  13.     color: #00a4ff;
  14.     font-weight: 400;
  15. }
  16.  
  17. .recommed ul {
  18.     flex: 1;
  19.     display: flex;
  20. }
  21.  
  22. .recommed ul li a {
  23.     padding: 0 24px;
  24.     border-right: 1px solid #e0e0e0;
  25.     font-size: 18px;
  26. }
  27.  
  28. .recommed ul li:last-child a {
  29.     border-right: 0;
  30. }
  31.  
  32. .recommed .modify {
  33.     font-size: 16px;
  34.     color: #00a4ff;
  35. }

  1.  <!-- 精品推荐 -->
  2.     <div class="recommed wrapper">
  3.         <h3>精品推荐</h3>
  4.         <ul>
  5.             <li><a href="#">Html</a></li>
  6.             <li><a href="#">Html</a></li>
  7.             <li><a href="#">Html</a></li>
  8.             <li><a href="#">Html</a></li>
  9.             <li><a href="#">Html</a></li>
  10.             <li><a href="#">Html</a></li>
  11.             <li><a href="#">Html</a></li>
  12.             <li><a href="#">Html</a></li>
  13.             <li><a href="#">Html</a></li>
  14.         </ul>
  15.         <a href="#" class="modify">修改兴趣</a>
  16.     </div>

5.10 推荐课程区域

5.11 前端开发工程师区域

5.12 版权区域

index.css  页面全部代码

  1. /* 首页样式 */
  2. /* 版心 */
  3. .wrapper {
  4.     margin: 0 auto;
  5.     width: 1200px;
  6. }
  7.  
  8. body {
  9.     background-color: #f3f5f7;
  10. }
  11.  
  12. /* 头部区域 */
  13. .header {
  14.     height: 100px;
  15.     background-color: #fff;
  16. }
  17.  
  18. .header .wrapper {
  19.     padding-top: 29px;
  20.     display: flex;
  21. }
  22.  
  23. /* logo */
  24. .logo a {
  25.     display: block;
  26.     width: 195px;
  27.     height: 41px;
  28.     background-image: url(../img/logo.png);
  29.     font-size: 0;
  30. }
  31.  
  32. /* 导航 */
  33. .nav {
  34.     margin-left: 102px;
  35. }
  36.  
  37. .nav ul {
  38.     display: flex;
  39. }
  40.  
  41. .nav li {
  42.     margin-right: 24px;
  43. }
  44.  
  45. .nav li a {
  46.     display: block;
  47.     padding: 6px 8px;
  48.     line-height: 27px;
  49.     font-size: 19px;
  50. }
  51.  
  52. /* active 类选器 表示默认选中的a */
  53. .nav li .active,
  54. .nav li a:hover{
  55.     border-bottom: 2px solid #00a4ff;
  56. }
  57.  
  58. .search {
  59.     display: flex;
  60.     margin-left: 64px;
  61.     padding-left: 19px;
  62.     padding-right: 12px;
  63.     width: 412px;
  64.     height: 40px;
  65.     background-color: #f3f5f7;
  66.     border-radius: 20px;
  67. }
  68.  
  69. .search input {
  70.     flex: 1;
  71.     border: 0;
  72.     background-color: transparent;
  73.     /* 去掉表单控件的焦点框 */
  74.     outline: none;
  75. }
  76.  
  77. /* 父级是flex布局，子级变弹性盒子：加宽高生效 */
  78. .search a {
  79.     width: 16px;
  80.     height: 16px;
  81.     background-image: url(../img/search.png);
  82.     align-self: center;
  83. }
  84.  
  85. /* 用户 */
  86. .user {
  87.     margin-left: 32px;
  88.     margin-top: 4px;
  89. }
  90.  
  91. .user img {
  92.     margin-right: 7px;
  93.     /* vertical-align 行内块和行内垂直方向对方方式 */
  94.     vertical-align: middle;
  95. }
  96.  
  97. .user span {
  98.     font-size: 16px;
  99.     color: #666;
  100. }
  101.  
  102. /* banner 区域 */
  103. .banner {
  104.     height: 420px;
  105.     background-color: #0092cb;
  106. }
  107.  
  108. .banner .wrapper {
  109.     display: flex;
  110.     justify-content: space-between;
  111.     height: 420px;
  112.     background-image: url(../img/banner2.png);
  113. }
  114.  
  115. /* 侧导航 */
  116. .banner .left {
  117.     padding: 3px 20px;
  118.     width: 191px;
  119.     height: 420px;
  120.     background-color: rgba(0, 0, 0, 0.42);
  121. }
  122.  
  123. .banner .left a {
  124.     /*  */
  125.     display: block;
  126.     height: 46px;
  127.     /* background-image: url(../img/); */
  128.     line-height: 46px;
  129.     font-size: 16px;
  130.     color: #fff;
  131. }
  132.  
  133. .banner .left a:hover {
  134.     background-image: url(../img/right-hover.png);
  135.     color: #00a4ff;
  136. }
  137.  
  138. /* 课程表 */
  139. .banner .right {
  140.     margin-top: 60px;
  141.     width: 218px;
  142.     height: 305px;
  143.     background-color: #209dd5;
  144.     border-radius: 10px;
  145. }
  146.  
  147. .banner .right h3 {
  148.     margin-left: 14px;
  149.     height: 48px;
  150.     line-height: 48px;
  151.     font-size: 15px;
  152.     color: #fff;
  153.     font-weight: 400;
  154. }
  155.  
  156. .banner .right .content {
  157.     padding: 14px;
  158.     height: 257px;
  159.     background-color: #fff;
  160.     border-radius: 10px;
  161. }
  162.  
  163. .banner .right dl {
  164.     margin-bottom: 12px;
  165.     border-bottom: 1px solid #e0e0e0;
  166. }
  167.  
  168. .banner .right dt {
  169.     margin-bottom: 8px;
  170.     font-size: 14px;
  171.     line-height: 20px;
  172.     font-weight: 700;
  173.     color: red;
  174. }
  175.  
  176. .banner .right dd {
  177.     margin-bottom: 8px;
  178.     font-size: 12px;
  179.     line-height: 16px;
  180. }
  181.  
  182. .banner .right dd span {
  183.     color: #00a4ff;
  184. }
  185.  
  186. .banner .right dd strong {
  187.     color: #7d7d7d;
  188.     font-weight: 400;
  189. }
  190.  
  191. .banner .right a {
  192.     display: block;
  193.     height: 32px;
  194.     background-color: #00a4ff;
  195.     text-align: center;
  196.     font-size: 32xp;
  197.     color: #fff;
  198.     line-height: 32px;
  199.     border-radius: 15px;
  200. }
  201.  
  202. /* 精品推荐 */
  203. .recommed {
  204.     display: flex;
  205.     margin-top: 11px;
  206.     padding: 0 20px;
  207.     height: 60px;
  208.     background-color: #FFF;
  209.     box-shadow: 0px 1px 2px 0px rgba(211, 211, 211, 0.5);
  210.     line-height: 60px;
  211. }
  212. .recommed h3 {
  213.     font-size: 18px;
  214.     color: #00a4ff;
  215.     font-weight: 400;
  216. }
  217.  
  218. .recommed ul {
  219.     flex: 1;
  220.     display: flex;
  221. }
  222.  
  223. .recommed ul li a {
  224.     padding: 0 24px;
  225.     border-right: 1px solid #e0e0e0;
  226.     font-size: 18px;
  227. }
  228.  
  229. .recommed ul li:last-child a {
  230.     border-right: 0;
  231. }
  232.  
  233. .recommed .modify {
  234.     font-size: 16px;
  235.     color: #00a4ff;
  236. }
  237.  
  238. /* 推荐课程 */
  239. .course {
  240.     margin-top: 15xp;
  241. }
  242.  
  243. /* 标题 公共类 与其他区域共用 */
  244. .hd {
  245.     display: flex;
  246.     justify-content: space-between;
  247.     height: 60px;
  248.     line-height: 60px;
  249. }
  250.  
  251. .hd h3 {
  252.     font-size: 21px;
  253.     font-weight: 400;
  254. }
  255.  
  256. .hd .more {
  257.     padding-right: 20px;
  258.     background: url(../img/more.png) no-repeat right center; 
  259.     font-size: 14px;
  260.     color: #999;
  261. }
  262.  
  263. /* 课程内容 - 公共类 */
  264. .bd ul {
  265.     display: flex;
  266.     flex-wrap: wrap;
  267.     justify-content: space-between;
  268. }
  269.  
  270. .bd li {
  271.     margin-bottom: 14px;
  272.     width: 228px;
  273.     height: 271px;
  274.     /* background-color: pink; */
  275.     background-color: rgb(250, 247, 247);
  276. }
  277.  
  278. .bd li .pic {
  279.     height: 156px;
  280. }
  281. .bd li .pic img {
  282.     width: 228px;
  283. }
  284.  
  285. .bd li .pic img:hover {
  286.     width: 230px;
  287.     position: relative;
  288.     z-index: 999;
  289. }
  290.  
  291. .bd li .text {
  292.     padding: 20px;
  293.     height: 115px;
  294.     background-color: #fff;
  295. }
  296.  
  297. .bd li .text h4 {
  298.     margin-bottom: 13px;
  299.     height: 40px;
  300.     font-size: 14px;
  301.     line-height: 20px;
  302.     font-weight: 400;
  303. }
  304.  
  305. .bd li .text p {
  306.     font-size: 14px;
  307.     line-height:  20px;
  308.     color: #999;
  309. }
  310.  
  311. .bd li .text p span {
  312.     color: #fa6400;
  313. }
  314.  
  315. .bd li .text p i {
  316.     font-style: normal;
  317. }
  318.  
  319. /* 前端 */
  320. .hd ul {
  321.     display: flex;
  322. }
  323.  
  324. .hd li{
  325.     margin-right: 60px;
  326.     font-size: 16px;
  327.  
  328. }
  329.  
  330. .hd li .active {
  331.     color: #00a4ff;
  332. }
  333.  
  334. .bd {
  335.     display: flex;
  336.     justify-content: space-between;
  337. }
  338.  
  339. .bd .left {
  340.     width: 228px;
  341.     /* background-color: #fff; */
  342. }
  343.  
  344. .bd .right {
  345.     width: 957px;
  346.     /* background-color: #fff; */
  347. }
  348.  
  349. .bd .right .top {
  350.     margin-bottom: 15px;
  351.     height: 100px;
  352. }
  353.  
  354. /* 版权 */
  355. .footer {
  356.     margin-top: 60px;
  357.     padding-top: 60px;
  358.     height: 273px;
  359.     background-color: #fff;
  360. }
  361.  
  362. .footer .wrapper {
  363.     display: flex;
  364.     justify-content: space-between;
  365. }
  366.  
  367. .footer .left {
  368.     width: 440px;
  369.     /* background-color: pink; */
  370. }
  371.  
  372. .footer .left p {
  373.     margin-top: 24px;
  374.     margin-bottom: 14px;
  375.     font-size: 12px;
  376.     line-height: 17px;
  377.     color: #666;
  378. }
  379.  
  380. .footer .left .download {
  381.     display: block;
  382.     width: 120px;
  383.     height: 36;;
  384.     border: 1px solid #00a4ff;
  385.     text-align: center;
  386.     line-height: 34px;
  387.     font-size: 16px;
  388.     color: #00a4ff;
  389. }
  390.  
  391. .footer .right {
  392.     display: flex;
  393.  
  394. }
  395.  
  396. .footer .right dl {
  397.     margin-left: 120px;
  398. }
  399.  
  400. .footer .right dt {
  401.     margin-bottom: 12px;
  402.     font-size: 16px;
  403.     line-height: 23px;
  404.     color: rgb(153, 32, 53);
  405. }
  406.  
  407. .footer .right a {
  408.     font-size: 14px;
  409.     color: #666;
  410.     line-height: 24px;
  411. }

 index.html 框架全部代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>学成在线</title>
  8.     <!-- 顺序要求：先清除再设置  -->
  9.     <link rel="stylesheet" href="./css/base.css">
  10.     <link rel="stylesheet" href="./css/index.css">
  11. </head>
  12.  
  13. <body>
  14.     <!-- 头部区域 -->
  15.     <div class="header">
  16.         <div class="wrapper">
  17.             <!-- logo -->
  18.             <div class="logo">
  19.                 <h1><a href="#">学成在线</a></h1>
  20.             </div>
  21.             <!-- 导航 -->
  22.             <div class="nav">
  23.                 <ul>
  24.                     <li><a href="#" class="active">首页</a></li>
  25.                     <li><a href="#">课程</a></li>
  26.                     <li><a href="#">职业</a></li>
  27.                 </ul>
  28.             </div>
  29.             <!-- 搜索 -->
  30.             <div class="search">
  31.                 <input type="text" placeholder="请输入关键词">
  32.                 <a href="#"></a>
  33.             </div>
  34.             <!-- 用户 -->
  35.             <div class="user">
  36.                 <img src="./img/user.png">
  37.                 <span>学员用户</span>
  38.             </div>
  39.         </div>
  40.     </div>
  41.  
  42.     <!-- banner 区域 -->
  43.     <div class="banner">
  44.         <div class="wrapper">
  45.             <div class="left">
  46.                 <ul>
  47.                     <li><a href="#">前端开发</a></li>
  48.                     <li><a href="#">前端开发</a></li>
  49.                     <li><a href="#">前端开发</a></li>
  50.                     <li><a href="#">前端开发</a></li>
  51.                     <li><a href="#">前端开发</a></li>
  52.                     <li><a href="#">前端开发</a></li>
  53.                     <li><a href="#">前端开发</a></li>
  54.                     <li><a href="#">前端开发</a></li>
  55.                     <li><a href="#">前端开发</a></li>
  56.                 </ul>
  57.             </div>
  58.             <div class="right">
  59.                 <h3>我的课程表</h3>
  60.                 <div class="content">
  61.                     <dl>
  62.                         <dt>数据可视化课程</dt>
  63.                         <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
  64.                     </dl>
  65.                     <dl>
  66.                         <dt>数据可视化课程</dt>
  67.                         <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
  68.                     </dl>
  69.                     <dl>
  70.                         <dt>数据可视化课程</dt>
  71.                         <dd><span>正在学习</span>-<strong>echarts使用步骤</strong></dd>
  72.                     </dl>
  73.                     <a href="#">全部课程</a>
  74.                 </div>
  75.             </div>
  76.         </div>
  77.     </div>
  78.  
  79.     <!-- 精品推荐 -->
  80.     <div class="recommed wrapper">
  81.         <h3>精品推荐</h3>
  82.         <ul>
  83.             <li><a href="#">Html</a></li>
  84.             <li><a href="#">Html</a></li>
  85.             <li><a href="#">Html</a></li>
  86.             <li><a href="#">Html</a></li>
  87.             <li><a href="#">Html</a></li>
  88.             <li><a href="#">Html</a></li>
  89.             <li><a href="#">Html</a></li>
  90.             <li><a href="#">Html</a></li>
  91.             <li><a href="#">Html</a></li>
  92.         </ul>
  93.         <a href="#" class="modify">修改兴趣</a>
  94.     </div>
  95.  
  96.     <!-- 推荐课程 -->
  97.     <div class="course wrapper">
  98.         <div class="hd">
  99.             <h3>精品推荐</h3>
  100.             <a href="#" class="more">查看全部</a>
  101.         </div>
  102.         <!-- 内容 -->
  103.         <div class="bd">
  104.             <ul>
  105.                 <li>
  106.                     <a href="#">
  107.                         <div class="pic"><img src="./img/course01.png" alt=""></div>
  108.                         <div class="text">
  109.                             <h4>JavaScript数据看板项目实战</h4>
  110.                             <p><span>高级</span>.<i>1125</i>人在学习</p>
  111.                         </div>
  112.                     </a>
  113.                 </li>
  114.                 <li>
  115.                     <a href="#">
  116.                         <div class="pic"><img src="./img/course07.png" alt=""></div>
  117.                         <div class="text">
  118.                             <h4>JavaScript数据看板项目实战</h4>
  119.                             <p><span>高级</span>.<i>1125</i>人在学习</p>
  120.                         </div>
  121.                     </a>
  122.                 </li>
  123.                 <li>
  124.                     <a href="#">
  125.                         <div class="pic"><img src="./img/banner2.png" alt=""></div>
  126.                         <div class="text">
  127.                             <h4>JavaScript数据看板项目实战</h4>
  128.                             <p><span>高级</span>.<i>1125</i>人在学习</p>
  129.                         </div>
  130.                     </a>
  131.                 </li>
  132.                 <li>
  133.                     <a href="#">
  134.                         <div class="pic"><img src="./img/course01.png" alt=""></div>
  135.                         <div class="text">
  136.                             <h4>JavaScript数据看板项目实战</h4>
  137.                             <p><span>高级</span>.<i>1125</i>人在学习</p>
  138.                         </div>
  139.                     </a>
  140.                 </li>
  141.                 <li>
  142.                     <a href="#">
  143.                         <div class="pic"><img src="./img/course01.png" alt=""></div>
  144.                         <div class="text">
  145.                             <h4>JavaScript数据看板项目实战</h4>
  146.                             <p><span>高级</span>.<i>1125</i>人在学习</p>
  147.                         </div>
  148.                     </a>
  149.                 </li>
  150.                 <li>
  151.                     <a href="#">
  152.                         <div class="pic"><img src="./img/course01.png" alt=""></div>
  153.                         <div class="text">
  154.                             <h4>JavaScript数据看板项目实战</h4>
  155.                             <p><span>高级</span>.<i>1125</i>人在学习</p>
  156.                         </div>
  157.                     </a>
  158.                 </li>
  159.                 <li>
  160.                     <a href="#">
  161.                         <div class="pic"><img src="./img/course01.png" alt=""></div>
  162.                         <div class="text">
  163.                             <h4>JavaScript数据看板项目实战</h4>
  164.                             <p><span>高级</span>.<i>1125</i>人在学习</p>
  165.                         </div>
  166.                     </a>
  167.                 </li>
  168.                 <li>
  169.                     <a href="#">
  170.                         <div class="pic"><img src="./img/course01.png" alt=""></div>
  171.                         <div class="text">
  172.                             <h4>JavaScript数据看板项目实战</h4>
  173.                             <p><span>高级</span>.<i>1125</i>人在学习</p>
  174.                         </div>
  175.                     </a>
  176.                 </li>
  177.                 <li>
  178.                     <a href="#">
  179.                         <div class="pic"><img src="./img/course01.png" alt=""></div>
  180.                         <div class="text">
  181.                             <h4>JavaScript数据看板项目实战</h4>
  182.                             <p><span>高级</span>.<i>1125</i>人在学习</p>
  183.                         </div>
  184.                     </a>
  185.                 </li>
  186.                 <li>
  187.                     <a href="#">
  188.                         <div class="pic"><img src="./img/course01.png" alt=""></div>
  189.                         <div class="text">
  190.                             <h4>JavaScript数据看板项目实战</h4>
  191.                             <p><span>高级</span>.<i>1125</i>人在学习</p>
  192.                         </div>
  193.                     </a>
  194.                 </li>
  195.                 
  196.             </ul>
  197.         </div>
  198.     </div>
  199.  
  200.     <!-- 前端 -->
  201.     <div class="wrapper">
  202.         <!-- 标题 -->
  203.         <div class="hd">
  204.             <h3>前端开发工程师</h3>
  205.             <ul>
  206.                 <li><a href="#">热门</a></li>
  207.                 <li><a href="#">热门</a></li>
  208.                 <li><a href="#">热门</a></li>
  209.             </ul>
  210.             <a href="#" class="more">查看全部</a>
  211.         </div>
  212.         <div class="bd">
  213.             <div class="left">
  214.                 <img src="./img/left.jpg" alt="">
  215.             </div>
  216.             <div class="right">
  217.                 <div class="top">
  218.                     <img src="./img/top.jpg" alt="">
  219.                 </div>
  220.                 <div class="bottom">
  221.                     <ul>
  222.                         <li>
  223.                             <a href="#">
  224.                                 <div class="pic"><img src="./img/course01.png" alt=""></div>
  225.                                 <div class="text">
  226.                                     <h4>JavaScript数据看板项目实战</h4>
  227.                                     <p><span>高级</span>.<i>1125</i>人在学习</p>
  228.                                 </div>
  229.                             </a>
  230.                         </li>
  231.                         <li>
  232.                             <a href="#">
  233.                                 <div class="pic"><img src="./img/course01.png" alt=""></div>
  234.                                 <div class="text">
  235.                                     <h4>JavaScript数据看板项目实战</h4>
  236.                                     <p><span>高级</span>.<i>1125</i>人在学习</p>
  237.                                 </div>
  238.                             </a>
  239.                         </li>
  240.                         <li>
  241.                             <a href="#">
  242.                                 <div class="pic"><img src="./img/course01.png" alt=""></div>
  243.                                 <div class="text">
  244.                                     <h4>JavaScript数据看板项目实战</h4>
  245.                                     <p><span>高级</span>.<i>1125</i>人在学习</p>
  246.                                 </div>
  247.                             </a>
  248.                         </li>
  249.                         <li>
  250.                             <a href="#">
  251.                                 <div class="pic"><img src="./img/course01.png" alt=""></div>
  252.                                 <div class="text">
  253.                                     <h4>JavaScript数据看板项目实战</h4>
  254.                                     <p><span>高级</span>.<i>1125</i>人在学习</p>
  255.                                 </div>
  256.                             </a>
  257.                         </li> 
  258.                     </ul>
  259.                 </div>
  260.             </div>
  261.         </div>
  262.     </div>
  263.  
  264.     <!-- 版权 -->
  265.     <div class="footer">
  266.         <div class="wrapper">
  267.             <div class="left">
  268.                 <a href="#"><img src="./img/logo.png" alt=""></a>
  269.                 <P>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程</P>
  270.                 <a href="#" class="download">下载APP</a>
  271.             </div>
  272.             <div class="right">
  273.                 <dl>
  274.                     <dt>合作伙伴</dt>
  275.                     <dd><a href="#">合作机构</a></dd>
  276.                     <dd><a href="#">合作机构</a></dd>
  277.                 </dl>
  278.                 <dl>
  279.                     <dt>合作伙伴</dt>
  280.                     <dd><a href="#">合作机构</a></dd>
  281.                     <dd><a href="#">合作机构</a></dd>
  282.                 </dl>
  283.                 <dl>
  284.                     <dt>合作伙伴</dt>
  285.                     <dd><a href="#">合作机构</a></dd>
  286.                     <dd><a href="#">合作机构</a></dd>
  287.                 </dl>
  288.             </div>
  289.         </div>
  290.     </div>
  291. </body>
  292.  
  293. </html>

 

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AI算法构造者/article/detail/60403
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号