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

1、新建html文档。

2、准备好需要用到的图标。

3、书写hmtl代码。

<div class="centess">

  <div class="b">

    <div class="con2">

      <div class="left">

        <div class="b5 b5b" id="bdbb">

          <div class="c4">

            <div class="m2">

              <div class="m2lf"><a href="#"> <img src="images/01.jpg" onerror="this.src='/images/null.gif'"/></a></div>

              <div class="m2rg"><b class="st2"><strong><a href='#'>露清</a> | <a href="#">深层净化活力</a> </strong>&nbsp;&nbsp;￥89.00</b>

                <dl>

                  <dt class="st3"> 分类：<a href='#'>洁面摩丝</a>&nbsp;&nbsp;&nbsp;

                    评论：<a href="#"><span class="color3">6453</span></a> 条 &nbsp;&nbsp;<span class="color3">15</span>用过</dt>

                  <dd class="dd2">

                    <input type="checkbox" id="a27285" value="深层净化活力洁面摩丝" onclick="dblist(27285,event)" />

                    加入对比</dd>

                </dl>

                唤醒肌肤，给你清新......<a href="#">&gt;&gt;查看详细</a>

              </div>

            </div>

          </div>

        </div>

      </div>

    </div>

    <div id="xsyc"></div>

    <div id="bbv">

      <div id="dbimg" onclick="dbhidd()">(5)</div>

      <div id="dbnr"> <b><span>妆品对比</span><span class="span2" onclick="dbhidd()"><img src="images/closex.gif" align="absmiddle" />&nbsp;隐藏对比框</span></b>

        <div id="tishi">对不起，您还没有选择产品</div>

        <ul>

        </ul>

        <div class="pkbut"><span><a href="#" onclick="#">开始对比</a></span><span onclick="clears()">清&nbsp;空</span></div>

      </div>

    </div>

  </div>

</div>

4、书写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; }

5、书写并添加js代码。

<script src="js/yokautf_0.1.js"></script>

<script src="js/pk.js"></script>

6、代码整体结构。

7、查看效果。