Blogger Information
Blog 12
fans 0
comment 0
visits 10237
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
使用html列表标签ul配合css属性
世界上最好的语言是PHP
Original
929 people have browsed it

一、效果图

二、原图

三、思路

  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. li:first-child{
  25. border-top: 2px solid #000;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div class="container">
  31. <h1>学习猿地</h1>
  32. <ul>
  33. <li>老师都是大型互联网公司的总监级以上职位,名校毕业,老司机</li>
  34. <li>课程是最全的,有这一套精品,不需要再找任何其他学习资料弥补</li>
  35. <li>集中精力在这一套全栈课程中,做好每一节课,不断迭代打造精品</li>
  36. <li>课程以项目贯穿式讲解需要的技术,知其然知其所以然</li>
  37. <li>课程是为零基础到精通的目标设计,有基础的可选择内容学习</li>
  38. <li>学习系统模拟面授的过程,通关式学习效果却超过面授几倍</li>
  39. <li>服务好,有大牛指导,有同学之间互动,有全面的资料下载</li>
  40. <li>最好的课程价格却是行业最低的,低几倍甚至几十倍</li>
  41. </ul>
  42. </div>
  43. </body>
  44. </html>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post