ul好看的li列表样式

以下是实际效果截图：

示例代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
.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}  /*鼠标移过更好看*/
</style>
</head>
<body>
<div class="other-item"><h5 class="other-item-title">热门文章</h5><div class="inner"><ul class="hot-list-article"><li> <a href="/Blog/Read/9">SpringBoot 入门爬虫项目实战</a></li><li> <a href="/Blog/Read/12">SpringBoot 2.x 教你快速入门</a></li><li> <a href="/Blog/Read/13">java学习路线</a></li><li> <a href="/Blog/Read/4">基于SpringBoot+JWT+Redis跨域单点登录的实现</a></li><li> <a href="/Blog/Read/7">SpringBoot 中如何使用SwaggerAPI接口文档？</a></li><li> <a href="/Blog/Read/11">小白轻松入门Redis</a></li><li> <a href="/Blog/Read/14">微信一键登录功能的实现</a></li><li> <a href="/Blog/Read/8">NPOI导入导出Excel</a></li></ul></div>
</div>
</body>
</html>

ul好看的li列表样式相关推荐

ul li列表样式css,列表ul li 专用样式
列表ul li 专用样式 DATE: 2016-11-10 / VIEWS: 1142 主页级别的页面大部分的内容都是做在无序列表里面的,其庞大的使用规模,需要有完备的样式支持. ul{zoom:1} ...
css列表大全,CSS中li列表样式汇总大全，全实例展示
CSS中列表样式li {list-style-type:符号名称} css中用list-style-type指定列表(lists)前面符号,如下: li {list-style-type:符号名称} ...
css删除li 圆点_css取消ul里的li小圆点代码
去除ul里的li列表小圆点,一般主要有两个方式来解决,一个在html里写,一个在css里写方法1: 我习惯有list-style: none;也有很多人用list-style-type: none; ...
ul 、ol li 继承原有样式的问题
如: 1.为什么我的服务器无法远程了? 2.为什么我的服务器总是自动重启? 3.为什么我的服务器总是自动重启? 以前写这种类型的列表,都是自己用键盘输入这些数字,其实不然,ul .ol li本身就自带 ...
ul 原点显示_web前端开发学习教程，CSS HTML - ul li列表原点如何相连
原标题:web前端开发学习教程,CSS HTML - ul li列表原点如何相连目前我列出两个方案,很详细,希望可以帮助到有疑问的朋友. 方案一: html 参与考试<第一期模拟考试> ...
CSS 列表样式(ul)
1.CSS列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像 2.在HTML中,有两种类型的列表: 无序列表 - 列表项标记用特殊图形(如小黑点. ...
css 恢复ulli_CSS Ul（列表样式）
CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像一.列表在HTML中,有两种类型的列表: 无序列表 - 列表 ...
CSS 列表样式 (ul)
CSS 列表 CSS 列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像列表在 HTML 中,有两种类型的 HTML列表: 无序列表 - 列表 ...
CSS(七) css列表样式（ul）
CSS列表属性作用如下: 设置不同的列表项标记为有序列表设置不同的列表项标记为无序列表设置列表项标记为图像 1.列表在HTML中,有两种类型的html列表: 无序列表-列表项标记用特殊图形(如: ...

ul好看的li列表样式

以下是实际效果截图：

示例代码如下：

ul好看的li列表样式相关推荐

最新文章

热门文章