css购物车制作

最新推荐文章于 2024-03-18 23:01:18 发布

@CAPRICA@

最新推荐文章于 2024-03-18 23:01:18 发布

阅读量2k

点赞数 1

分类专栏：前端

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

no-repeat的定位问题：

背景图片的位置，那两个数字是图片左上角到div（以div为例）左上角的偏移量。

　　第一个数字正数向左，负数向右；第二数字正数向下，负数向上。

　　首先将背景图的左上角与div的左上角重合，0 0表示不动，8px 0：表示将背景图向左移动8像素，-8px 0：表示将背景图向右移动8像素，0 8px：背景图向下移动8像素，0 -8px：背景图向上移动8像素；8px 8px：背景向左移动8像素再向下移动8像素；超出div的部分会隐藏不会显示出来。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.cart_btn {
				width: 120px;
				height: 30px;
				background: url(img/pic.png) no-repeat -17px 7px #f7f7f7;
				border: 1px solid #eee;
				padding-left: 30px;
				position: relative;
				padding-top: 5px;
				height: 25px;
			}

			.cart_btn span {
				background: url(img/pic.png) no-repeat -36px -54px;
				padding-left: 7px;
				position: absolute;
				top: -12px;
				left: 20px;
			}

			.cart_btn span i {
				float: left;
				height: 20px;
				background: url(img/pic.png) no-repeat right -25px;
				padding-right: 5px;
				font-style: normal;
				color: #fff;
				font-size: 14px;
			}

			.cart_btn a {
				color: #aaa;
				text-decoration: none;
				font-size: 14px;
				padding-left: 15px;
				line-height: 30px;
			}

			.cart_btn b {
				display: inline-block;
				border-color: transparent transparent transparent #CCCCCC;
				border-style: dashed dashed dashed solid;
				border-width: 5px;
				height: 0;
				overflow: hidden;
				width: 0;
			}
		</style>
	</head>
	<body>
		<div class="cart_btn">
			<span><i>100</i></span>
			<a href="cart.html" target="_blank">去购物车结算</a>
			<b></b>
		</div>
	</body>
</html>

@CAPRICA@

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css购物车制作

no-repeat的定位问题：背景图片的位置，那两个数字是图片左上角到div（以div为例）左上角的偏移量。　　第一个数字正数向左，负数向右；第二数字正数向下，负数向上。　　首先将背景图的左上角与div的左上角重合，0 0表示不动，8px 0：表示将背景图向左移动8像素，-8px 0：表示将背景图向右移动8像素，0 8px：背景图向...
复制链接

扫一扫

专栏目录