模拟商城点击加入商品对比效果

模拟商城点击加入商品对比效果

新建html文档。

准备好需要用到的图标。

书写hmtl代码。

薪码

露清 | 深层净化活力   ￥89.00

分类：洁面摩丝   

评论：6453 条   15用过

加入对比

救醒唤醒肌肤，给你清新......>>查看详细

低祝倘

(5)

妆品对比 隐藏对比框

对不起，您还没有选择产品

开始对比清 空

书写css代码。

body, form, img { padding: 0px; margin: 0px; border: 0px; font-size: 12px; font-family: "", Arial; line-height: 18px; }

body { background: #696866; }

dl, dd, dt, ul, ol, li, h1, h2, h3, h4, h5, h6 { list-style-position: outside; list-style-type: none; margin: 0px; padding: 0px; border: 0px; }

a:link, a:visited { text-decoration: none; color: #000; }

a:active, a:hover { text-decoration: underline; color: #ff6600; }

input[type=radio], input[type=checkbox] { cursor: pointer; }

.clear { clear: both; font-size: 0px; visibility: hidden; width: 0px; line-height: 0px }

.jd, .jd dd, .jd dt, .jd li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.centess { margin: 0 auto; width: 728px; background: #fff; }

.ttop i, .ttop p, .ttop b, .ttop s, .ttop u, .ttop span { display: block; border: 0px; padding: 0px; margin: 0px; font-weight: normal; font-variant: normal; float: left; }

.ttop u { padding-right: 20px; }

.ttop p { padding-top: 10px; }

.ttop b { float: right; padding-right: 10px; padding-top: 10px; }

.ttop i { float: right; padding: 10px 30px 0 0; }

.ttop span { float: right; padding: 10px 10px 0 0; width: 200px; }

.searchtxt { border: 1px solid #cdcdcd; color: #cdcdcd; line-height: 14px; width: 200px; height: 14px; float: right; }

#bnav { clear: both; width: 986px; height: 13px; padding: 8px 0 5px 0; background: #333; border-bottom: 1px solid #555; text-align: center; color: #a9a9a9; margin: 0 auto; line-height: 13px; }

#bnav a { color: #a9a9a9; text-decoration: none; margin: 0 12px 0 13px; }

#bnav a:hover { color: #f00; text-decoration: underline; }

#bback { width: 986px; height: 16px; padding-top: 3px; height: 23px; background: #444; text-align: center; margin: 0 auto; }

#bback input { font-size: 12px; line-height: 14px; }

#copy a { color: #fff; }

书写并添加js代码。

代码整体结构。

查看效果。