• 综合案例：学成在线案例

    1.准备素材和工具

    1.学成在线PDS源文件。

    2.开发工具=PS（切图）/cutterman插件+vscode（代码）+Chrome（测试）。

    2.案例准备工作

    本次采取结构与样式相分离思想：

    1.创建study目录文件夹（用于存放页面的相关内容）

    2.用vscode打开这么目录文件夹

    3.study目录内新建images文件夹，用于保存图片

    4.新建首页文件index.heml(网站首页统一规定为index.html

    5.新建style.css样式文件，采用外链接样式表

    6.使用<link>标签将样式引入到html页面文件中

    7.样式表写入清除内外边距的样式，来监测样式是否引入成功

    3.css属性书写书序***

    建议遵循以下顺序：

    1.布局定位属性：display、position、float、clear、visibility、overflow（建议display第一个写，其关系到模式）

    2.自身属性：width、height、margin、padding、border、background

    3.文件属性：color、font、text-decoration、text-align、vertical-align、white-space、break-word

    4.其他属性：（css）：content、cursor、borde-radis、box-shadow、text-shadow、background：linear-fradident......

    .jdc{

        display:block;

        position:relative;

        float:left;

        width:100px;

        height:100px;

        margin:0 auto;

        padding:10px 10px;

        font-family:Arial;

        color:#333;

        background:rbga(0,0,0,.3);

        border-radis:10px;

    }

    4.页面布局的思路 为了提高网页制作的效率，布局时通常有以下的整体思路：

    1.必须确定页面的版心（可视区）。测量可得知

    2.分析页面中的行模块，以及每个行模块中的列模块，页面布局第一准则

    3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置，页面布局第二准则

    4.制作HTML结构，遵循先有结构，后有样式的原则，结构永远最重要

    5.先理清布局结构，再写代码尤为重要，这需要多写积累经验

    5.确定版心

    该页面的版心是1200像素，每个版心都需要水平居中对齐，可以定义版心为公共类；

    .w{

        width:1200px;

        margin:auto;

    }

     6.头部制作

    导航栏注意点：
    实际开发中，我们不会直接用链接a而是用i包含链接(i+)的做法。
    1.i+a语义更清晰，一看这就是有条理的列表型内容。
    2.如果直接拥a,搜索引擎容易辨别为有堆砌关键字嫌凝（故意堆砌关键字容易被搜索擎有降权的风险），从而影响网站排名
    注意：
    1.让导航栏一行显示，给ⅱ加浮动，因为ⅱ是块级元素，需要一行显示
    2.这个nv导航栏可以不给宽度将来可以继续添其余文字
    3.因为导航栏里面文字不一样多，所以最好给链接a左右padding:撑开盒子，而不是指定宽度

    7.banner制作

     8.精品推荐小模块制作

     9.精品推荐大模块制 

     盒子模型：

    • 1号盒子为最大的盒子，b0x版心水平居中对齐
    • 2号盒子为上面部分，b0x-hd-里面左侧标题H3左浮动，右侧链接a右浮动
    • 3号盒子为底下部分，b0bd-里面是无序列表，有10个小i组成
    • 小li外边距的问题，这里有个小技巧：给box-hd宽度为1215就可以一行装开5个li

    10.底部模块

    css样式代码： 

    1. * {
    2.   margin: 0;
    3.   padding: 0;
    4. }
    5.  
    6. /* 设置页面版心的宽度及外边距 */
    7. .w {
    8.   width: 1200px;
    9.   margin: auto;
    10. }
    11.  
    12. body {
    13.   background-color: #f3f5f7;
    14. }
    15.  
    16. li {
    17.   list-style: none;
    18. }
    19.  
    20. a {
    21.   text-decoration: none;
    22. }
    23.  
    24. .clearfix:after {
    25.   content: "";
    26.   display: block;
    27.   height: 0;
    28.   clear: both;
    29.   visibility: hidden;
    30. }
    31.  
    32. .clearfix {
    33.   /* IE6、7专有 */
    34.   *zoom: 1;
    35. }
    36.  
    37. .head {
    38.   height: 42px;
    39.   /* 注意：此地方会层叠（就近原则）w里面的auto，所以需要设置head中margin的左右边距 */
    40.   margin: 30px auto;
    41. }
    42.  
    43. /* logo部分 */
    44. .logo {
    45.   float: left;
    46.   width: 198px;
    47.   height: 42px;
    48. }
    49.  
    50. /* 导航栏部分 */
    51. .nav {
    52.   float: left;
    53.   margin-left: 65px;
    54. }
    55.  
    56. .nav ul li {
    57.   float: left;
    58.   margin: 0 15px;
    59. }
    60.  
    61. .nav ul li a {
    62.   /* 将a（行内元素）标签转换为行内块元素 */
    63.   display: inline-block;
    64.   height: 42px;
    65.   padding: 0 10px;
    66.   line-height: 42px;
    67.   font-size: 18px;
    68.   color: #050505;
    69. }
    70.  
    71. /* 鼠标经过时展示下划线 */
    72. .nav ul li a:hover {
    73.   border-bottom: 2px solid #00a4ff;
    74. }
    75.  
    76. /* 搜索部分 */
    77. .search {
    78.   float: left;
    79.   width: 412px;
    80.   height: 42px;
    81.   margin-left: 50px;
    82. }
    83.  
    84. .search input {
    85.   /* input属于行内块元素，想要挨在一起没有缝隙，需要浮动 */
    86.   float: left;
    87.   /* 输入框宽度是360px，左侧内边距设置为20px，为了不影响盒子的大小，需要减掉内边距 */
    88.   width: 340px;
    89.   height: 40px;
    90.   padding-left: 20px;
    91.   border: 1px solid #00a4ff;
    92.   border-right: 0;
    93.   font-size: 14px;
    94.   color: #bfbfbf;
    95. }
    96.  
    97. .search button {
    98.   float: left;
    99.   height: 42px;
    100.   width: 50px;
    101.   border: 0;
    102.   background: url(images/btn.png);
    103. }
    104.  
    105. .user {
    106.   float: right;
    107.   margin-right: 35px;
    108.   line-height: 42px;
    109.   color: #666666;
    110. }
    111.  
    112. .user p {
    113.   float: right;
    114.   line-height: 42px;
    115.   display: inline-block;
    116. }
    117.  
    118. .user img {
    119.   margin: 5px 0;
    120. }
    121.  
    122. /* banner部分 */
    123. .banner {
    124.   height: 420px;
    125.   background-color: #033db2;
    126. }
    127.  
    128. .banner .w {
    129.   height: 420px;
    130.   background-image: url(images/banner1.png);
    131. }
    132.  
    133. /* banner侧边栏部分 */
    134. .subnav {
    135.   float: left;
    136.   width: 190px;
    137.   height: 420px;
    138.   background: rgba(0, 0, 0, 0.3);
    139. }
    140.  
    141. .subnav ul li {
    142.   height: 45px;
    143.   line-height: 45px;
    144.   padding: 0 20px;
    145. }
    146.  
    147. .subnav ul li a {
    148.   font-size: 14px;
    149.   color: #fff;
    150. }
    151.  
    152. .subnav ul li a span {
    153.   float: right;
    154. }
    155.  
    156. /* 课程部分 */
    157. .course {
    158.   float: right;
    159.   width: 230px;
    160.   height: 300px;
    161.   margin: 50px 0;
    162.   background-color: #ffffff;
    163. }
    164.  
    165. .course h3 {
    166.   display: inline-block;
    167.   width: 230px;
    168.   height: 50px;
    169.   line-height: 50px;
    170.   background: #9bceea;
    171.   text-align: center;
    172.   color: #ffffff;
    173. }
    174.  
    175. .course .bd {
    176.   padding: 0 20px;
    177. }
    178. .course ul li h4 {
    179.   font-size: 14px;
    180.   color: #4e4e4e;
    181. }
    182.  
    183. .course .bd ul li p {
    184.   font-size: 12px;
    185.   color: #a5a5a5;
    186. }
    187.  
    188. .course .bd ul .last {
    189.   width: 192px;
    190.   height: 38px;
    191.   margin: 0 15px;
    192.   border: 1px solid #aad8ff;
    193. }
    194.  
    195. .course .bd ul li {
    196.   padding: 14px 0;
    197.   border-bottom: 1px solid #bebebe;
    198. }
    199.  
    200. .course .bd .more {
    201.   display: inline-block;
    202.   height: 38px;
    203.   width: 188px;
    204.   border: 1px solid #22b0ff;
    205.   margin-top: 5px;
    206.   line-height: 38px;
    207.   text-align: center;
    208.   font-size: 16px;
    209.   color: #00a4ff;
    210.   font-weight: 700;
    211. }
    212.  
    213. /* 精品推荐部分 */
    214. .goods {
    215.   height: 60px;
    216.   margin-top: 8px;
    217.   line-height: 60px;
    218.   background-color: #ffffff;
    219.   box-shadow: 0 2px 3px 3px rgba(0, 0, 0, 0.1);
    220. }
    221.  
    222. .goods h3 {
    223.   float: left;
    224.   margin: 0 35px;
    225.   font-size: 16px;
    226.   color: #00a4ff;
    227.   font-weight: 700;
    228. }
    229.  
    230. .goods ul {
    231.   float: left;
    232. }
    233.  
    234. .goods ul li {
    235.   float: left;
    236. }
    237.  
    238. .goods ul li a {
    239.   padding: 0 35px;
    240.   border-left: 1px solid #ccc;
    241.   font-size: 16px;
    242.   color: #050505;
    243.   border-left: 1px solid #ccc;
    244. }
    245.  
    246. .mod {
    247.   float: right;
    248.   margin-right: 27px;
    249. }
    250.  
    251. .mod a {
    252.   font-size: 14px;
    253.   color: #00a4ff;
    254. }
    255.  
    256. /* 精品推荐具体课程部分 */
    257. .box1 {
    258.   margin-top: 10px;
    259. }
    260.  
    261. .box1 .box-hd {
    262.   height: 60px;
    263.   line-height: 60px;
    264. }
    265.  
    266. .box1 .box-hd h3 {
    267.   float: left;
    268.   font-size: 20px;
    269.   color: #494949;
    270.   font-weight: normal;
    271. }
    272.  
    273. .box1 .box-hd a {
    274.   float: right;
    275.   margin-right: 30px;
    276.   font-size: 12px;
    277.   color: #a5a5a5;
    278. }
    279.  
    280. /* 把li的父亲ul修改为足够宽一行能装5个盒子 就不会换行了 */
    281. .box-bd ul {
    282.   width: 1225px;
    283. }
    284.  
    285. .box-bd ul li {
    286.   /* 子绝父相 */
    287.   position: relative;
    288.   float: left;
    289.   width: 230px;
    290.   height: 270px;
    291.   margin-right: 12px;
    292.   margin-bottom: 15px;
    293.   background-color: #fff;
    294. }
    295.  
    296. /* 强制图片宽度和父级li的宽度一样,使用子级选择器 */
    297. .box-bd ul li > img {
    298.   width: 100%;
    299. }
    300.  
    301. em {
    302.   /* 子绝父相 */
    303.   position: absolute;
    304.   top: 4px;
    305.   right: -4px;
    306. }
    307.  
    308. .box-bd ul li h4 {
    309.   margin: 20px 20px 20px 25px;
    310.   font-size: 14px;
    311.   color: #050505;
    312.   font-weight: normal;
    313. }
    314.  
    315. .box-bd ul li .info {
    316.   padding-left: 25px;
    317.   font-size: 12px;
    318.   color: #999;
    319. }
    320.  
    321. .box-bd ul li span {
    322.   color: #ff7c2d;
    323. }
    324.  
    325. /* 编程入门头部部分 */
    326. .box2 .box2-hd {
    327.   height: 60px;
    328.   line-height: 60px;
    329. }
    330.  
    331. .box2-hd h4 {
    332.   float: left;
    333.   margin-right: 350px;
    334.   font-size: 20px;
    335.   color: #494949;
    336.   font-weight: normal;
    337. }
    338.  
    339. .box2-hd ul {
    340.   float: left;
    341. }
    342.  
    343. .box2-hd ul li a {
    344.   display: inline-block;
    345.   margin-right: 70px;
    346.   font-size: 16px;
    347.   color: #868686;
    348. }
    349.  
    350. .box2-hd .more {
    351.   float: right;
    352.   margin-right: 30px;
    353.   font-size: 12px;
    354.   color: #a5a5a5;
    355. }
    356.  
    357. /* 编程入门主体部分 */
    358. .box2-bd .left {
    359.   float: left;
    360.   width: 229px;
    361.   height: 393px;
    362. }
    363.  
    364. .box2-bd .right {
    365.   float: right;
    366. }
    367.  
    368. .box2-bd .right-s {
    369.   float: right;
    370.   height: 100px;
    371. }
    372. .box2-bd .right-x ul {
    373.   float: right;
    374. }
    375.  
    376. .box2-bd .right-x ul li {
    377.   float: right;
    378.   margin: 22px 0 0 14px;
    379.   width: 228px;
    380.   height: 270px;
    381.   background-color: #fff;
    382. }
    383. .box2-bd .right-x ul li img {
    384.   width: 100%;
    385. }
    386.  
    387. .box2-bd .right-x ul li h4 {
    388.   margin: 25px 20px 20px 20px;
    389.   height: 30px;
    390.   width: 190px;
    391.   font-size: 14px;
    392.   color: #050505;
    393. }
    394.  
    395. .box2-bd .right-x ul li .info {
    396.   margin-left: 25px;
    397.   font-size: 12px;
    398.   color: #999;
    399. }
    400.  
    401. .box2-bd .right-x ul li .info span {
    402.   color: #ff7c2d;
    403. }
    404.  
    405. /* footer部分 */
    406. .footer {
    407.   height: 415px;
    408.   margin-top: 30px;
    409.   background-color: #fff;
    410. }
    411.  
    412. .footer .w {
    413.   padding-top: 35px;
    414. }
    415. .copyright {
    416.   float: left;
    417. }
    418.  
    419. .copyright p {
    420.   margin: 20px 0 15px 0;
    421.   font-size: 12px;
    422.   color: #333;
    423. }
    424.  
    425. /* a标签属于行内元素，设置的高度和宽度无效，需要转换成块元素或行内块元素 */
    426. .copyright a {
    427.   display: block;
    428.   width: 118px;
    429.   height: 33px;
    430.   border: 1px solid #00a4ff;
    431.   font-size: 16px;
    432.   color: #00a4ff;
    433.   line-height: 33px;
    434.   text-align: center;
    435. }
    436.  
    437. .links {
    438.   float: right;
    439. }
    440.  
    441. .links dl {
    442.   float: left;
    443.   padding-left: 120px;
    444. }
    445.  
    446. .links dl dt {
    447.   font-size: 16px;
    448.   color: #333;
    449. }
    450. .links dl dd a {
    451.   margin-top: 7px;
    452.   font-size: 12px;
    453.   color: #333;
    454. }

    结构代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>学成在线首页</title>
    8.     <link rel="stylesheet" href="style.css" />
    9.   </head>
    10.   <body>
    11.     <!-- 头部区域开始 -->
    12.     <div class="head w">
    13.       <!-- logo部分 -->
    14.       <div class="logo">
    15.         <img src="images/logo.png" alt="" />
    16.       </div>
    17.  
    18.       <!-- 导航栏部分 -->
    19.       <div class="nav">
    20.         <ul>
    21.           <li>
    22.             <a href="#">首页</a>
    23.           </li>
    24.           <li>
    25.             <a href="#">课程</a>
    26.           </li>
    27.           <li class="last">
    28.             <a href="#">职业规划</a>
    29.           </li>
    30.         </ul>
    31.       </div>
    32.  
    33.       <!-- 搜索部分 -->
    34.       <div class="search">
    35.         <input type="text" value="输入关键词" />
    36.         <button></button>
    37.       </div>
    38.  
    39.       <!-- 用户部分 -->
    40.       <div class="user">
    41.         <img src="images/user.png" alt="" />
    42.         <p>qq-leishui</p>
    43.       </div>
    44.     </div>
    45.     <!-- 头部区域结束 -->
    46.  
    47.     <!-- banner部分开始 -->
    48.     <div class="banner">
    49.       <!-- 版心 -->
    50.       <div class="w">
    51.         <!-- 左侧边栏部分开始 -->
    52.         <div class="subnav">
    53.           <ul>
    54.             <li>
    55.               <a href="#">前端开发 <span>&gt</span></a>
    56.             </li>
    57.             <li><a href="#">后端开<span>&gt</span></a></li>
    58.             <li><a href="#">移动开<span>&gt</span></a></li>
    59.             <li><a href="#">人工智<span>&gt</span></a></li>
    60.             <li><a href="#">商业预<span>&gt</span></a></li>
    61.             <li><a href="#">云计算<span>&gt</span>大数据</a></li>
    62.             <li><a href="#">运维&<span>&gt</span>测试</a></li>
    63.             <li><a href="#">UI设计<span>&gt</span>a></li>
    64.             <li><a href="#">产品<span>&gt</span></li>
    65.           </ul>
    66.         </div>
    67.         <!-- 左侧边栏结束 -->
    68.  
    69.         <!-- 右侧边栏开始 -->
    70.         <div class="course">
    71.           <h3>我的课程表</h3>
    72.           <div class="bd">
    73.             <ul>
    74.               <li>
    75.                 <h4>继续学习 编程语言设计</h4>
    76.                 <p>正在学习-面向对象</p>
    77.               </li>
    78.               <li>
    79.                 <h4>继续学习 编程语言设计</h4>
    80.                 <p>正在学习-面向对象</p>
    81.               </li>
    82.               <li>
    83.                 <h4>继续学习 编程语言设计</h4>
    84.                 <p>正在学习-面向对象</p>
    85.               </li>
    86.             </ul>
    87.             <a href="#" class="more">全部课程</a>
    88.           </div>
    89.           <!-- 右侧边栏结束 -->
    90.  
    91.         </div>
    92.       </div>
    93.     </div>
    94.     <!-- banner部分结束 -->
    95.  
    96.     <!-- 精品推荐部分开始 -->
    97.     <div class="goods w">
    98.       <h3>精品推荐</h3>
    99.       
    100.       <!-- 精品推荐课程部分开始 -->
    101.       <div class="">
    102.         <ul>
    103.           <li>
    104.             <a href="#">  JQuery</a>
    105.           </li>
    106.           <li>
    107.             <a href="#">  Apark</a>
    108.           </li>
    109.           <li>
    110.             <a href="#">  MySQL</a>
    111.           </li>
    112.           <li>
    113.             <a href="#">  JavaWeb</a>
    114.           </li>
    115.           <li>
    116.             <a href="#">  MySQL</a>
    117.           </li>
    118.          <li>
    119.           <a href="#">  JavaWeb</a>
    120.          </li>
    121.         </ul>        
    122.       </div>
    123.       <!-- 精品课程推荐部分结束 -->
    124.  
    125.       <!-- 修改兴趣部分开始 -->
    126.       <div class="mod"><a href="#">修改兴趣</a></div>
    127.       <!-- 修改兴趣部分结束 -->
    128.     </div>
    129.      <!-- 精品推荐部分结束 -->
    130.  
    131.      <!-- 精品推荐课程部分开始 -->
    132.      <div class="box1 w">
    133.        <div class="box-hd">
    134.          <h3>精品推荐</h3>
    135.          <a href="#">查看全部</a>
    136.        </div>
    137.        <div class="box-bd">
    138.          <ul class="clearfix">
    139.            <li>
    140.              <em>
    141.                <img src="images/hot.png" alt="">
    142.              </em>
    143.              <img src="images/tj1.png" alt="">
    144.              <h4>Think PHP 5.0 博客系统实战项目演练  </h4>
    145.              <div class="info">
    146.                <span>高级</span> •  1125人在学习
    147.              </div>
    148.            </li>
    149.  
    150.            <li>
    151.             <img src="images/tj2.png" alt="">
    152.             <h4>Android 网络图片加载框架详解  </h4>
    153.             <div class="info">
    154.               <span>高级</span> •  1125人在学习
    155.             </div>
    156.           </li>
    157.  
    158.           <li>
    159.             <img src="images/tj3.png" alt="">
    160.             <h4>Angular 2 最新框架+主流技术+项目实战  </h4>
    161.             <div class="info">
    162.               <span>高级</span> •  1125人在学习
    163.             </div>
    164.           </li>
    165.  
    166.           <li>
    167.             <img src="images/tj45.png" alt="">
    168.             <h4>Android Hybrid APP开发实战 H5+原生！  </h4>
    169.             <div class="info">
    170.               <span>高级</span> •  1125人在学习
    171.             </div>
    172.           </li>
    173.  
    174.           <li>
    175.             <img src="images/tj1.png" alt="">
    176.             <h4>Android Hybrid APP开发实战 H5+原生！  </h4>
    177.             <div class="info">
    178.               <span>高级</span> •  1125人在学习
    179.             </div>
    180.           </li>
    181.  
    182.           <li>
    183.             <img src="images/tj1.png" alt="">
    184.             <h4>Think PHP 5.0 博客系统实战项目演练  </h4>
    185.             <div class="info">
    186.               <span>高级</span> •  1125人在学习
    187.             </div>
    188.           </li>
    189.  
    190.           <li>
    191.             <img src="images/tj2.png" alt="">
    192.             <h4>Think PHP 5.0 博客系统实战项目演练  </h4>
    193.             <div class="info">
    194.               <span>高级</span> •  1125人在学习
    195.             </div>
    196.           </li>
    197.  
    198.           <li>
    199.             <img src="images/tj3.png" alt="">
    200.             <h4>Think PHP 5.0 博客系统实战项目演练  </h4>
    201.             <div class="info">
    202.               <span>高级</span> •  1125人在学习
    203.             </div>
    204.           </li>
    205.  
    206.           <li>
    207.             <img src="images/tj45.png" alt="">
    208.             <h4>Android Hybrid APP开发实战 H5+原生！  </h4>
    209.             <div class="info">
    210.               <span>高级</span> •  1125人在学习
    211.             </div>
    212.           </li>
    213.  
    214.           <li>
    215.             <img src="images/tj45.png" alt="">
    216.             <h4>Android Hybrid APP开发实战 H5+原生！  </h4>
    217.             <div class="info">
    218.               <span>高级</span> •  1125人在学习
    219.             </div>
    220.           </li>           
    221.          </ul>
    222.        </div>
    223.      </div>
    224.      <!-- 精品推荐课程部分结束 -->
    225.  
    226.      <!-- 编程入门部分开始 -->
    227.  
    228.      <div class="box2 w">
    229.        <!-- 编程入门头部开始 -->
    230.        <div class="box2-hd">
    231.          <h4>编程入门</h4>
    232.          <div>
    233.            <ul>
    234.              <li>
    235.               <a href="#">热门</a>
    236.               <a href="#">初级</a>
    237.               <a href="#">中级</a>
    238.               <a href="#">高级</a>
    239.             </li>
    240.            </ul>
    241.          </div>
    242.          <a href="#" class="more">查看全部</a>
    243.        </div>
    244.        <!-- 编程入门头部结束 -->
    245.        <!-- 编程入门主体部分开始 -->
    246.        <div class="box2-bd clearfix">
    247.          <!-- 编程入门主体部分结束 -->
    248.          <div class="left">
    249.            <img src="images/编程入门左侧.png" alt="">
    250.          </div >
    251.          <div class="right">
    252.            <div class="right-s">
    253.              <img src="images/编程入门右上.png" alt="">
    254.            </div>
    255.            <div class="right-x">
    256.              <ul>
    257.                <li>
    258.                  <img src="images/tj1.png" alt="">
    259.                  <h4>Android Hybrid APP开发实战 H5+原生！</h4>
    260.                  <div class="info">
    261.                   <span>高级</span>  •  1125人在学习
    262.                  </div>
    263.                 </li>
    264.                <li><img src="images/tj2.png" alt="">
    265.                 <h4>Android Hybrid APP开发实战 H5+原生！</h4>
    266.                 <div class="info">
    267.                  <span>高级</span>  •  1125人在学习
    268.                 </div></li>
    269.                <li><img src="images/tj3.png" alt="">
    270.                 <h4>Kami2首页界面切换效果 </h4>
    271.                 <div class="info">
    272.                  <span>高级</span>  •  1125人在学习
    273.                 </div></li>
    274.                <li><img src="images/tj45.png" alt="">
    275.                 <h4>Android Hybrid APP开发实战 H5+原生！</h4>
    276.                 <div class="info">
    277.                  <span>高级</span>  •  1125人在学习
    278.                 </div></li>
    279.             
    280.              </ul>
    281.            </div>
    282.          </div>
    283.        </div >  
    284.      </div>
    285.      <!-- 编程入门部分结束 -->
    286.  
    287.      <!-- footer 部分开始 -->
    288.      <div class="footer ">
    289.        <div class="w">
    290.          <div class="copyright">
    291.            <img src="images/logo.png" alt="">
    292.            <!-- 版本描述分为两行，p标签中使用br标签 -->
    293.            <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
    294.             © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
    295.             <a href="#" class="app">下载app</a>
    296.          </div>
    297.          <div class="links">
    298.           <dl>
    299.             <dt>关于学成网</dt>
    300.             <dd><a href="#">关于</a></dd>
    301.             <dd><a href="#">管理团队</a></dd>
    302.             <dd><a href="#">工作机会</a></dd>
    303.             <dd><a href="#">客户服务</a></dd>
    304.             <dd><a href="#">帮助</a></dd>
    305.           </dl>
    306.           <dl>
    307.             <dt>新手指南</dt>
    308.             <dd><a href="#">如何注册</a></dd>
    309.             <dd><a href="#">如何选课</a></dd>
    310.             <dd><a href="#">如何拿到毕业证</a></dd>
    311.             <dd><a href="#">学分是什么</a></dd>
    312.             <dd><a href="#">考试未通过怎么办</a></dd>
    313.           </dl>
    314.           <dl>
    315.             <dt>合作伙伴</dt>
    316.             <dd><a href="#">合作机构</a></dd>
    317.             <dd><a href="#">合作导师</a></dd>
    318.           </dl>
    319.          </div>
    320.        </div>
    321.      </div>
    322.      <!-- footer 部分结束 -->
    323.   </body>
    324. </html>

  • 相关阅读:
    Hive安装教程-Hadoop集成Hive
    eyb：Redis学习（3）
    html+CSS+js部分基础运用14
    学长讲解 - FPGA与单片机的区别 【毕设基础概念】
    PHP is_file 和file_exists的区别
    Postgresql实验系列（4）SIMD提升线性搜索性能24.5%（附带PG SIMD完整用例）
    寒假训练——第三周（记忆化搜索）
    Find My背包|苹果Find My技术与背包相结合，智能防丢，全球定位
    分布式和微服务
    JUC第四讲：Java中的锁/CAS原理与案例分析
  • 原文地址：https://blog.csdn.net/weixin_47481102/article/details/124978353