绝对和相对定位:拉手网产品区块开发

时间：6年前阅读：5082
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>无标题文档</title>    
<style>    
	*{    
		padding: 0;    
		margin: 0;    
	}    
	body{    
		background: #f0f0f0;    
	}    
	#cpk{    
		width: 303px;    
		height: 316px;    
		border: 1px solid #d8d8d8;    
		margin: 30px auto;    
		background: white;    
		/*给父级元素加相对定位，让他给子元素有个参考*/    
		position: relative;    
	}    
	#cpk .cpk_tu{    
		width: 280px;    
		height: 230px;    
		position: absolute;    
		left: 14px;    
		top: 14px;    
	}    
	#cpk .cpk_bt{    
		font-size: 15px;    
		font-weight: 700;    
		font-family: 微软雅黑;    
		color: #2e2e2e;    
		position: absolute;    
		left: 14px;    
		top: 246px;    
		text-decoration: none;    
		line-height: 23px;    
		display: block;    
		width: 280px;    
	}    
	#cpk .cpk_bt:hover{    
		text-decoration: underline;    
	}    
	#cpk .cpk_xj{    
		position: absolute;    
		left: 14px;    
		top: 270px;    
		font-weight: 400;    
		color: #FF7E00;    
		font-size: 30px;    
	}    
	#cpk .cpk_xj span{    
		font-size: 24px;    
		padding-right: 4px;    
	}    
	#cpk .cpk_rj{    
		position: absolute;    
		left: 68px;    
		top:286px;    
		color: #595959;    
		font-size:12px;    
	}    
	#cpk .cpk_rj span{    
		font-family: Arial;    
		padding-left: 7px;    
	}    
	#cpk .tg{    
		position: absolute;    
		top: 292px;    
		right: 14px;    
		color: #595959;    
		font-size:12px;    
	}    
	#cpk .tg span{    
		color: #861110;    
		font-size: 14px;    
		font-weight: 700;    
	}    
</style>    
</head>    
<body>    
<div id="cpk">    
<img src="https://www.qiquanji.com/data/img/dmj/201902111549867482203751.jpg" alt="" class="cpk_tu" />    
<a href="" class="cpk_bt">【通辽市】联众海洋之星水上乐园</a>    
<!-- 现价	 -->    
<span class="cpk_xj"><span>¥</span>80</span>    
<span class="cpk_rj">市场价<span>¥168</span></span>    
<!-- 团购数量 -->    
<span class="tg"><span>2</span>人团购</span>    
</div>    
</body>    
</html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
绝对和相对定位:拉手网产品区块开发

网友评论
