ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端ul好看的li列表样式 [打印本页]
作者: 饭宝    时间: 2024-6-14 22:29
标题: 前端ul好看的li列表样式
效果

以下是实际效果截图：

html文件

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <style>
  6.         .other-item-title {
  7.             margin: 10px 20px;
  8.             padding: 5px;
  9.             line-height: 30px;
  10.             font-weight: 400;
  11.             border-bottom: 1px solid #e8e9e7;
  12.             color: #383937;
  13.             position: relative;
  14.             font-size: 18px
  15.         }
  17.         .other-item .inner {
  18.             margin: 0 20px;
  19.             padding-bottom: 10px
  20.         }
  22.         .inner .hot-list-article li {
  23.             display: block;
  24.             line-height: 32px;
  25.             position: relative;
  26.             margin: 3px 0;
  27.             counter-increment: nums;
  28.             padding-left: 30px;
  29.             overflow: hidden;
  30.             word-wrap: normal !important;
  31.             white-space: nowrap;
  32.             text-overflow: ellipsis
  33.         }
  35.         .hot-list-article li a {
  36.             color: #787977
  37.         }
  39.         .hot-list-article li:before {
  40.             color: #000;
  41.             width: 22px;
  42.             height: 22px;
  43.             line-height: 22px;
  44.             text-align: center;
  45.             content: counter(nums, decimal);
  46.             position: absolute;
  47.             left: 0;
  48.             top: 5px;
  49.             border-radius: 100%;
  50.             background-color: #edefee;
  51.             text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  52.             font-family: SourceCodeProRegular, Menlo, Monaco, Consolas, "Courier New", monospace, 'Helvetica Neue', Arial, sans-serif
  53.         }
  55.         /*以上就是一个稍微好看的有编号的li列表 */
  56.         /*加上以下之后，排名前三的数据编号就添加了编号颜色，更好看*/
  57.         .hot-list-article li:first-child:before,
  58.         .hot-list-article li:nth-child(2):before,
  59.         .hot-list-article li:nth-child(3):before {
  60.             color: #fff;
  61.             text-shadow: none
  62.         }
  64.         .hot-list-article li:first-child:before {
  65.             background-color: #e24d46
  66.         }
  68.         /*第1行的行号样式*/
  69.         .hot-list-article li:nth-child(2):before {
  70.             background-color: #2ea7e0
  71.         }
  73.         /*第2行的行号样式*/
  74.         .hot-list-article li:nth-child(3):before {
  75.             background-color: #6bc30d
  76.         }
  78.         /*第3行的行号样式*/
  79.         .hot-list-article li a:hover {
  80.             text-decoration: underline;
  81.             color: #6bc30d
  82.         }
  84.         /*鼠标移过更好看*/
  85.     </style>
  86. </head>
  88. <body>
  89.     <div class="other-item">
  90.         <h5 class="other-item-title">热门文章</h5>
  91.         <div class="inner">
  92.             <ul class="hot-list-article">
  93.                 <li> <a href="/Blog/Read/9">SpringBoot 入门爬虫项目实战</a></li>
  94.                 <li> <a href="/Blog/Read/12">SpringBoot 2.x 教你快速入门</a></li>
  95.                 <li> <a href="/Blog/Read/13">java学习路线</a></li>
  96.                 <li> <a href="/Blog/Read/4">基于SpringBoot+JWT+Redis跨域单点登录的实现</a></li>
  97.                 <li> <a href="/Blog/Read/7">SpringBoot 中如何使用SwaggerAPI接口文档？</a></li>
  98.                 <li> <a href="/Blog/Read/11">小白轻松入门Redis</a></li>
  99.                 <li> <a href="/Blog/Read/14">微信一键登录功能的实现</a></li>
  100.                 <li> <a href="/Blog/Read/8">NPOI导入导出Excel</a></li>
  101.             </ul>
  102.         </div>
  103.     </div>
  104. </body>
  106. </html>
复制代码
vue文件

vue2 中实现
  1. <template>
  2.   <div class="other-item">
  3.     <h5 class="other-item-title">热门文章</h5>
  4.     <div class="inner">
  5.       <ul class="hot-list-article">
  6.         <li v-for="(item, i) in data" :key="i">
  7.           {{ item.title }}
  8.         </li>
  9.       </ul>
  10.     </div>
  11.   </div>
  12. </template>
  13. <script>
  14. export default {
  15.   data() {
  16.     return {
  17.       data: [
  18.         { title: "SpringBoot 入门爬虫项目实战" },
  19.         { title: "java学习路线" },
  20.         { title: "基于SpringBoot+JWT+Redis跨域单点登录的实现" },
  21.         { title: "SpringBoot 中如何使用SwaggerAPI接口文档？" },
  22.         { title: "小白轻松入门Redis" },
  23.         { title: "微信一键登录功能的实现" },
  24.         { title: "NPOI导入导出Excel" },
  25.       ],
  26.     };
  27.   },
  28.   created() {},
  29.   methods: {},
  30. };
  31. </script>
  32. <style lang="scss" scoped>
  33. ul {
  34.   li {
  35.     text-align: left;
  36.     font-size: 16px;
  37.     cursor: pointer;
  39.     &:hover {
  40.       color: #2ea7e0;
  41.     }
  42.   }
  43. }
  45. .other-item-title {
  46.   margin: 10px 20px;
  47.   padding: 5px;
  48.   line-height: 30px;
  49.   font-weight: 400;
  50.   border-bottom: 1px solid #e8e9e7;
  51.   color: #383937;
  52.   position: relative;
  53.   font-size: 18px;
  54. }
  56. .other-item .inner {
  57.   margin: 0 20px;
  58.   padding-bottom: 10px;
  59. }
  61. .inner .hot-list-article li {
  62.   display: block;
  63.   line-height: 32px;
  64.   position: relative;
  65.   margin: 3px 0;
  66.   counter-increment: nums;
  67.   padding-left: 30px;
  68.   overflow: hidden;
  69.   word-wrap: normal !important;
  70.   white-space: nowrap;
  71.   text-overflow: ellipsis;
  72. }
  74. .hot-list-article li a {
  75.   color: #787977;
  76. }
  78. .hot-list-article li:before {
  79.   color: #000;
  80.   width: 22px;
  81.   height: 22px;
  82.   line-height: 22px;
  83.   text-align: center;
  84.   content: counter(nums, decimal);
  85.   position: absolute;
  86.   left: 0;
  87.   top: 5px;
  88.   border-radius: 100%;
  89.   background-color: #edefee;
  90.   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  91.   font-family: SourceCodeProRegular, Menlo, Monaco, Consolas, "Courier New",
  92.     monospace, "Helvetica Neue", Arial, sans-serif;
  93. }
  95. /*以上就是一个稍微好看的有编号的li列表 */
  96. /*加上以下之后，排名前三的数据编号就添加了编号颜色，更好看*/
  97. .hot-list-article li:first-child:before,
  98. .hot-list-article li:nth-child(2):before,
  99. .hot-list-article li:nth-child(3):before {
  100.   color: #fff;
  101.   text-shadow: none;
  102. }
  104. .hot-list-article li:first-child:before {
  105.   background-color: #e24d46;
  106. }
  108. /*第1行的行号样式*/
  109. .hot-list-article li:nth-child(2):before {
  110.   background-color: #2ea7e0;
  111. }
  113. /*第2行的行号样式*/
  114. .hot-list-article li:nth-child(3):before {
  115.   background-color: #6bc30d;
  116. }
  118. /*第3行的行号样式*/
  119. .hot-list-article li a:hover {
  120.   text-decoration: underline;
  121.   color: #6bc30d;
  122. }
  124. /*鼠标移过更好看*/
  125. </style>
复制代码
参考文章：ul好看的li列表样式
放工~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4