一、效果图

二、原图

三、思路

  1. 学习猿地标题使用h1标签进行重点展示
  2. ul被div中的container包围
  3. 设置li的上、下边框属性，及list-style中图标inside属性。
  4. 行高通过line-height来进行设置
  5. 由于top和bottom会有重叠现象，因此通过增加margin中的属性值，来去除重叠导致的加粗border
  6. UI还原度还不够好，需要时间来细化。

四、源代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>使用html列表标签、配合css列表属性实现如下效果</title>
  6.     <style>
  7.         .container{
  8.             width: 600px;
  9.             height: 800px;
  10.             margin: auto;
  11.         }
  12.         h1{
  13.             text-align: center;
  14.             color: hotpink;
  15.             font-size: 50px;
  16.         }
  17.         li{
  18.             border-top:1px solid #000;
  19.             border-bottom: 1px solid #000;
  20.             list-style: inside url("./images/like.png");
  21.             line-height: 40px;
  22.             margin: 0 0 -1px -1px;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="container">
  28.         <h1>学习猿地</h1>
  29.         <ul>
  30.             <li>老师都是大型互联网公司的总监级以上职位，名校毕业，老司机</li>
  31.             <li>课程是最全的，有这一套精品，不需要再找任何其他学习资料弥补</li>
  32.             <li>集中精力在这一套全栈课程中，做好每一节课，不断迭代打造精品</li>
  33.             <li>课程以项目贯穿式讲解需要的技术，知其然知其所以然</li>
  34.             <li>课程是为零基础到精通的目标设计，有基础的可选择内容学习</li>
  35.             <li>学习系统模拟面授的过程，通关式学习效果却超过面授几倍</li>
  36.             <li>服务好，有大牛指导，有同学之间互动，有全面的资料下载</li>
  37.             <li>最好的课程价格却是行业最低的，低几倍甚至几十倍</li>
  38.         </ul>
  39.     </div>
  41. </body>
  42. </html>