前端ul好看的li列表样式

文章目录

• • 效果
  • html文件
  • vue文件

    效果

    以下是实际效果截图：

    html文件

                .other-item-title {            margin: 10px 20px;            padding: 5px;            line-height: 30px;            font-weight: 400;            border-bottom: 1px solid #e8e9e7;            color: #383937;            position: relative;            font-size: 18px        }        .other-item .inner {            margin: 0 20px;            padding-bottom: 10px        }        .inner .hot-list-article li {            display: block;            line-height: 32px;            position: relative;            margin: 3px 0;            counter-increment: nums;            padding-left: 30px;            overflow: hidden;            word-wrap: normal !important;            white-space: nowrap;            text-overflow: ellipsis        }        .hot-list-article li a {            color: #787977        }        .hot-list-article li:before {            color: #000;            width: 22px;            height: 22px;            line-height: 22px;            text-align: center;            content: counter(nums, decimal);            position: absolute;            left: 0;            top: 5px;            border-radius: 100%;            background-color: #edefee;            text-shadow: 0 1px 0 rgba(255, 255, 255, .5);            font-family: SourceCodeProRegular, Menlo, Monaco, Consolas, "Courier New", monospace, 'Helvetica Neue', Arial, sans-serif        }        /*以上就是一个稍微好看的有编号的li列表 */        /*加上以下之后，排名前三的数据编号就添加了编号颜色，更好看*/        .hot-list-article li:first-child:before,        .hot-list-article li:nth-child(2):before,        .hot-list-article li:nth-child(3):before {            color: #fff;            text-shadow: none        }        .hot-list-article li:first-child:before {            background-color: #e24d46        }        /*第1行的行号样式*/        .hot-list-article li:nth-child(2):before {            background-color: #2ea7e0        }        /*第2行的行号样式*/        .hot-list-article li:nth-child(3):before {            background-color: #6bc30d        }        /*第3行的行号样式*/        .hot-list-article li a:hover {            text-decoration: underline;            color: #6bc30d        }        /*鼠标移过更好看*/                
    热门文章
                        

    • SpringBoot 入门爬虫项目实战
    • SpringBoot 2.x 教你快速入门
    • java学习路线
    • 基于SpringBoot+JWT+Redis跨域单点登录的实现
    • SpringBoot 中如何使用SwaggerAPI接口文档？
    • 小白轻松入门Redis
    • 微信一键登录功能的实现
    • NPOI导入导出Excel

    vue文件

    vue2 中实现

          
    热门文章
              

    • {{ item.title }}
    export default { data() { return { data: [ { title: "SpringBoot 入门爬虫项目实战" }, { title: "java学习路线" }, { title: "基于SpringBoot+JWT+Redis跨域单点登录的实现" }, { title: "SpringBoot 中如何使用SwaggerAPI接口文档？" }, { title: "小白轻松入门Redis" }, { title: "微信一键登录功能的实现" }, { title: "NPOI导入导出Excel" }, ], }; }, created() {}, methods: {},};ul { li { text-align: left; font-size: 16px; cursor: pointer; &:hover { color: #2ea7e0; } }}.other-item-title { margin: 10px 20px; padding: 5px; line-height: 30px; font-weight: 400; border-bottom: 1px solid #e8e9e7; color: #383937; position: relative; font-size: 18px;}.other-item .inner { margin: 0 20px; padding-bottom: 10px;}.inner .hot-list-article li { display: block; line-height: 32px; position: relative; margin: 3px 0; counter-increment: nums; padding-left: 30px; overflow: hidden; word-wrap: normal !important; white-space: nowrap; text-overflow: ellipsis;}.hot-list-article li a { color: #787977;}.hot-list-article li:before { color: #000; width: 22px; height: 22px; line-height: 22px; text-align: center; content: counter(nums, decimal); position: absolute; left: 0; top: 5px; border-radius: 100%; background-color: #edefee; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); font-family: SourceCodeProRegular, Menlo, Monaco, Consolas, "Courier New", monospace, "Helvetica Neue", Arial, sans-serif;}/*以上就是一个稍微好看的有编号的li列表 *//*加上以下之后，排名前三的数据编号就添加了编号颜色，更好看*/.hot-list-article li:first-child:before,.hot-list-article li:nth-child(2):before,.hot-list-article li:nth-child(3):before { color: #fff; text-shadow: none;}.hot-list-article li:first-child:before { background-color: #e24d46;}/*第1行的行号样式*/.hot-list-article li:nth-child(2):before { background-color: #2ea7e0;}/*第2行的行号样式*/.hot-list-article li:nth-child(3):before { background-color: #6bc30d;}/*第3行的行号样式*/.hot-list-article li a:hover { text-decoration: underline; color: #6bc30d;}/*鼠标移过更好看*/

    参考文章：ul好看的li列表样式

    下班~