🎉精彩專欄推薦 💭文末擷取聯系
✍️ 作者簡介: 一個熱愛把邏輯思維轉變為代碼的技術部落客
💂 作者首頁: 【首頁——🚀擷取更多優質源碼】
🎓 web前端期末大作業： 【📚畢設項目精品實戰案例 (1000套) 】
🧡 程式員有趣的告白方式：【💌HTML七夕情人節表白網頁制作 (110套) 】
🌎超炫酷的Echarts大屏可視化源碼：【🔰 Echarts大屏展示大資料平台可視化(150套) 】
🔖 HTML+CSS+JS執行個體代碼： 【🗂️HTML+CSS+JS執行個體代碼 (炫酷特效網頁代碼) 繼續更新中…】
🎁 免費且實用的WEB前端學習指南： 【📂web前端零基礎到進階學習視訊教程 120G幹貨分享】
🥇 關于作者: 💬曆任研發工程師，技術組長，教學總監；曾于2016年、2020年兩度榮獲CSDN年度十大部落格之星。 十載寒冰，難涼熱血；多年過去，曆經變遷，物是人非。 然而，對于技術的探索和追求從未停歇。 💪堅持原創，熱衷分享，初心未改，繼往開來！
📂文章目錄
- 一、👨🎓網站題目
- 二、✍️網站描述
- 三、📚網站介紹
- 四、💠網站示範
- 五、⚙️ 網站代碼
-
- 🧱HTML結構代碼
- 💒CSS樣式代碼
- 六、🥇 如何讓學習不再盲目
- 七、🎁更多幹貨
一、👨🎓網站題目
🌹 鮮花網頁設計 、🌷鮮花商城網頁制作、🌼線上花店網站、💐盆栽網、花卉網等網站的設計與制作。
二、✍️網站描述
🏷️HTML鮮花網頁設計，采用DIV+CSS布局，共有多個頁面，排版整潔，内容豐富，主題鮮明，首頁使用CSS排版比較豐富，色彩鮮明有活力。頂部導航及底部區域背景色為100%寬度，主體内容區域寬度
🏅 一套優質的💯網頁設計應該包含 (具體可根據個人要求而定)
- 頁面分為頁頭、菜單導航欄（最好可下拉）、中間内容闆塊、頁腳四大部分。
- 所有頁面互相超連結，可到三級頁面，有5-10個頁面組成。
- 頁面樣式風格統一布局顯示正常，不錯亂，使用Div+Css技術。
- 菜單美觀、醒目，二級菜單可正常彈出與跳轉。
- 要有JS特效，如定時切換和手動切換圖檔輪播。
- 頁面中有多媒體元素，如gif、視訊、音樂，表單技術的使用。
- 頁面清爽、美觀、大方，不雷同。 。
- 不僅要能夠把使用者要求的内容呈現出來，還要滿足布局良好、界面美觀、配色優雅、表現形式多樣等要求。
三、📚網站介紹
📔網站布局方面：計劃采用目前主流的、能相容各大主流浏覽器、顯示效果穩定的浮動網頁布局結構。
📓網站程式方面：計劃采用最新的網頁程式設計語言HTML5+CSS3+JS程式語言完成網站的功能設計。并確定網站代碼相容目前市面上所有的主流浏覽器，已達到打開後就能即時看到網站的效果。
📘網站素材方面：計劃收集各大平台好看的圖檔素材，并精挑細選适合網頁風格的圖檔，然後使用PS做出适合網頁尺寸的圖檔。
📒網站檔案方面：網站系統檔案種類包含：html網頁結構檔案、css網頁樣式檔案、js網頁特效檔案、images網頁圖檔檔案；
📙網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟體（如：
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++
等任意html編輯軟體進行運作及修改編輯等操作）。
其中：
（1）📜html檔案包含：其中index.html是首頁、其他html為二級頁面；
（2）📑 css檔案包含：css全部頁面樣式,文字滾動, 圖檔放大等；
（3）📄 js檔案包含：js實作動态輪播特效, 表單送出, 點選事件等等（個别網頁中運用到js代碼）。
四、💠網站示範
五、⚙️ 網站代碼
🧱HTML結構代碼
<!doctype html>
<!--[if lt IE 7 ]><html class="ie ie6" > <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" > <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" > <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<!--條件注釋語句,當滿足if語句時則執行-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8"><!--編碼格式-->
<title>XXX花店-首頁</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>
<!--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="js/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="js/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="picture/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="picture/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="picture/edit_icon.png" alt="Edit" title="Edit" /></a>
<!--<img>中“alt”當浏覽器無法加載圖檔時顯示替代文本的屬性-->
<a href="#" title="Remove"><img src="picture/delete_item_btn.png" alt="Remove" title="Remove" /></a>
</div>
</li>
<li>
<div class="img-block"><img src="picture/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="picture/edit_icon.png" alt="Edit" title="Edit" /></a>
<a href="#" title="Remove"><img src="picture/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="picture/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="picture/banner1.png" /></li>
<li><img title="Banner" alt="Banner" src="picture/banner2.png" /></li>
<li><img title="Banner" alt="Banner" src="picture/banner3.png" /></li>
<li><img title="Banner" alt="Banner" src="picture/banner4.png" /></li>
</ul>
</div>
<ul class="banner-add">
<li class="add1"><a href="#" title=""><img title="add1" alt="add1" src="picture/banner_add1.png" /></a></li>
<li class="add2"><a href="#" title=""><img title="add2" alt="add2" src="picture/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="picture/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="picture/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="picture/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="picture/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="picture/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="picture/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="picture/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="picture/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="picture/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="picture/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="picture/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="picture/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="picture/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="picture/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="picture/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="picture/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="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="#">加入購物車</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="picture/sale_icon_img.png" title="Sale" alt="Sale" class="sale-img" />
<a href="index.html"><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：标簽頁-->
<!--快速浏覽右邊内容-->
<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="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="加入購物車" class="form-button"><span>加入購物車</span></button>
<!--<button> 标簽定義一個按鈕。
在 <button> 元素内部可以放置内容，比如文本或圖像。
這是該元素與使用 <input>元素建立的按鈕之間的不同之處-->
</div>
</div>
<div id="tabDes" class="tabDes">
<div> XXX花店适用場景: 愛意表達 生日 祝福 婚禮 探望 其他 求婚 友情 周年紀念</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 © 2020.XXX花店 All rights reserved.</p>
</div>
</footer>
</section>
</body>
</html>
💒CSS樣式代碼
body {
line-height: 1;
border-top:5px solid;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.left, .columns.left {
float: left;/*columns：欄，縱隊*/
}
.right, .columns.right {
float: right;
}
.hide {
display: none;
}
.highlight {
background: #ff0;
}
.ie9, .ie9 * {
font-family: Arial, "Definitely Not Helvetica", sans-serif !important;
}
body {
background: #fff;
font-family: "Droid Sans", "HelveticaNeue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 16px;
font-size:12px;
line-height: 1.6;
color: #555;
position: relative;
-webkit-font-smoothing: antialiased;
}
/*給字型做初始化*/
h1, h2, h3, h4, h5, h6 {
color: #1b1b1b;
font-weight: bold;
line-height: 1.6;
}
六、🥇 如何讓學習不再盲目
21年程式員總結給程式設計菜鳥的16條忠告
- 入門期間不要盲目看太多書，找一本網上或身邊有經驗程式員推薦的教材，先系統的學習。
- 多看幫助文檔，幫助文檔就像一個遊戲的玩法說明通關秘籍，該看就看别太自信。
- 菜鳥容易被對象、屬性、方法等詞彙迷惑？那是你連最基礎知識都還沒掌握。
- 不要忽視沒一個看起來不起眼的問題，經常總結做到舉一反三。
- 沒積累足夠知識和經驗前，你是開發不出一個完整項目的。
- 把最新技術挂在嘴邊，還不如把過時技術牢記心中。
- 活到老學到老，隻有一招半式是闖不了江湖的。
- 看得懂的書，仔細看；看不懂的書，硬着頭皮也要看完。
- 書讀百遍其義自見，别指望讀一遍就能掌握。
- 請把教程裡的例子親手實踐下，即使案例中有完整源碼。
- 把在教程中看到的有意義的例子擴充；并将其切實的運用到自己的工作中。
- 不要漏掉教程中任何一個習題——請全部做完并做好筆記。
- 水準是在不斷的實踐中完善和發展的，你與大牛差的隻是經驗的積累。
- 每學到一個難點的時候，嘗試對朋友或網上分享你的心得,讓别人都能看得懂說明你真的掌握。
- 做好儲存源檔案的習慣，這些都是你的知識積累。
- 遇到問題不要張口就問，要學會自己找答案，比如google、百度和w3cschool上都有很多程式設計相關資料，你隻要輸入關鍵字就能找到你的答案。
七、🎁更多幹貨
1.如果我的部落格對你有幫助、如果你喜歡我的部落格内容，
請 “👍點贊” “✍️評論” “💙收藏”
一鍵三連哦！
2.
💗【👇🏻👇🏻👇🏻關注我| 💬擷取更多源碼 | 優質文章】
帶您學習各種前端插件、3D炫酷效果、圖檔展示、文字效果、以及整站模闆 、大學生畢業HTML模闆 、期末大作業模闆 、等! 「在這裡有好多 前端 開發者，一起探讨 前端 Node 知識，互相學習」！
3.
以上内容技術相關問題💌歡迎一起交流學習👇🏻👇🏻👇🏻💬