HTML作业-花店网页商城
生活随笔
收集整理的這篇文章主要介紹了
HTML作业-花店网页商城
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
?HTML期末大作業(yè)-花店網(wǎng)頁商城，共5個頁面(HTML+CSS+JavaScript)
部分網(wǎng)頁源碼
<html lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"><!--編碼格式--> <title>如意花店-首頁</title><script src="js/jquery-1.8.2.min.js"></script> <script src="js/common.js"></script> <script src="js/jquery.easing.1.3.js"></script> <script src="js/ddsmoothmenu.js"></script> <script src="js/jquery.flexslider.js"></script> <script src="js/jquery.elastislide.js"></script> <script src="js/jquery.jcarousel.min.js"></script> <script src="js/jquery.accordion.js"></script> <script src="js/light_box.js"></script> <script type="text/javascript">$(document).ready(function(){$(".inline").colorbox({inline:true, width:"50%"});});</script> <!--end js--><!-- 適配于手機瀏覽 ================================================== --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><!-- CSS ================導入外部樣式表================================== --><!--可以在<head>部分通過<style>標簽定義內(nèi)部樣式表； 當樣式需要被應(yīng)用到很多頁面的時候，外部樣式表將是理想的選擇。 使用外部樣式表，就可以通過更改一個文件來改變整個站點的外觀--> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/orange.css"> <link rel="stylesheet" href="css/skeleton.css"> <link rel="stylesheet" href="css/layout.css"> <link rel="stylesheet" href="css/ddsmoothmenu.css"/> <link rel="stylesheet" href="css/elastislide.css"/> <link rel="stylesheet" href="css/home_flexslider.css"/><link rel="stylesheet" href="css/light_box.css"/> <script src="js/html5.js"></script><!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--><!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--></head> <body><div class="mainContainer big container"><!--主要內(nèi)容區(qū)--><!--Header Block--><div class="header-wrapper"><header class="container"><div class="head-right"><ul class="top-nav"><li class=""><a href="#">我的賬戶</a></li><li class="my-wishlist"><a href="#">收藏</a></li><li class="checkout"><a href="#" >結(jié)算</a></li><li class="log-in"><a href="account_login.html" >登錄</a></li></ul><section class="header-bottom"><!--搜索和購物車--><!--section新標簽，與div類似，語義化--><div class="cart-block"><!--購物車--><ul><li>(2)</li><li><a href="#" title="購物車"><img title="購物車" alt="購物車" src="images/item_icon.png" /></a></li><li>購物車</li></ul><div id="minicart" class="remain_cart" style="display: none;"><p class="empty">您的購物車共有2件商品</p><ol><li><div class="img-block"><img src="images/small_img1.png" title="" alt="" /></div><div class="detail-block"><h4><a href="#" title="玫瑰">玫瑰</a></h4><p><strong>1</strong> x ￥99.00<!--strong用于文本加粗，強調(diào)作用--></p><a href="#" title="Details">細節(jié)展示</a></div><div class="edit-delete-block"><a href="#" title="Edit"><img src="images/edit_icon.png" alt="Edit" title="Edit" /></a><!--<img>中“alt”當瀏覽器無法加載圖片時顯示替代文本的屬性--><a href="#" title="Remove"><img src="images/delete_item_btn.png" alt="Remove" title="Remove" /></a></div></li><li><div class="img-block"><img src="images/small_img.png" title="" alt="" /></div><div class="detail-block"><h4><a href="#" title="玫瑰">玫瑰</a></h4><p><strong>1</strong> x ￥99.00</p><a href="#" title="Details">細節(jié)展示</a></div><div class="edit-delete-block"><a href="#" title="Edit"><img src="images/edit_icon.png" alt="Edit" title="Edit" /></a><a href="#" title="Remove"><img src="images/delete_item_btn.png" alt="Remove" title="Remove" /></a></div></li><li><div class="total-block">共計:<span>￥198.00</span></div><a href="index.html" title="結(jié)算" class="orange-btn">結(jié)算</a><!--<div class="clear"></div>--></li></ol></div></div><!--搜索框--><div class="search-block"><input type="text" value="搜索" /><!--定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為 20 個字符。并不是所有的主流瀏覽器都支持新的input類型。--><input type="submit" value="submit"/><!--submit定義提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務(wù)器--></div></section></div><!--LOGO--><h1 class="logo"><img title="Logo" alt="Logo" src="images/logo.png" /></h1><nav id="smoothmenu1" class="ddsmoothmenu mainMenu"><!--nav標簽定義導航鏈接的部分，是H5的新標簽，優(yōu)點是語義化--><ul id="nav"><!--無序列表--><li class="active"><a href="index.html">首頁</a></li><li ><a href="category.html">全部商品</a></li> <li><a href="contact_us.html">留言板</a></li></ul></nav><!--響應(yīng)式導航菜單--><div class="mobMenu"><h1><span>菜單</span><a class="menuBox highlight" href="javascript:void(0);"></a><!--javascript：void（0）空鏈接，沒有跳轉(zhuǎn)--><span class="clearfix"></span><!--清除浮動對后面元素的影響--></h1><div id="menuInnner" style="display:none;"><!--設(shè)置默認狀態(tài)是不顯示--><ul class="accordion"><!--accordion：可折疊的--><!--無序列表--><li class="active"><a href="index.html" >首頁</a></li><li class="parent"><a href="category.html" >全部商品</a></li><li class=""><a href="contact_us.html" >留言板</a></li><span class="clearfix"></span></ul></div> </div></div><!--Banner Block--><section class="banner-wrapper"><div class="banner-block container"><div class="flexslider"><!--調(diào)用框架接口--><ul class="slides"><li><img title="Banner" alt="Banner" src="images/banner1.png" /></li><li><img title="Banner" alt="Banner" src="images/banner2.png" /></li><li><img title="Banner" alt="Banner" src="images/banner3.png" /></li><li><img title="Banner" alt="Banner" src="images/banner4.png" /></li></ul></div><ul class="banner-add"><li class="add1"><a href="#" title=""><img title="add1" alt="add1" src="images/banner_add1.png" /></a></li><li class="add2"><a href="#" title=""><img title="add2" alt="add2" src="images/banner_add2.png" /></a></li></ul></div></section><!--Content Block--><!--內(nèi)容區(qū)--><section class="content-wrapper"><div class="content-container container"><div class="heading-block"><h1>熱賣商品</h1><ul class="pagination"><li class="grid"><a href="#" title="網(wǎng)格"></a></li><!--網(wǎng)格狀翻轉(zhuǎn)按鈕--></ul></div><!--feature：特色，特價--><div class="feature-block"><ul id="mix" class="product-grid"><li><!--第一個--><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img1.png" /></div><div class="pro-hover-block"><!--“熱賣商品”和“新品上架”區(qū)別：鼠標經(jīng)過--><h4 class="pro-name">玫瑰</h4><div class="link-block"> <a href="#quick-view-container" class="quickllook inline" title="快速瀏覽">快速瀏覽</a> <a href="index.html" class="quickproLink" title="Link">產(chǎn)品鏈接</a></div><div class="pro-price">￥69.00</div></div></li><li><!--第二個--><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img2.png" /></div><div class="pro-hover-block"><h4 class="pro-name">康乃馨</h4><div class="link-block"> <a href="#quick-view-container" class="quickllook inline" title="快速瀏覽">快速瀏覽</a> <a href="index.html" class="quickproLink" title="Link">產(chǎn)品鏈接</a></div><div class="pro-price">￥69.00</div></div></li><li><!--第三個--><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img3.png" /></div><div class="pro-hover-block"><h4 class="pro-name">玫瑰</h4><div class="link-block"> <a href="#quick-view-container" class="quickllook inline" title="快速瀏覽">快速瀏覽</a> <a href="index.html" class="quickproLink" title="Link">產(chǎn)品鏈接</a></div><div class="pro-price">￥69.00</div></div></li><li><!--第四個--><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img.png" /></div><div class="pro-hover-block"><h4 class="pro-name">玫瑰</h4><div class="link-block"> <a href="#quick-view-container" class="quickllook inline" title="快速瀏覽">快速瀏覽</a> <a href="index.html" class="quickproLink" title="Link">產(chǎn)品鏈接</a></div><div class="pro-price">￥69.00</div></div></li><li><!--第五個--><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img4.png" /></div><div class="pro-hover-block"><h4 class="pro-name">玫瑰</h4><div class="link-block"> <a href="#quick-view-container" class="quickllook inline" title="快速瀏覽">快速瀏覽</a> <a href="index.html" class="quickproLink" title="Link">產(chǎn)品鏈接</a></div><div class="pro-price">￥69.00</div></div></li><li><!--第六個--><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img5.png" /></div><div class="pro-hover-block"><h4 class="pro-name">玫瑰</h4><div class="link-block"> <a href="#quick-view-container" class="quickllook inline" title="快速瀏覽">快速瀏覽</a> <a href="index.html" class="quickproLink" title="Link">產(chǎn)品鏈接</a></div><div class="pro-price">￥69.00</div></div></li><li><!--第八個--><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img.png" /></div><div class="pro-hover-block"><h4 class="pro-name">玫瑰</h4><div class="link-block"> <a href="#quick-view-container" class="quickllook inline" title="快速瀏覽">快速瀏覽</a> <a href="index.html" class="quickproLink" title="Link">產(chǎn)品鏈接</a></div><div class="pro-price">￥69.00</div></div></li><li><!--第九個--><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img6.png" /></div><div class="pro-hover-block"><h4 class="pro-name">玫瑰</h4><div class="link-block"> <a href="#quick-view-container" class="quickllook inline" title="快速瀏覽">快速瀏覽</a> <a href="index.html" class="quickproLink" title="Link">產(chǎn)品鏈接</a></div><div class="pro-price">￥69.00</div></div></li><li><!--第十個--><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img7.png" /></div><div class="pro-hover-block"><h4 class="pro-name">玫瑰</h4><div class="link-block"> <a href="#quick-view-container" class="quickllook inline" title="快速瀏覽">快速瀏覽</a> <a href="index.html" class="quickproLink" title="Link">產(chǎn)品鏈接</a></div><div class="pro-price">￥69.00</div></div></li></ul></div><div class="heading-block"><h1>新品上架</h1></div><div class="new-product-block"><ul class="product-grid"><li><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img8.png" /></div><div class="pro-content"><p>百合花</p></div><div class="pro-price">￥69.00</div><div class="pro-btn-block"> <a class="add-cart left" href="#">加入購物車</a> <a class="add-cart right quickCart inline" href="#quick-view-container" title="快速瀏覽">快速瀏覽</a> </div><div class="pro-link-block"> <a class="add-wishlist left" href="#" title="收藏">收藏</a> <a class="add-compare right" href="#">找相似</a><div class="clearfix"></div></div></li><li><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img9.png" /></div><div class="pro-content"><p>玫瑰花</p></div><div class="pro-price">￥69.00</div><div class="pro-btn-block"> <a class="add-cart left" href="#" title="加入購物車">加入購物車</a> <a class="add-cart right quickCart inline" href="#quick-view-container" title="快速瀏覽">快速瀏覽</a> </div><div class="pro-link-block"> <a class="add-wishlist left" href="#" title="收藏">收藏</a> <a class="add-compare right" href="#" title="找相似">找相似</a><div class="clearfix"></div></div></li><li><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img10.png" /></div><div class="pro-content"><p>玫瑰花</p></div><div class="pro-price">￥69.00</div><div class="pro-btn-block"> <a class="add-cart left" href="#" title="加入購物車">加入購物車</a> <a class="add-cart right quickCart inline" href="#quick-view-container" title="快速瀏覽">快速瀏覽</a> </div><div class="pro-link-block"> <a class="add-wishlist left" href="#" title="收藏">收藏</a> <a class="add-compare right" href="#">找相似</a><div class="clearfix"></div></div></li><li><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img11.png" /></div><div class="pro-content"><p>玫瑰花</p></div><div class="pro-price">￥69.00</div><div class="pro-btn-block"> <a class="add-cart left" href="#" title="加入購物車">加入購物車</a> <a class="add-cart right quickCart inline" href="#quick-view-container" title="快速瀏覽">快速瀏覽</a> </div><div class="pro-link-block"> <a class="add-wishlist left" href="#" title="收藏">收藏</a> <a class="add-compare right" href="#" title="找相似">找相似</a><div class="clearfix"></div></div></li></ul><ul class="product-grid"><li><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img12.png" /></div><div class="pro-content"><p>玫瑰花</p></div><div class="pro-price">$69.00</div><div class="pro-btn-block"> <a class="add-cart left" href="#">加入購物車</a> <a class="add-cart right quickCart inline" href="#quick-view-container" title="快速瀏覽">快速瀏覽</a> </div><div class="pro-link-block"> <a class="add-wishlist left" href="#">收藏</a> <a class="add-compare right" href="#">找相似</a><div class="clearfix"></div></div></li><li><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img13.png" /></div><div class="pro-content"><p>玫瑰花</p></div><div class="pro-price">￥69.00</div><div class="pro-btn-block"> <a class="add-cart left" href="#">加入購物車</a> <a class="add-cart right quickCart inline" href="#quick-view-container">快速瀏覽</a> </div><div class="pro-link-block"> <a class="add-wishlist left" href="#" title="收藏">收藏</a> <a class="add-compare right" href="#">找相似</a><div class="clearfix"></div></div></li><li><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img14.png" /></div><div class="pro-content"><p>玫瑰花</p></div><div class="pro-price">￥69.00</div><div class="pro-btn-block"> <a class="add-cart left" href="#">加入購物車</a> <a class="add-cart right quickCart inline" href="#quick-view-container" title="快速瀏覽">快速瀏覽</a> </div><div class="pro-link-block"> <a class="add-wishlist left" href="#" title="收藏">收藏</a> <a class="add-compare right" href="#">找相似</a><div class="clearfix"></div></div></li><li><div class="pro-img"><img title="Freature Product" alt="Freature Product" src="images/default_img.png" /></div><div class="pro-content"><p>玫瑰花</p></div><div class="pro-price">￥69.00</div><div class="pro-btn-block"> <a class="add-cart left" href="#">加入購物車</a> <a class="add-cart right quickCart inline" href="#quick-view-container">快速瀏覽</a> </div><div class="pro-link-block"> <a class="add-wishlist left" href="#" title="收藏">收藏</a> <a class="add-compare right" href="#">找相似</a><div class="clearfix"></div></div></li></ul></div><div class="news-letter-container"><div class="free-shipping-block"><h1>享受免費送貨服務(wù)</h1><p>我們把所有的訂單當做節(jié)日禮物送給你！</p></div><div class="news-letter-block"><h2>免費送貨電話</h2><input type="text" value="手機號" /><input type="submit" value="提交" /><!--submit：定義提交按鈕--></div></div></div></section></div> <!--Quick view Block--><!--filter() 方法返回符合一定條件的元素。該方法讓您規(guī)定一個條件。不符合條件的元素將從選擇中移除，符合條件的元素將被返回。該方法通常用于縮小在被選元素組合中搜索元素的范圍--> <script type="text/javascript"> jQuery (function(){var tabContainers=jQuery('div.tabs > div');tabContainers.hide().filter(':first').show();jQuery('div.tabs ul.tabNavigation a').click(function(){tabContainers.hide();tabContainers.filter(this.hash).show();jQuery('div.tabs ul.tabNavigation a').removeClass('selected');jQuery(this).addClass('selected');return false;}).filter(':first').click();}); </script><article style="display:none;"> <!--<article> 標簽是H5的新標簽,語義化 <article>標簽定義的內(nèi)容本身必須是有意義的且必須是獨立于文檔的其余部分--><section id="quick-view-container" class="quick-view-wrapper"> <div class="quick-view-container"><div class="quick-view-left"><!--快速瀏覽左邊內(nèi)容--><h2>百合花束 鮮花花束</h2><div class="product-img-box"><p class="product-image"><img src="images/sale_icon_img.png" title="Sale" alt="Sale" class="sale-img" /><a href="index.html"><img src="images/quick_view_img1.png" title="Image" alt="Image" /></a> </p><ul class="thum-img"><li><img src="images/quick_thum_img1.png" title="小圖" alt="image" /></li><li><img src="images/quick_thum_img2.png" title="小圖" alt="image" /></li></ul></div></div><div class="quick-view-right tabs"><!--tab：標簽頁--><!--快速瀏覽右邊內(nèi)容--><ul class="tab-block tabNavigation"><!--Navigation：導航--><li><a class="selected" href="#tabDetail">概覽</a></li><li><a href="#tabDes">鮮花詳情</a></li></ul><div id="tabDetail" class="tabDetail"><div class="first-review">此商品為鮮活易腐類，不支持7天無理由退貨</div><div class="price-box"><span class="price">￥69.00</span></div><div class="availability">有庫存</div><div class="color-size-block"><div class="label-row"><!--label：標簽；row：行，排--><label><em>*</em> 顏色</label><span class="required">* 必填項</span> </div><div class="select-row"><select><option> 紅色 </option><option> 藍色 </option><option> 粉色 </option><option> 紫色 </option></select><!--select元素用來創(chuàng)建下拉列表，<select>元素中的<option>標簽定義了列表中的可用選項--></div><div class="label-row"><label><em>*</em>支付方式</label></div><div class="select-row"><select><option>快捷支付</option><option>余額寶支付</option><option>集分寶</option></select></div></div><div class="add-to-cart-box"><!--快速瀏覽的加入購物車--><span class="qty-box"><label for="qty">數(shù)量:</label><a class="prev" href="#"><img alt="" title="" src="images/qty_prev.png"></a><input type="text" name="qty" class="input-text qty" id="qty" maxlength="12" value="1"><a class="next" href="#"><img alt="" title="" src="images/qty_next.png"></a> </span><button title="加入購物車" class="form-button"><span>加入購物車</span></button><!--<button> 標簽定義一個按鈕。在 <button> 元素內(nèi)部可以放置內(nèi)容，比如文本或圖像。這是該元素與使用 <input>元素創(chuàng)建的按鈕之間的不同之處--></div> </div><div id="tabDes" class="tabDes"><div> 如意花店適用場景: 愛意表達 生日 祝福 婚禮 探望 其他 求婚 友情 周年紀念</div><div>鮮花主花材: 百合適用對象: 愛人 老師 客戶 領(lǐng)導/長輩 朋友/同事 病人鮮花朵數(shù): 11朵</div><div>適用節(jié)日: 情人節(jié) 圣誕節(jié) 春節(jié) 3.8婦女節(jié) 母親節(jié) 感恩節(jié) 教師節(jié) 中秋節(jié) 七夕 白色情人節(jié)</div><div>鮮花綠植工藝: 鮮花(鮮切花)鮮花規(guī)格(直徑X高): 35*55花束輔材: 黃鶯/滿天星/勿忘我</div></div></div><div class="clearfix"></div> </div> </section> </article> <!--Footer Block--><section class="footer-wrapper"><footer class="container"><div class="link-block"><ul><li class="link-title"><a href="#">關(guān)于我們</a></li><li><a href="#">售后政策</a></li><li><a href="#">售后服務(wù)</a></li><li><a href="#">隱私權(quán)政策</a></li></ul><ul><li class="link-title"><a href="#">客戶服務(wù)</a></li><li><a href="#">退換貨</a></li><li><a href="#">購物保障</a></li><li><a href="contact_us.html">留言板</a></li></ul><ul><li class="link-title"><a href="#">服務(wù)條款</a></li><li><a href="#">新聞中心</a></li><li><a href="#">幫助</a></li><li><a href="#">服務(wù)條款</a></li></ul><ul><li class="link-title"><a href="#">我們的實力</a></li><li class="aboutus-block">本店商品已向全國2603個區(qū)縣提供自營配送服務(wù)，支持貨到付款、POS機刷卡和售后上門服務(wù)，讓您購物無憂！ <a href="#">更多</a> </li></ul></div><div class="footer-bottom-block"><ul class="bottom-links"><li><a href="index.html">首頁</a></li><li><a href="contact_us.html">留言板</a></li></ul><p class="copyright-block">Copyright © 2016.如意花店 All rights reserved.</p></div></footer></section> </body> </html>部分網(wǎng)頁截圖
新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎！定制產(chǎn)品紅包拿不停！總結(jié)
以上是生活随笔為你收集整理的HTML作业-花店网页商城的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL入门之PHP的MySQL数据库
- 下一篇： WEB安全基础-HTML相关知识