HTML作业-花店网页商城
生活随笔
收集整理的這篇文章主要介紹了
HTML作业-花店网页商城
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?HTML期末大作業-花店網頁商城，共5個頁面(HTML+CSS+JavaScript)
部分網頁源碼
<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>標簽定義內部樣式表； 當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。 使用外部樣式表，就可以通過更改一個文件來改變整個站點的外觀--> <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"><!--主要內容區--><!--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="#" >結算</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用于文本加粗，強調作用--></p><a href="#" title="Details">細節展示</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">細節展示</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="結算" class="orange-btn">結算</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定義提交按鈕。提交按鈕會把表單數據發送到服務器--></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的新標簽，優點是語義化--><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><!--響應式導航菜單--><div class="mobMenu"><h1><span>菜單</span><a class="menuBox highlight" href="javascript:void(0);"></a><!--javascript：void（0）空鏈接，沒有跳轉--><span class="clearfix"></span><!--清除浮動對后面元素的影響--></h1><div id="menuInnner" style="display:none;"><!--設置默認狀態是不顯示--><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"><!--調用框架接口--><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--><!--內容區--><section class="content-wrapper"><div class="content-container container"><div class="heading-block"><h1>熱賣商品</h1><ul class="pagination"><li class="grid"><a href="#" title="網格"></a></li><!--網格狀翻轉按鈕--></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"><!--“熱賣商品”和“新品上架”區別：鼠標經過--><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">產品鏈接</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">產品鏈接</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">產品鏈接</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">產品鏈接</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">產品鏈接</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">產品鏈接</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">產品鏈接</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">產品鏈接</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">產品鏈接</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>享受免費送貨服務</h1><p>我們把所有的訂單當做節日禮物送給你！</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() 方法返回符合一定條件的元素。該方法讓您規定一個條件。不符合條件的元素將從選擇中移除，符合條件的元素將被返回。該方法通常用于縮小在被選元素組合中搜索元素的范圍--> <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>標簽定義的內容本身必須是有意義的且必須是獨立于文檔的其余部分--><section id="quick-view-container" class="quick-view-wrapper"> <div class="quick-view-container"><div class="quick-view-left"><!--快速瀏覽左邊內容--><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：標簽頁--><!--快速瀏覽右邊內容--><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元素用來創建下拉列表，<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">數量:</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> 元素內部可以放置內容，比如文本或圖像。這是該元素與使用 <input>元素創建的按鈕之間的不同之處--></div> </div><div id="tabDes" class="tabDes"><div> 如意花店適用場景: 愛意表達 生日 祝福 婚禮 探望 其他 求婚 友情 周年紀念</div><div>鮮花主花材: 百合適用對象: 愛人 老師 客戶 領導/長輩 朋友/同事 病人鮮花朵數: 11朵</div><div>適用節日: 情人節 圣誕節 春節 3.8婦女節 母親節 感恩節 教師節 中秋節 七夕 白色情人節</div><div>鮮花綠植工藝: 鮮花(鮮切花)鮮花規格(直徑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="#">關于我們</a></li><li><a href="#">售后政策</a></li><li><a href="#">售后服務</a></li><li><a href="#">隱私權政策</a></li></ul><ul><li class="link-title"><a href="#">客戶服務</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="#">服務條款</a></li><li><a href="#">新聞中心</a></li><li><a href="#">幫助</a></li><li><a href="#">服務條款</a></li></ul><ul><li class="link-title"><a href="#">我們的實力</a></li><li class="aboutus-block">本店商品已向全國2603個區縣提供自營配送服務，支持貨到付款、POS機刷卡和售后上門服務，讓您購物無憂！ <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>部分網頁截圖
新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！總結
以上是生活随笔為你收集整理的HTML作业-花店网页商城的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL入门之PHP的MySQL数据库
- 下一篇： C/C++ OpenCV设置感兴趣区域R