時(shí)間：2023-08-14 04:24:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-08-14 04:24:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
鮮花靜態(tài)HTML網(wǎng)頁(yè)作業(yè)作品 大學(xué)生鮮花網(wǎng)頁(yè)設(shè)計(jì)制作成品 簡(jiǎn)單DIV CSS布局網(wǎng)站：精彩專欄推薦 文末獲取聯(lián)系 ?? 作者簡(jiǎn)介: 一個(gè)熱愛把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主 作者主頁(yè): 【主頁(yè)—— 獲取更多優(yōu)質(zhì)源碼】 web前端期末大作業(yè)： 【 畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例 (1000套) 】 程序員有趣的告白方式：【 HTML七夕情人節(jié)表白網(wǎng)頁(yè)制作 (110套) 】 超炫酷的Echarts大屏可視化源碼：【 Echarts大屏展示大數(shù)據(jù)平臺(tái)可視化(150套) 】 HTML+CSS+JS實(shí)例代碼： 【 ?HTML+CSS+JS實(shí)例代碼 (炫酷特效網(wǎng)頁(yè)代碼) 繼續(xù)更新中...】 免費(fèi)且實(shí)用的WEB前端學(xué)習(xí)指南： 【 web前端零基礎(chǔ)到高級(jí)學(xué)習(xí)視頻教程 120G干貨分享】 關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長(zhǎng)，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過(guò)去，歷經(jīng)變遷，物是人非。 然而，對(duì)于技術(shù)的探索和追求從未停歇。 堅(jiān)持原創(chuàng)，熱衷分享，初心未改，繼往開來(lái)！
在線咨詢
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。 其中： （1） html文件包含：其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面； （2） css文件包含：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等； （3） js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼）。<!doctype html><!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--><!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--><!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--><!--[if (gte IE 9)|!(IE)]><!--><!--條件注釋語(yǔ)句,當(dāng)滿足if語(yǔ)句時(shí)則執(zhí)行--><html lang="en"><!--<![endif]--><head> <meta charset="utf-8"> <!--編碼格式--> <title>XXX花店-首頁(yè)</title> <!--引用js文件--> <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> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <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></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"> <!--搜索和購(gòu)物車--> <!--section新標(biāo)簽，與div類似，語(yǔ)義化--> <div class="cart-block"> <!--購(gòu)物車--> <ul> <li>(2)</li> <li> <a href="#" title="購(gòu)物車"><img title="購(gòu)物車" alt="購(gòu)物車" src="picture/item_icon.png"></a> </li> <li>購(gòu)物車</li> </ul> <div id="minicart" class="remain_cart" style="display: none;"> <p class="empty">您的購(gòu)物車共有2件商品</p> <ol> <li> <div class="img-block"><img src="picture/small_img1.png" title="" alt=""></div> <div class="detail-block"> <h4><a href="#" title="玫瑰">玫瑰</a></h4> >￥69.00</div> <div class="pro-btn-block"> <a class="add-cart left" href="#">加入購(gòu)物車</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="picture/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="#">加入購(gòu)物車</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>享受免費(fèi)送貨服務(wù)</h1> <p>我們把所有的訂單當(dāng)做節(jié)日禮物送給你！</p> </div> <div class="news-letter-block"> <h2>免費(fèi)送貨電話</h2> <input type="text" value="手機(jī)號(hào)"> <input type="submit" value="提交"> <!--submit：定義提交按鈕--> </div> </div> </div> </section> </div> <!--Quick view Block--> <!--filter() 方法返回符合一定條件的元素。該方法讓您規(guī)定一個(gè)條件。 不符合條件的元素將從選擇中移除，符合條件的元素將被返回。 該方法通常用于縮小在被選元素組合中搜索元素的范圍--> <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> 標(biāo)簽是H5的新標(biāo)簽,語(yǔ)義化<article>標(biāo)簽定義的內(nèi)容本身必須是有意義的且必須是獨(dú)立于文檔的其余部分--> <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="picture/sale_icon_img.png" title="Sale" alt="Sale" class="sale-img"> <a href=""><img src="picture/quick_view_img1.png" title="Image" alt="Image"></a> </p> <ul class="thum-img"> <li><img src="picture/quick_thum_img1.png" title="小圖" alt="image"></li> <li><img src="picture/quick_thum_img2.png" title="小圖" alt="image"></li> </ul> </div> </div> <div class="quick-view-right tabs"> <!--tab：標(biāo)簽頁(yè)--> <!--快速瀏覽右邊內(nèi)容--> <ul class="tab-block tabNavigation"> <!--Navigation：導(dǎo)航--> <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天無(wú)理由退貨</div> <div class="price-box"> <span class="price">￥69.00</span></div> <div class="availability">有庫(kù)存</div> <div class="color-size-block"> <div class="label-row"> <!--label：標(biāo)簽；row：行，排--> <label><em>*</em> 顏色</label> <span class="required">* 必填項(xiàng)</span> </div> <div class="select-row"> <select><option> 紅色 </option> <option> 藍(lán)色 </option> <option> 粉色 </option> <option> 紫色 </option> </select> <!--select元素用來(lái)創(chuàng)建下拉列表， <select>元素中的<option>標(biāo)簽定義了列表中的可用選項(xiàng)--> </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"> <!--快速瀏覽的加入購(gòu)物車--> <span class="qty-box"> <label for="qty">數(shù)量:</label> <a class="prev" href="#"><img alt="" title="" src="picture/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="picture/qty_next.png"></a> </span> <button title="加入購(gòu)物車" class="form-button"><span>加入購(gòu)物車</span></button> <!--<button> 標(biāo)簽定義一個(gè)按鈕。 在 <button> 元素內(nèi)部可以放置內(nèi)容，比如文本或圖像。 這是該元素與使用 <input>元素創(chuàng)建的按鈕之間的不同之處--> </div> </div> <div id="tabDes" class="tabDes"> <div> XXX花店適用場(chǎng)景: 愛意表達(dá) 生日 祝福 婚禮 探望 其他 求婚 友情 周年紀(jì)念</div> <div>鮮花主花材: 百合適用對(duì)象: 愛人 老師 客戶 領(lǐng)導(dǎo)/長(zhǎ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="#">購(gòu)物保障</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="#">我們的實(shí)力</a></li> <li class="aboutus-block">本店商品已向全國(guó)2603個(gè)區(qū)縣提供自營(yíng)配送服務(wù)，支持貨到付款、POS機(jī)刷卡和售后上門服務(wù)，讓您購(gòu)物無(wú)憂！ <a href="#">更多</a> </li> </ul> </div> <div class="footer-bottom-block"> <ul class="bottom-links"> <li><a href="">首頁(yè)</a></li> <li><a href="contact_us.html">留言板</a></li> </ul> <p class="copyright-block">Copyright © 2020.XXX花店 All rights reserved.</p> </div> </footer> </section></body></html>#colorbox,#cboxOverlay,#cboxWrapper { position: absolute; top: 0; left: 0; z-index: 9999; overflow: hidden;}#cboxOverlay { position: fixed; width: 100%; height: 100%;}#cboxMiddleLeft,#cboxBottomLeft { clear: left;}#cboxContent { position: relative;}#cboxLoadedContent { overflow: auto;}#cboxTitle { margin: 0; display: none!important;}#cboxLoadingOverlay,#cboxLoadingGraphic { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow { cursor: pointer;}.cboxPhoto { float: left; margin: auto; border: 0; display: block; max-width: none;}.cboxIframe { width: 100%; height: 100%; display: block; border: 0;}#colorbox,#cboxContent,#cboxLoadedContent { box-sizing: content-box;}#cboxOverlay { background: url(../image/overlay.png) repeat 0 0;}#colorbox {}#cboxTopLeft { width: 21px; height: 21px; background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -101px 0;}#cboxTopRight { width: 21px; height: 21px; background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -130px 0;}#cboxBottomLeft { width: 21px; height: 21px; background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -101px -29px;}#cboxBottomRight { width: 21px; height: 21px; background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -130px -29px;}#cboxMiddleLeft { width: 21px; background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) left top repeat-y;}#cboxMiddleRight { width: 21px; background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) right top repeat-y;}#cboxTopCenter { height: 21px; background: url(../image/border.png) 0 0 repeat-x;}#cboxBottomCenter { height: 21px; background: url(../image/border.png) 0 -29px repeat-x;}#cboxContent { background: #fff; overflow: hidden;}.cboxIframe { background: #fff;}#cboxError { padding: 50px; border: 1px solid #ccc;}#cboxTitle { position: absolute; bottom: 4px; left: 0; text-align: center; width: 100%; color: #949494;}#cboxCurrent { position: absolute; bottom: 4px; left: 58px; color: #949494;}#cboxSlideshow { position: absolute; bottom: 4px; right: 30px; color: #0092ef;}#cboxPrevious { position: absolute; bottom: 0; left: 0; background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -75px 0; width: 25px; height: 25px; text-indent: -9999px;}#cboxPrevious:hover { background-position: -75px -25px;}#cboxNext { position: absolute; bottom: 0; left: 27px; background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -50px 0; width: 25px; height: 25px; text-indent: -9999px;}#cboxNext:hover { background-position: -50px -25px;}#cboxLoadingOverlay { background: url(../image/loading_background.png) no-repeat center center;}#cboxLoadingGraphic { background: url(http://www.ylcp.shop/files/files/1649403337119/images/loading.gif) no-repeat center center;}#cboxClose { position: absolute; top: 0; right: 0; background: url(http://www.ylcp.shop/files/files/1649403337119/images/controls.png) no-repeat -25px 0; width: 25px; height: 25px; text-indent: -9999px;}#cboxClose:hover { background-position: -25px -25px;}.cboxIE #cboxTopLeft,.cboxIE #cboxTopCenter,.cboxIE #cboxTopRight,.cboxIE #cboxBottomLeft,.cboxIE #cboxBottomCenter,.cboxIE #cboxBottomRight,.cboxIE #cboxMiddleLeft,.cboxIE #cboxMiddleRight { filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF);}.cboxIE6 #cboxTopLeft { background: url(../image/borderTopLeft.png);}.cboxIE6 #cboxTopCenter { background: url(../image/borderTopCenter.png);}.cboxIE6 #cboxTopRight { background: url(../image/borderTopRight.png);}.cboxIE6 #cboxBottomLeft { background: url(../image/borderBottomLeft.png);}.cboxIE6 #cboxBottomCenter { background: url(../image/borderBottomCenter.png);}.cboxIE6 #cboxBottomRight { background: url(../image/borderBottomRight.png);}.cboxIE6 #cboxMiddleLeft { background: url(../image/borderMiddleLeft.png);}.cboxIE6 #cboxMiddleRight { background: url(../image/borderMiddleRight.png);}.cboxIE6 #cboxTopLeft,.cboxIE6 #cboxTopCenter,.cboxIE6 #cboxTopRight,.cboxIE6 #cboxBottomLeft,.cboxIE6 #cboxBottomCenter,.cboxIE6 #cboxBottomRight,.cboxIE6 #cboxMiddleLeft,.cboxIE6 #cboxMiddleRight { _behavior: expression(this.src=this.src ? this.src: this.currentStyle.backgroundImage.split('"')[1], this.style.background="none", this.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");}請(qǐng) “ 點(diǎn)贊” “??評(píng)論” “ 收藏”一鍵三連哦！ 【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！關(guān)鍵詞：鮮花,簡(jiǎn)單,作成,布局,設(shè)計(jì),靜態(tài),作業(yè),作品
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
