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> ￥89.00</b> <dl> <dt class="st3"> 分类：<a href='#'>洁面摩丝</a> 评论：<a href="#"><span class="color3">6453</span></a> 条 <span class="color3">15</span>用过</dt> <dd class="dd2"> <input type="checkbox" id="a27285" value="深层净化活力洁面摩丝" onclick="dblist(27285,event)" /> 加入对比</dd> </dl> <p>唤醒肌肤，给你清新......<a href="#">>>查看详细</a></p> </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" /> 隐藏对比框</span></b> <div id="tishi">对不起，您还没有选择产品</div> <ul> </ul> <div class="pkbut"><span><a href="#" onclick="#">开始对比</a></span><span onclick="clears()">清 空</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、查看效果。
