✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!
<hr>
<hr>
@TOC
<hr>
🌹 鲜花网页设计 、🌷鲜花商城网页制作、🌼在线花店网站、💐盆栽网、花卉网等网站的设计与制作。
<hr>
🏷️HTML鲜花网页设计,采用DIV+CSS布局,共有多个页面,排版整洁,内容丰富,主题鲜明,首页使用CSS排版比较丰富,色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度,主体内容区域宽度
🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
📔网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面:计划采用最新的网页编程语言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代码)。
<hr>
<!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)]><!-->
<!--条件注释语句,当满足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>
<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">
<!--主要内容区-->
<!--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>
>¥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=""><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="">首页</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')");
}
<hr>
21年程序员总结给编程菜鸟的16条忠告
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。