绝对和相对定位:拉手网产品区块开发
<!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/mip/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,我们将及时处理。
微信扫码关注
更新实时通知