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

最新推荐文章于 2022-11-16 17:09:24 发布

Andone_hsx

最新推荐文章于 2022-11-16 17:09:24 发布

阅读量872

点赞数 1

分类专栏： CSS基础文章标签： html css web

本文链接：https://blog.csdn.net/Andone_hsx/article/details/54116939

版权

CSS基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

注：

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>