【2】JS美淘網(wǎng)電商項(xiàng)目部分效果實(shí)現(xiàn)：購物車，手風(fēng)琴，登錄注冊，放大鏡【詩書畫唱】
主界面的HTM部分和主界面完整截圖：
<body>
<!-- guDingCenter:固定的中間部分，不包括左邊的側(cè)欄，包括固定的頭部的區(qū)域和商品展示圖片部分等-->
<div id="ZJguDingCenter">
<div id="ZJguDingCenter1">
<!--ZJguDingCenter1-1為頭部的第一個(gè)div，和ZJguDingCenter1-2等并列，這要命名是可以很方便地知道那些是并列的div，哪些是在里面的div-->
<div id="ZJguDingCenter1-1">
<div id="ZJguDingCenter1-1-1"><a href="#">江西【切換城市】</a></div>
<div id="ZJguDingCenter1-1-2">
<!--一般來說，用span來設(shè)置原價(jià)等設(shè)置的顏色和大小等-->
<span>美淘，每天淘一次</span>
<span>
<a href="#">我的美淘</a>
<!--xiaLaNeiRong：下拉內(nèi)容-->
<ul id="ZJxiaLaNeiRong">
<li><a href="#">我的訂單</a></li>
<li><a href="#">我的收藏</a></li>
<li><a href="#">我的余額</a></li>
</ul>
</span>
<span><a href="gouWuChe.html" class="ZJgouWuCheImg">購物車</a></span>
<span><a href="#" id="ZJdengLuWenZi" >【登錄】</a></span>
<span><a href="zhuce.html">【注冊】</a></span>
</div>
</div>
<!--guDingCenter1-2為頭部的第二個(gè)div-->
<div id="ZJguDingCenter1-2">
<div id="ZJguDingCenter1-2-1"><img src="img/meitao_log.jpg"></div>
<div id="ZJguDingCenter1-2-2">
<form action="#" method="#">
<table>
<tr>
<td><input type="text"? align="top"/></td>
<td><input type="submit" value="搜索" /></td>
</tr>
<tr>
<td colspan="2">
<a href="#">美的熱水器</a>
<a href="#">利浦電動(dòng)牙刷</a>
<a href="#">美的電飯煲</a>
<a href="#">格力士微波爐</a>
</td>
</tr>
</table>
</form>
<div id="ZJsousuokuang">
</div>
</div>
</div>
<!--guDingCenter1-3為導(dǎo)航條部分-->
<div id="ZJguDingCenter1-3">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">團(tuán)購</a></li>
<li><a href="#">美食</a></li>
<li><a href="#">電影</a></li>
<li><a href="#">KTV</a></li>
<li><a href="#">酒店訂票</a></li>
<li><a href="#">購物</a></li>
</ul>
</div>
</div>
<!--guDingCenter2為輪播圖部分-->
<div id="ZJguDingCenter2">
<img src="img/lunbo1.jpg"/>
<div>
<span title="0"></span>
<span title="1" class="spanxuanzhong"></span>
<span title="2"></span>
</div>
<span class="ZJerduo"></span>
<span class="ZJerduo ZJyouerduo"></span>
</div>
<!--guDingCenter3為商品圖片等的展示區(qū)-->
<div id="ZJguDingCenter3">
<ul id="ZJguDingCenter3-1">
<li><a href="#"><img src="img/sp1.jpg" /></a></li>
<li><a href="#"><img src="img/sp2.jpg" /></a></li>
<li><a href="#"><img src="img/sp3.jpg" /></a></li>
</ul>
<div id="ZJguDingCenter3-2">
<div id="ZJguDingCenter3-2_biaoti"> 品牌特價(jià)</div>
<dl>
<a href="shangPinXiangQing.html">
<dt><img src="img/ss6.jpg"></dt>
<!--一般來說，用span來設(shè)置原價(jià)等設(shè)置的顏色和大小等-->
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss2.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<!--<dt> 標(biāo)簽定義一個(gè)描述列表的項(xiàng)目/名字。
<dt> 標(biāo)簽與 <dl> （定義一個(gè)描述列表）和 <dd> （描述每一個(gè)項(xiàng)目/名字）一起使用。里面寫的是圖片的代碼-->
<dt><img src="img/ss3.jpg"></dt>
<!--
<dd> 標(biāo)簽被用來對一個(gè)描述列表中的項(xiàng)目/名字進(jìn)行描述。
<dd> 標(biāo)簽與 <dl> （定義一個(gè)描述列表）和 <dt> （定義項(xiàng)目/名字）一起使用。
在 <dd> 標(biāo)簽內(nèi)，您能放置段落、換行、圖片、鏈接、列表等等。-->
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss4.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss5.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss6.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss7.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss8.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss2.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss3.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss4.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss5.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
</div>
</div>
<div id="ZJguDingCenter4">
<!--guDingCenter4Like為guDingCenter4的猜你喜歡的部分-->
<div id="ZJguDingCenter4Like"> 猜你喜歡</div><br><br>
<dl>
<a href="#">
<dt><img src="img/ss5.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<!--guDingCenter4YuanJia為guDingCenter4的猜你喜歡的部分中的原價(jià)部分-->
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss4.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss3.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss2.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss6.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss7.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss8.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss9.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<!--<dl> 標(biāo)簽定義一個(gè)描述列表。
<dl> 標(biāo)簽與 <dt> （定義項(xiàng)目/名字）和 <dd> （描述每一個(gè)項(xiàng)目/名字）一起使用。-->
<dl>
<a href="#">
<dt><img src="img/ss10.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss3.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss4.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss2.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss7.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss6.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss8.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss9.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss2.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss6.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss4.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
<dl>
<a href="#">
<dt><img src="img/ss9.jpg"></dt>
<dd>商品名稱:海爾洗衣機(jī)</dd>
<dd>原價(jià)<span class="ZJguDingCenter4YuanJia">￥666</span>
折后價(jià)<span class="ZJzheHouJiaWenZi">￥555</span></dd>
</a>
</dl>
</div>
<!--guDingCenter5
為底部版權(quán)的區(qū)域-->
<div id="ZJguDingCenter5">
<img src="img/底部版權(quán).jpg" />
</div>
</div>
<div id="ZJguDingLeft" >
<!--closeImg:關(guān)閉的圖片，就是“X”的圖片，之后把這個(gè)div的背景圖片設(shè)置為“X”的圖片就可以了-->
<!-- guDingLeftCloseImg-->
<div id="ZJguDingLeftCloseImg" ></div>
<ul id="ZJguDingLeftUl">
<li><a href="#">品牌特價(jià)</a></li>
<li><a href="#">猜你喜歡</a></li>
<li><a href="#">請務(wù)必給</a></li>
<li><a href="#">詩書畫唱</a></li>
<li><a href="#">三連關(guān)注</a></li>
</ul>
</div>
<!--zhezhaoceng為灰色的遮罩層-->
<div id="ZJzheChaoCeng">
</div>
<div id="ZJdengLuBuFen">
<div id="ZJdengLuBuFen1"></div>
<div id="ZJdengLuBuFen2">用戶登錄</div>
<div id="ZJdengLuBuFen3">
<form action="#" method="post">
<!--action 英[??k?n]
美[??k?n]
n. 行動(dòng); 行為過程; 所做之事; 行為; 訴訟; 起訴;
v. 務(wù)必做，確保處理(某事);-->
<!--action表示表單會(huì)提交給等號后面的文件里，也就是""里面可以填需要的地址。
瀏覽器使用 method 屬性設(shè)置的方法將表單中的數(shù)據(jù)傳送給服務(wù)器進(jìn)行處理。共有兩種方法：POST 方法和 GET 方法。-->
<!--post 英[p??st]
美[po?st]
n. 郵政; 郵遞; 郵寄; 郵寄的信函(或包裹等); 郵件; 收集(或投遞)郵件的時(shí)間; 郵班;
v. 寄; 郵寄; 把(信件等)投入郵筒; 投遞; 把…放入(或塞入);-->
<table? id="ZJdengLuBiaoGe">
<tr>
<td width="100px">用戶名:</td>
<td width="100px"><input type="text"></td>
</tr>
<tr>
<td>密碼:</td>
<td><input type="password"></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="登錄" />
<input type="button" value="取消" />
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
