css练习之边框、框模型、背景属性

2017-01-06 11:23:39来源:CSDN作者:Andone_hsx人点击

鼠标悬停页面上后的效果如下:


注:

5颗星是利用“雪碧图”(又称精灵图)做出来的;

框内的两个按钮上设置了颜色渐变;


CSS Sprites(雪碧图,精灵图)
将若干幅小图合并到一副大图中,根据实际使用需求,改变图像的位置,从而显示出向看的图片
如何显示 雪碧图 中的某一块图像???
1、根据要显示的图像创建一个一模一样大小的元素
2、为元素设置背景图,并且移动图像到显示区域


index.html(采用了内部样式表)

<!doctype html><html>	 <head>			<meta charset="UTF-8">			<meta name="Generator" content="EditPlus®">			<meta name="Author" content="">			<meta name="Keywords" content="">			<meta name="Description" content="">			<title>Document</title>			<style>				#outline{					width:90%;					min-height:50px;					background-color:#FDFFFA;					border:1px solid #D4E2BE;					padding:10px;					margin-bottom:15px;				}				#outline .image{					width:76px;					height:15px;					background-image:url(images/iconlist_1.png);					background-position:-108px -238px;				}				#outline .txtInfo{					width:100%;					border-top:1px solid #D6E1BF;					margin-top:6px;				}				b{					background-color:#FBEDD2;					padding:5px;				}				#outline button{					width:82px;					height:38px;					border:1px solid #D5D5D5;					border-radius:5px;					background:linear-gradient(to bottom,#f9f9f9,#cdcdcd);					margin-right:10px;				}				#btm_outline a{					border:1px solid #D6D6D4;					border-radius:5px;					padding:8px 13px;				}				a:visited{					color:blue;				}				a:hover{					background-color:#04599A;					color:white;				}				#btm_outline a.current{					color:#000;					background-color:transparent;					border:none;				}			</style>	 </head>	 <body>			<div id="outline">				<div class="image">				</div>				<div class="txtInfo">					<p>						标    签: <b>比洗衣粉好</b> <b>去污能力强</b>					</p>					<p>						心    得: 买了几次了,挺好用的,洗的衣服很干净,以后就它了!					</p>					<p>						购买日期: 2014-12-01					</p>					<!--button-->					<p>						<button>有用(3)</button>						<button>回复(3)</button>					</p>				</div>			</div>			<div id="btm_outline">				<a class="current">1</a>				<a href="#">2</a>				<a href="#">3</a>				<a href="#">4</a>				<a href="#">5</a>				<a href="#">6</a>			</div>	 </body></html>


最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台