CSS/HTML5带数字简洁大方的Top10排名列表_css排行榜_千世丶希的博客-程序员宅基地

带数字Top10排名列表

说明

演示效果分辨率为1980x1080分辨率效果
高度可定制修改
纯css代码控制

Index与css代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style>
		a {
     
			color: #525C66;
			text-decoration: none;
		}
        <!-- div 大小设定 -->
		.top-10 {
     
			float: left;
			width: 340px;

			margin-top: 106px;
			margin-left: 118px;
			background: #fff;
			border: 1px solid #FFF;
			box-shadow: #d0d0d0 1px 1px 10px 0px;
		}

		.top-10 ul {
     
			counter-reset: section;
		}

		.top-10 li {
     
			float: left;
			width: 260px;
			border-bottom: 1px solid #b8c2cc;
			line-height: 46px;
			height: 46px;
			overflow: hidden;
			color: #525C66;
			font-size: 14px;

		}

		.top-10 li:before {
     
			counter-increment: section;
			content: counter(section);
			display: inline-block;
			padding: 0 12px;
			margin-right: 10px;
			height: 18px;
			line-height: 18px;
			background: #b8c2cc;
			color: #fff;
			border-radius: 3px;
			font-size: 9px
		}
        <!-- 排名前三名颜色控制 -->
		.top-10 li:nth-child(1):before {
     
			background: #0164b4
		}

		.top-10 li:nth-child(2):before {
     
			background: #0164b4
		}

		.top-10 li:nth-child(3):before {
     
			background: #0164b4
		}

		#rank-more {
     
			float: left;
			width: 100%;
			margin-top: 8px;
			text-align: center;
		}

		.span-h7 {
     
			font-size: 14px;
			color: #B8C2CC;
			font-weight: 300;
		}
	</style>

	<body>

		<div class="top-10">
			<ul>
				<li><a>测试用-青岛XX公司01</a></li>
				<li><a>测试用-青岛XX公司02</a></li>
				<li><a>测试用-青岛XX公司03</a></li>
				<li><a>测试用-青岛XX公司04</a></li>
				<li><a>测试用-青岛XX公司05</a></li>
				<li><a>测试用-青岛XX公司06</a></li>
				<li><a>测试用-青岛XX公司07</a></li>
				<li><a>测试用-青岛XX公司08</a></li>
				<li><a>测试用-青岛XX公司09</a></li>
				<li><a>测试用-青岛XX公司10</a></li>
			</ul>
			<div id="rank-more">
				<span class="span-h7"><a href="#">查看更多</a></span>
			</div>



		</div>
	</body>
</html>

演示图

在这里插入图片描述

本文链接：https://blog.csdn.net/qq_37135944/article/details/84323542

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Learning Curve-GCN_curve-gcn代码百度云-程序员宅基地

Curve-GCN学习主要内容训练CNN提取Feature Map的网络训练提取轮廓边和点的两个分支层，输出为28×28网格中的点连成的图以上两个网络采用binary cross entropy loss作为损失，使用3×3卷积核和一个全连接输出CNN的Feature Map结果和轮廓边提取全连接网络的结果直接拼接起来作为图网络的输入Fc为了增强图网络输入的拼接后的Feature M..._curve-gcn代码百度云

【VMD-DBO-LSTM】变分模态分解-蜣螂优化算法-长短时记忆神经网络研究（Python代码实现）_然哥依旧的博客-程序员宅基地

【VMD-DBO-LSTM】变分模态分解-蜣螂优化算法-长短时记忆神经网络研究（Python代码实现）

PHP结束符省略_php结束标记可以省略吗-程序员宅基地

我是菜鸟，刚学习PHP，把学习过备的问题记录下来，以备查询。今天就记录一下PHP 结束符也就是？> 何时可以省略的问题。首先整个php文件都没有html元素标签。那么就是纯php代码，这时候肯定可以省略结束符的。有人说php和html混合编写就不能省略，否则，也就是只有php代码那么可以省略。其实这句话是个坑。根据我的理解应该是这样的：1、如果php代码嵌入在htm_php结束标记可以省略吗

MySql开启远程用户登录GRANTALLPRIVILEGESON.TO'root'@'%'I MySql开启远程用户登录GRANTALLPRIVILEGESON.TO'root'@'%'I...-程序员宅基地

MySql开启远程用户登录GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'huawei' WITH GRANT OPTION; FLUSH PRIVILEGES;执行上面的命令后，重启Mysql就行了。~~~转载于:https://www.cnblogs.com/gaogaoxingxing/p/5801872.html...

浮点数表示-程序员宅基地

在充满0,1的计算机存储空间中怎么表示高精度浮点数？1 浮点数二进制表示方式C语言和C#语言中，对于浮点类型的数据采用单精度类型（float）和双精度类型(double)来存储，float数据占用32bit，double数据占用64bit,我们在声明一个变量float f= 2.25f的时候，是如何分配内存的呢？如果胡乱分配，那世界岂不是乱套了么，其实不论是float还是double在存储方式上都是

WPF调用线程（三)线程池初步_wpf threadpool-程序员宅基地

当我们频繁的要调用线程来执行任务时，一个好的办法是采用线程池来对线程进行管理， “线程池”是可以用来在后台执行多个任务的线程集合。每个传入请求都将分配给线程池中的一个线程，因此可以异步处理请求，而不会占用主线程，也不会延迟后续请求的处理。一旦池中的某个线程完成任务，它将返回到等待线程队列中，等待被再次使用。这使应用程序可以避免为每个任务创建新线程的开销。线程还是比较昂贵的。（you_wpf threadpool