HTML5期末大作业:鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品


常见网页设计作业题材有 ​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 等网页设计题目, ​​A+水平作业​​, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!



1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多?
2.没有合适的模板?等等一系列问题。你想要解决的问题,在这篇博文中基本都能满足你的需求~
3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码,这是一个不错的网页制作,画面精明,非常适合初学者学习使用。


作品介绍

1.网页作品简介​​ :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。包含:​​首页品 牌简介品 牌简介 产品中心 经典案例 花之物语 联系我们,​​总共16个页面。

2.网页作品编辑​​:此作品为学生期末大作业网页设计题材,代码为简单学生水平 html+css 布局制作,作品下载后可使用任意HTML编辑软件(例如:​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++​​ 等任意HTML软件编辑修改网页)。

3.网页作品布局​:网页布局整体为响应式布局、LOGO、导航、主体内容布局。子页面多种布局,兴趣爱好内容使用图片列表布局,成绩页面插入了表格,联系我们使用图片对齐方式设置了左对齐。

4.网页作品技术​:使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。 表单提交、评论留言,并使用JavaScript制作了表单判断(提交时表单不能为空)。


文章目录

一、作品展示

1.首页

web网页设计实例作业 :鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript_html

2.品牌简介

web网页设计实例作业 :鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript_javascript_02

3.产品中心

web网页设计实例作业 :鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript_javascript_03

4.经典案例

web网页设计实例作业 :鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript_网页设计_04

5. 花之物语

web网页设计实例作业 :鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript_网页设计_05

6.联系我们

web网页设计实例作业 :鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript_css_06

二、文件目录

web网页设计实例作业 :鲜花商城网站主题——浪漫红色大气自适应网上鲜花店网页设计(16页) HTML+CSS+JavaScript_javascript_07

三、代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>情人节专属</title>
<meta name="keywords" content="某某科技有限公司">
<meta name="description" content="某某科技有限公司">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="images/favicon.ico">

<!-- include main css -->
<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mmenu.all.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mcustomscrollbar.css"/>



</head>

<body>

<div>

<!--header-->
<header class="header">
<section class="container naver clearfix">
<div class="logo pull-left"><a href="index.html" title="某某科技有限公司" alt="某某科技有限公司">MOU MOU</a></div>
<nav class="nav pull-left">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="brand.html">品牌简介</a>
<ul>
<li><a href="brand.html">品牌简介</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="honor.html">荣誉资质</a></li>
</ul>
</li>
<li class="active"><a href="product.html">产品中心</a>
<ul>
<li><a href="product.html">婚礼花艺</a></li>
<li><a href="product.html">爱情鲜花</a></li>
<li><a href="product.html">长辈鲜花</a></li>
</ul>
</li>
<li><a href="case.html">经典案例</a>
<ul>
<li><a href="case.html">经典案例</a></li>
<li><a href="#">新增分类</a></li>
</ul>
</li>
<li><a href="flower.html">花之物语</a>
<ul>
<li><a href="flower.html">花之物语</a></li>
<li><a href="#">养花知识</a></li>
</ul>
</li>
<li><a href="contact.html">联系我们</a>
<ul>
<li><a href="contact.html">联系我们</a></li>
<li><a href="message.html">在线留言</a></li>
<li><a href="job.html">人才招聘</a></li>
</ul>
</li>
</ul>
</nav>
<div class="search pull-left">
<img src="picture/search.png"/>
<input type="text" class="top_search" value="" />
<input type="submit" class="top_sub" value="搜索" />
</div>
<div class="language pull-right clearfix">
<div class="language_wrap">
<a href="#">EN</a>
<a href="#">CN</a>
</div>
<span>XXX</span>
</div>
</section>
</header>

<section class="container">
<a href="#mmenu" class="phone-nav glyphicon glyphicon-list"></a>
</section>

<!--banner-->
<section class="banner nybanner">
<img src="picture/pro-banner.jpg" alt="">
</section>




<!--移动端 Mmenu-->
<nav id="mmenu">
<ul>
<li><a href="">English</a></li>
<li><a href="index.html">首 页</a></li>
<li><a href="brand.html">品牌简介</a>
<ul>
<li><a href="brand.html">品牌简介</a></li>
<li><a href="">企业文化</a></li>
<li><a href="honor.html">荣誉资质</a></li>
</ul>
</li>
<li><a href="product.html">产品中心</a>
<ul>
<li><a href="">婚礼花艺</a>
<ul>
<li><a href="">求婚必备</a></li>
<li><a href="">情人节专属</a></li>
<li><a href="">其他鲜花</a></li>
</ul>
</li>
<li><a href="product.html">爱情鲜花</a>
<ul>
<li><a href="">求婚必备</a></li>
<li><a href="product.html">情人节专属</a></li>
<li><a href="">其他鲜花</a></li>
</ul>
</li>
<li><a href="">长辈鲜花</a>
<ul>
<li><a href="">求婚必备</a></li>
<li><a href="">情人节专属</a></li>
<li><a href="">其他鲜花</a></li>
</ul>
</li>

</ul>
</li>
<li><a href="case.html">经典案例</a>
<ul>
<li><a href="case.html">经典案例</a></li>
<li><a href="">新增分类</a></li>
</ul>
</li>
<li><a href="flower.html">花之物语</a>
<ul>
<li><a href="flower.html">花之物语</a></li>
<li><a href="">养花知识</a></li>
</ul>
</li>
<li><a href="contact.html">联系我们</a>
<ul>
<li><a href="contact.html">联系我们</a></li>
<li><a href="message.html">在线留言</a></li>
<li><a href="job.html">人才招聘</a></li>
</ul>
</li>
</ul>
</nav>

</div>

<!--内页内容区域-->
<div class="container ny-wrap">
<div class="pro-title clearfix">
<span class="pull-left">产品中心</span>
<p class="pull-right">
<a href="#">婚礼花艺</a><em>|</em>
<a class="active" href="product.html">爱情鲜花</a><em>|</em>
<a href="#">长辈鲜花</a>
</p>
</div>
<div class="container love-wrap pro-con">
<div class="fenlei">
<a href="#">求婚必备</a>
<a class="active" href="#">情人节专属</a>
<a href="#">其他鲜花</a>
</div>
<ul class="clearfix">
<li>
<div class="pic"><a href="pro_show.html"><img src="picture/love1.jpg" class="vcenter"/></a></div>
<p><a href="pro_show.html">海洋之心</a><em></em> <span>399</span></p>
</li>
<li>
<div class="pic"><a href="pro_show.html"><img src="picture/love2.jpg" class="vcenter"/></a></div>
<p><a href="pro_show.html">给柏拉图的信</a><em></em> <span>399</span></p>
</li>
<li>
<div class="pic"><a href="pro_show.html"><img src="picture/love3.jpg" class="vcenter"/></a></div>
<p><a href="pro_show.html">雍容</a><em></em> <span>399</span></p>
</li>
<li>
<div class="pic"><a href="pro_show.html"><img src="picture/love4.jpg" class="vcenter"/></a></div>
<p><a href="pro_show.html">普罗旺斯的一年</a><em></em> <span>1999</span></p>
</li>
<li>
<div class="pic"><a href="pro_show.html"><img src="picture/love1.jpg" class="vcenter"/></a></div>
<p><a href="pro_show.html">海洋之心</a><em></em> <span>399</span></p>
</li>
<li>
<div class="pic"><a href="pro_show.html"><img src="picture/love2.jpg" class="vcenter"/></a></div>
<p><a href="pro_show.html">给柏拉图的信</a><em></em> <span>399</span></p>
</li>
<li>
<div class="pic"><a href="pro_show.html"><img src="picture/love3.jpg" class="vcenter"/></a></div>
<p><a href="pro_show.html">雍容</a><em></em> <span>399</span></p>
</li>
<li>
<div class="pic"><a href="pro_show.html"><img src="picture/love4.jpg" class="vcenter"/></a></div>
<p><a href="pro_show.html">普罗旺斯的一年</a><em></em> <span>1999</span></p>
</li>
</ul>
<div class="page">
<a href="#">首页</a>
<a class="prev" href="#"><img src="picture/pre-bg.png" alt="" /> 上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a class="next" href="#">下一页 <img src="picture/next-bg.png" alt="" /></a>
<a href="#">尾页</a>
</div>
</div>
<div class="case-wrap sycase">
<div class="case-title">
<h3>经典案例</h3>
<span><img src="picture/pro-casebg.png" alt="" />CLASSIC CASE</span>
</div>
<div class="sycase-wrap case-con clearfix">
<ul>
<li>
<div class="pic"><a href="case_show.html"><img src="picture/sycase1.jpg" class="vcenter" alt="" /></a></div>
<a href="case_show.html" class="case-zzch">
婚礼花艺一
</a>
<a href="case_show.html" class="case-zzc">
<h3>婚礼花艺</h3>
<p>某某鲜花礼品网,中国鲜花行业品牌服务商(2013、2015两次获得行业殊荣:中国电子商务协会评定为“中国互联网电子商务鲜花礼品行业龙头企业”),隶属于....</p>
</a>
</li>
<li class="last">
<div class="pic"><a href="case_show.html"><img src="picture/sycase2.jpg" class="vcenter" alt="" /></a></div>
<a href="case_show.html" class="case-zzch">
婚礼花艺二
</a>
<a href="case_show.html" class="case-zzc">
<h3>婚礼花艺</h3>
<p>某某鲜花礼品网,中国鲜花行业品牌服务商(2013、2015两次获得行业殊荣:中国电子商务协会评定为“中国互联网电子商务鲜花礼品行业龙头企业”),隶属于....</p>
</a>
</li>
</ul>
</div>
</div>
</div>



<!--底部导航-->
<div class="container footer-nav">
<div class="panel-footer clearfix">
<div class="footer-left pull-left">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="brand.html">品牌简介</a></li>
<li><a href="product.html">产品中心</a></li>
<li><a href="case.html">经典案例</a></li>
<li><a href="flower.html">花之物语</a></li>
<li><a href="contact.html">联系我们</a></li>
<li><a href="map.html">站点地图</a></li>
</ul>
</div>
<div class="footer-right pull-right">
<div class="friend">
友情链接
<img class="pull-right" src="picture/friends-bg.png" alt="" />
</div>
<div class="dropdown">
<a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>
</div>
</div>
</div>
<div class="footer-copy">
<div class="erweima-wrap"><img src="picture/erweima.jpg" alt="" /></div>
<div class="footer-hotline">
<img src="picture/yu.png" alt="" />
<span>服务热线:<b>XXX</b><em>版权所有<i>?</i>:某某科技有限公司 </em></span>
</div>
</div>
</div>





<!--Include Js-->
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<!--移动端导航-->
<script src="js/jquery.mmenu.all.min.js" type="text/javascript" charset="utf-8"></script>

<script src="js/public.js" type="text/javascript" charset="utf-8"></script>

<!--slick-->
<script src="js/slick.min.js" type="text/javascript" charset="utf-8"></script>


<!--placeholder-->
<script src="js/jquery.placeholder.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){ $('input, textarea').placeholder(); });
</script>

<!--<script src="js/bootstrap.min.js"></script>-->

</body>
</html>