CSS3 sprite实例：跨浏览器图标支持列表

2024-09-05 12:16:55

字体：大中小

来源：转载

供稿：网友

CSS3 sprite制作实例，把浏览器支持情况做成HTML后插入到demo中，以后调用起来也方便多了。使用到一些png的浏览器图标，做成图片形式比文字说明更形象了，对用户体验好感度也会上升，最后把图标做成了sprite，减少一点浏览器请求。对于CSS初学者来说这款效果还是很容易掌握和看懂的。测试发现不支持IE，Chrome和火狐可以。

<!DOCTYPE html><html lang="en"><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>CSS3制作的跨浏览器图标支持表</title><style>/* RESET */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, figure {    margin: 0;    padding: 0;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {     display:block;}ul {    list-style: none;}table {    border-collapse: separate;    border-spacing: 0;}   img{	border: none;}.clearfix:before,.clearfix:after {    content: " ";    display: table;}.clearfix:after {    clear: both;}.clearfix {    *zoom: 1;}/* DEMO HEADER */body{	font: 12px/20px "Droid Sans",Arial,"Helvetica Neue","Lucida Grande",sans-serif;	color: #444;	border-top: 3px solid #444;	background:url(/jscss/demoimg/201306/texture.jpg) repeat;	overflow-x:hidden;}h1.title_name {    color: #685440;    font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;    font-size: 3em;    font-weight: normal;    line-height: 1em;    margin: 0;    padding: 10px 0 0;    text-align: center;	background-color:#404853;}h1.title_name span {    color: rgba(255, 255, 255, 0.9);    font-family: normal Georgia,'Times New Roman',Times,serif;    font-size: 0.9em;}h1.title_name small {    color: #8EC63F;    display: block;    font-family: normal Verdana,Arial,Helvetica,sans-serif;    font-size: 0.3em;    letter-spacing: 0.5em;    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);    text-transform: uppercase;}a{	color:#FFFFFF;	text-decoration:none;}a:hover{	color:#8EC63F;	text-decoration:none;	-webkit-transition: color .25s ease-out;	-moz-transition: color .25s ease-out;	-o-transition: color .25s ease-out;	transition: color .25s ease-out;}/* DEMO BODY */footer {	width:100%;	bottom:0;	position: absolute;	padding:10px;	text-align: center;	clear: both;	background:#404853;	overflow:hidden;}footer p { 	letter-spacing:1px; 	color:#8C9198;	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);}footer p a { letter-spacing:0;}#container { margin: 1em auto;}.demo-wrapper{	width:100%;	position:relative;	overflow:hidden;}#demo{	width: 300px;	margin: 12em auto 0;	z-index:1;	overflow: hidden;}/* DEMO STAR */ul {	margin-bottom: 10px;	overflow: hidden;}ul li {	float: left;	padding-right: 12px;}	ul li:last-child {		padding: 0;	}.sprite {	background: url("/jscss/demoimg/201306/browser_list.png") no-repeat -12px -12px;	width: 25px;	height: 26px;}	li.sprite:nth-child(2){		background: url("/jscss/demoimg/201306/browser_list.png") no-repeat -58px -12px;		width: 25px;		height: 26px;	}	li.sprite:nth-child(3) {		background: url("/jscss/demoimg/201306/browser_list.png") no-repeat -101px -12px;		width: 25px;		height: 26px;	}	li.sprite:nth-child(4) {		background: url("/jscss/demoimg/201306/browser_list.png") no-repeat -12px -49px;		width: 25px;		height: 26px;	}	li.sprite:nth-child(5) {		background: url("/jscss/demoimg/201306/browser_list.png") no-repeat -58px -48px;		width: 25px;		height: 26px;	}	li.sprite:nth-child(6) {		background: url("/jscss/demoimg/201306/browser_list.png") no-repeat -102px -47px;		width: 25px;		height: 26px;	}	li.sprite:nth-child(7) {		background: url("/jscss/demoimg/201306/browser_list.png") no-repeat -8px -84px;		width: 29px;		height: 26px;	}	li.sprite:nth-child(8) {		background: url("/jscss/demoimg/201306/browser_list.png") no-repeat -60px -83px;		width: 24px;		height: 26px;	}.non {	opacity: 0.2;	background: #333 transparent;}</style></head><body><header>    <h1 class="title_name"><span>A CSS Cross Browser Table List</span><small>by airoschou</small></h1></header>    <div id="container"><div class="demo-wrapper">    <div id="demo">        <ul>            <li class="sprite non"></li>            <li class="sprite"></li>            <li class="sprite"></li>            <li class="sprite"></li>            <li class="sprite"></li>            <li class="sprite"></li>            <li class="sprite"></li>            <li class="sprite"></li>        </ul>    </div></div>        </div> </body></html>

上一篇：CSS3圆角气泡框，评论对话框

下一篇：CSS3图像动态交互切换效果