📂文章目录
- 👨🎓网页题目
- ✍️网页描述
- 💠网页效果
- ⚙️ 代码实现
- 🧱HTML结构代码
- 🎁更多干货
👨🎓网页题目
🌹 鲜花网页设计 、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。
✍️网页描述
🏷️HTML鲜花网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度
💠网页效果
⚙️ 代码实现
🧱HTML结构代码
<!--[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)]><!-->
<!--条件注释语句,当满足if语句时则执行-->
<html lang="en">
<head>
<meta charset="utf-8">
<title>XXX花店-首页</title>
<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"/>
</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
</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="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>
</li>
</ol>
</div>
</div>
<div class="search-block">
<input type="text" value="搜索" />
<input type="submit" value="submit"/>
</div>
</section>
</div>
<h1 class="logo">
<img title="Logo" alt="Logo" src="picture/logo.png" /></h1>
<nav id="smoothmenu1" class="ddsmoothmenu mainMenu">
<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>
<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>
<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>
<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>
<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="提交" />
</div>
</div>
</div>
</section>
</div>
。
该方法通常用于缩小在被选元素组合中搜索元素的范围-->
<article style="display:none;">
<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">
<!--快速浏览右边内容-->
<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><em>*</em> 颜色</label>
<span class="required">* 必填项</span>
</div>
<div class="select-row">
<select><option> 红色 </option>
<option> 蓝色 </option>
<option> 粉色 </option>
<option> 紫色 </option>
</select>
</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>
</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>
<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>
🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬更多推荐
大学生静态HTML鲜花网页设计作品 DIV布局网上鲜花介绍网页模板代码 DW花店网站制作成品 web网页制作与实现
发布评论