購物車
目錄
- 購物車
- 準備操作
- 頁面內容
- 操作樣式
- JS檔案
準備操作
1、選擇一個目錄下建立一個新的檔案夾，命名為Shoping Cart(命名由自己決定)
2、由于需要的樣式于操作過多，我們把這些分別放入不同的檔案夾下，在Shoping Cart目錄下分別建立頁面檔案夾html、樣式檔案夾css、JavaScript檔案夾js、字體檔案夾font（字體檔案可由網上直接下載使用即可）與圖片檔案夾image（檔案夾的命名都由自己決定）
3、使用VSCode打開之前新建的Shoping Cart檔案夾，這時就可根據需要來設計頁面（使用的軟體由自己決定）
頁面內容
建立一個新的頁面，我們需要引入所需要的css檔案,然后引入jquery檔案，最后引入我們自己的js檔案（先引入樣式檔案，jquery檔案與js檔案的順序不能反）
頁面結構如下
①頂部導航部分
<!-- 頂部快捷導航start -->
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>xxxxxx</li>
<li>
<a href="#">請登錄</a>
<a href="#" class="style-red">免費注冊</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li><a href="#">我的訂單</a></li>
<li class="spacer"></li>
<li>
<a href="#">我的品優購</a>
<i class="icomoon">?</i>
</li>
<li class="spacer"></li>
<li><a href="#">品優購會員</a></li>
<li class="spacer"></li>
<li><a href="#">企業采購</a></li>
<li class="spacer"></li>
<li><a href="#">關注品優購</a> <i class="icomoon">?</i></li>
<li class="spacer"></li>
<li><a href="#">客戶服務</a> <i class="icomoon">?</i></li>
<li class="spacer"></li>
<li><a href="#">網站導航</a> <i class="icomoon">?</i></li>
</ul>
</div>
</div>
</div>
<div class="car-header">
<div class="w">
<div class="car-logo">
<img src="img/logo.png" alt=""> <b>購物車</b>
</div>
</div>
</div>
</div>
<div class="c-container">
<div class="w">
<div class="cart-filter-bar">
<em>全部商品</em>
</div>
②購物車核心區域
<div class="cart-warp">
<!-- 頭部模塊 -->
<div class="cart-thead">
<div class="t-checkbox">
<input type="checkbox" name="" id="" class="checkall"> 全選
</div>
<div class="t-goods">商品</div>
<div class="t-price">單價</div>
<div class="t-num">數量</div>
<div class="t-sum">小計</div>
<div class="t-action">操作</div>
</div>
<!-- 商品串列模塊 --> //串列內容由用戶自定義
<div class="cart-item-list">
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" checked class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p1.jpg" alt="">
</div>
<div class="p-msg">【5本26.8元】經典兒童文學彩圖青少版八十天環游地球中學生語文教學大綱</div>
</div>
<div class="p-price">￥12.60</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥12.60</div>
<div class="p-action"><a href="javascript:;">洗掉</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p2.jpg" alt="">
</div>
<div class="p-msg">【2000張貼紙】貼紙書 3-6歲 貼畫兒童 貼畫書全套12冊 貼畫 貼紙兒童 汽</div>
</div>
<div class="p-price">￥24.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥24.80</div>
<div class="p-action"><a href="javascript:;">洗掉</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p3.jpg" alt="">
</div>
<div class="p-msg">唐詩三百首+成語故事全2冊 一年級課外書 精裝注音兒童版 小學生二三年級課外閱讀書籍</div>
</div>
<div class="p-price">￥29.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥29.80</div>
<div class="p-action"><a href="javascript:;">洗掉</a></div>
</div>
</div>
<!-- 結算模塊 -->
<div class="cart-floatbar">
<div class="select-all">
<input type="checkbox" name="" id="" class="checkall">全選
</div>
<div class="operation">
<a href="javascript:;" class="remove-batch"> 洗掉選中的商品</a>
<a href="javascript:;" class="clear-all">清理購物車</a>
</div>
<div class="toolbar-right">
<div class="amount-sum">已經選<em>1</em>件商品</div>
<div class="price-sum">總價： <em>￥12.60</em></div>
<div class="btn-area">去結算</div>
</div>
</div>
</div>
</div>
</div>
③頁面底部
<div class="footer">
<div class="w">
<!-- mod_service -->
<div class="mod_service">
<ul>
//自定義串列內容
</ul>
</div>
<!-- mod_help -->自定義串列內容
<div class="mod_help">
<dl class="mod_help_item">
</dl>
<dl class="mod_help_item">
</dl>
<dl class="mod_help_item">
</dl>
<dl class="mod_help_item">
</dl>
<dl class="mod_help_item mod_help_app">
</dl>
</div>
<!-- mod_copyright -->
<div class="mod_copyright">
<p class="mod_copyright_links">
內容自定義
</p>
<p class="mod_copyright_info">
//用戶自定義
</p>
</div>
</div>
</div>
操作樣式
購物車樣式檔案1
購物車樣式檔案2
購物車樣式檔案3
JS檔案
JS檔案
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/289976.html
標籤：其他
下一篇：Javascript DOM事件