CSS3有序列表 - 手册网

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!doctype html>
<html>
<head>
<title>CSS3有序列表</title>
<style>
	body{
				margin: 40px auto;
				width: 500px;
			}
			ol{
				counter-reset: li;
				list-style: none;
				*list-style: decimal;
				font: 15px 'trebuchet MS', 'lucida sans';
				padding: 0;
				margin-bottom: 4em;
				text-shadow: 0 1px 0 rgba(255,255,255,.5);
			}
			ol ol{
				margin: 0 0 0 2em;
			}			
			.rounded-list a{
				position: relative;
				display: block;
				padding: .4em .4em .4em 2em;
				*padding: .4em;
				margin: .5em 0;
				background: #ddd;
				color: #444;
				text-decoration: none;
				-moz-border-radius: .3em;
				-webkit-border-radius: .3em;
				border-radius: .3em;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;	
			}
			.rounded-list a:hover{
				background: #eee;
			}
			.rounded-list a:hover:before{
				-moz-transform: rotate(360deg);
			  	-webkit-transform: rotate(360deg);
			    -moz-transform: rotate(360deg);
			    -ms-transform: rotate(360deg);
			    -o-transform: rotate(360deg);
			    transform: rotate(360deg);	
			}
			.rounded-list a:before{
				content: counter(li);
				counter-increment: li;
				position: absolute;	
				left: -1.3em;
				top: 50%;
				margin-top: -1.3em;
				background: #87ceeb;
				height: 2em;
				width: 2em;
				line-height: 2em;
				border: .3em solid #fff;
				text-align: center;
				font-weight: bold;
				-moz-border-radius: 2em;
				-webkit-border-radius: 2em;
				border-radius: 2em;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;
			}
			.rectangle-list a{
				position: relative;
				display: block;
				padding: .4em .4em .4em .8em;
				*padding: .4em;
				margin: .5em 0 .5em 2.5em;
				background: #ddd;
				color: #444;
				text-decoration: none;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;	
			}
			.rectangle-list a:hover{
				background: #eee;
			}	
			.rectangle-list a:before{
				content: counter(li);
				counter-increment: li;
				position: absolute;	
				left: -2.5em;
				top: 50%;
				margin-top: -1em;
				background: #fa8072;
				height: 2em;
				width: 2em;
				line-height: 2em;
				text-align: center;
				font-weight: bold;
			}
			.rectangle-list a:after{
				position: absolute;	
				content: '';
				border: .5em solid transparent;
				left: -1em;
				top: 50%;
				margin-top: -.5em;
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				-ms-transition: all .3s ease-out;
				-o-transition: all .3s ease-out;
				transition: all .3s ease-out;				
			}
			.rectangle-list a:hover:after{
				left: -.5em;
				border-left-color: #fa8072;				
			}
			.circle-list li{
			    padding: 2.5em;
			    border-bottom: 1px dashed #ccc;
			}
			.circle-list h2{
			    position: relative;
			    margin: 0;
			}
			.circle-list p{
			    margin: 0;
			}
			.circle-list h2:before{
			    content: counter(li);
			    counter-increment: li;
			    position: absolute;    
			    z-index: -1;
			    left: -1.3em;
			    top: -.8em;
			    background: #f5f5f5;
			    height: 1.5em;
			    width: 1.5em;
			    border: .1em solid rgba(0,0,0,.05);
			    text-align: center;
			    font: italic bold 1em/1.5em Georgia, Serif;
			    color: #ccc;
			    -moz-border-radius: 1.5em;
			    -webkit-border-radius: 1.5em;
			    border-radius: 1.5em;
			    -webkit-transition: all .2s ease-out;
			    -moz-transition: all .2s ease-out;
			    -ms-transition: all .2s ease-out;
			    -o-transition: all .2s ease-out;
			    transition: all .2s ease-out;    
			}
			.circle-list li:hover h2:before{
			    background-color: #ffd797;
			    border-color: rgba(0,0,0,.08);
			    border-width: .2em;
			    color: #444;
			    -webkit-transform: scale(1.5);
			    -moz-transform: scale(1.5);
			    -ms-transform: scale(1.5);
			    -o-transform: scale(1.5);
			    transform: scale(1.5);
			}
		</style>
	</head>
	<body>
		<ol class="rounded-list">
			<li><a href="">List item</a></li>
			<li><a href="">List item</a></li>
			<li><a href="">List item</a>
				<ol>
					<li><a href="">List sub item</a></li>
					<li><a href="">List sub item</a></li>
					<li><a href="">List sub item</a></li>
				</ol>
			</li>
			<li><a href="">List item</a></li>
			<li><a href="">List item</a></li>						
		</ol>
		<ol class="rectangle-list">
			<li><a href="">List item</a></li>
			<li><a href="">List item</a></li>
			<li><a href="">List item</a>
				<ol>
					<li><a href="">List sub item</a></li>
					<li><a href="">List sub item</a></li>
					<li><a href="">List sub item</a></li>
				</ol>
			</li>
			<li><a href="">List item</a></li>
			<li><a href="">List item</a></li>			
		</ol>
		<ol class="circle-list">
		    <li>
		        <h2>Lorem ipsum dolor sit amet</h2>
		        <p>Morbi sagittis sapien ac magna egestas dictum.</p>
		    </li>
		    <li>
		        <h2>Lorem ipsum dolor sit amet</h2>
		        <p>Morbi sagittis sapien ac magna egestas dictum.</p>
		    </li>
		    <li>
		        <h2>Lorem ipsum dolor sit amet</h2>
		        <p>Morbi sagittis sapien ac magna egestas dictum.</p>
		    </li>
		    <li>
		        <h2>Lorem ipsum dolor sit amet</h2>
		        <p>Morbi sagittis sapien ac magna egestas dictum.</p>
		    </li>
		    <li>
		        <h2>Lorem ipsum dolor sit amet</h2>
		        <p>Morbi sagittis sapien ac magna egestas dictum.</p>
		    </li>           
		</ol>	
	</body>	
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

CSS3有序列表

分类

CSS3

描述

一段CSS3有序列表代码，对于使用Div+CSS布局是相当有用处的，这种效果可广泛用于CSS排行榜、文章列表、多级菜单的编写中，本段代码同时也考虑到了兼容性，各方面表现都比较不错。