HTML5期末大作业:鲜花网站设计——鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品


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



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


作品介绍

1.网页作品简介​ :HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载,文章页支持手机PC响应式布局。总共21个页面。

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

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

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


文章目录

一、作品展示

1.首页

web期末网站设计大作业:鲜花网站设计——鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作_html

2.关于

web期末网站设计大作业:鲜花网站设计——鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作_ico_02

3. 产品展示

web期末网站设计大作业:鲜花网站设计——鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作_html_03

4.生产实力

web期末网站设计大作业:鲜花网站设计——鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作_ico_04

5.联系我

web期末网站设计大作业:鲜花网站设计——鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作_html_05

web期末网站设计大作业:鲜花网站设计——鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作_css_06

6.荣誉

web期末网站设计大作业:鲜花网站设计——鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作_css_07

7.人才招聘

web期末网站设计大作业:鲜花网站设计——鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作_ico_08

二、文件目录

web期末网站设计大作业:鲜花网站设计——鲜花礼品在线购物网站设计(21页) HTML+CSS+JavaScript web前端课程设计 web前端课程设计代码 web课程设计 HTML网页制作_html_09

三、代码实现

<!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="favicon.ico">

<!-- include main css -->
<link rel="stylesheet" type="text/css" href="css/slick_1.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap_1.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mmenu.all_1.css"/>
<link rel="stylesheet" type="text/css" href="css/style_1.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.mcustomscrollbar_1.css"/>
<link rel="stylesheet" href="css/animates.css" />

<!--[if lt IE 9]>
<script src="js/html5.min_1.js"></script>
<script src="js/respond.min_1.js"></script>
<script type="text/javascript" src="js/selectivizr.js" ></script>
<![endif]-->


</head>
<body>

<div>
<!--header-->
<header class="header">
<section class="container">
<a href="#mmenu" class="glyphicon glyphicon-list phone-nav"></a>
</section>
<div class="container clearfix">
<div class="logo pull-left"><a href="index.html"><img src="picture/logo.png" alt="" /></a></div>
<nav class="nav pull-left">
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a href="about.html">关于XX</a>
<ul>
<li><a href="about.html">公司简介</a></li>
<li><a href="#">董事长致辞</a></li>
<li><a href="honor.html">荣誉资质</a></li>
<li><a href="#">企业文化</a></li>
<li><a href="#">发展历程</a></li>
</ul>
</li>
<li><a href="pro.html">产品展示</a>
<ul>
<li><a href="pro.html">纱线</a>
<div class="three">
<a href="pro.html">纱线一</a>
<a href="pro.html">纱线二</a>
<a href="pro.html">纱线三</a>
<a href="pro.html">纱线四</a>
</div>
</li>
<li><a href="pro.html">坯布</a>
<div class="three">
<a href="pro.html">坯布一</a>
<a href="pro.html">坯布二</a>
<a href="pro.html">坯布三</a>
<a href="pro.html">坯布四</a>
</div>
</li>
<li><a href="pro.html">面料</a>
<div class="three">
<a href="pro.html">面料一</a>
<a href="pro.html">面料二</a>
<a href="pro.html">面料三</a>
<a href="pro.html">面料四</a>
</div>
</li>
<li><a href="pro.html">服装</a>
<div class="three">
<a href="pro.html">服装一</a>
<a href="pro.html">服装二</a>
<a href="pro.html">服装三</a>
<a href="pro.html">服装四</a>
</div>
</li>
</ul>
</li>
<li><a href="news.html">新闻资讯</a>
<ul>
<li><a href="news.html">公司新闻</a></li>
<li><a href="#">行业新闻</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="job.html">人才招聘</a></li>
<li><a href="contact.html">联系我们</a>
<ul>
<li><a href="contact.html">联系方式</a></li>
<li><a href="message.html">在线留言</a></li>
</ul>
</li>
</ul>
</nav>
<div class="language pull-right">
<a class="cn" href="#">中文</a>
<a class="en" href="#">EN</a>
</div>
</div>
</header>

<!--banner-->
<section class="banner">
<div><a href=""><img src="picture/banner_1.jpg" alt=""></a></div>
<div><a href=""><img src="picture/banner_1.jpg" alt=""></a></div>
<div><a href=""><img src="picture/banner_1.jpg" alt=""></a></div>
</section>




<!--移动端 Mmenu-->
<nav id="mmenu">
<ul>
<li><a href="">EN</a></li>
<li><a href="index.html">首 页</a></li>
<li><a href="about.html">关于XX</a>
<ul>
<li><a href="about.html">公司简介</a></li>
<li><a href="">董事长致辞</a></li>
<li><a href="honor.html">荣誉资质</a></li>
<li><a href="">企业文化</a></li>
<li><a href="">发展历程</a></li>
</ul>
</li>
<li><a href="pro.html">产品展示</a>
<ul>
<li><a href="pro.html">纱线</a>
<ul>
<li><a href="pro.html">纱线一</a></li>
<li><a href="pro.html">纱线二</a></li>
<li><a href="pro.html">纱线三</a></li>
<li><a href="pro.html">纱线四</a></li>
</ul>
</li>
<li><a href="pro.html">坯布</a>
<ul>
<li><a href="pro.html">坯布一</a></li>
<li><a href="pro.html">坯布二</a></li>
<li><a href="pro.html">坯布三</a></li>
<li><a href="pro.html">坯布四</a></li>
</ul>
</li>
<li><a href="pro.html">面料</a>
<ul>
<li><a href="pro.html">面料一</a></li>
<li><a href="pro.html">面料二</a></li>
<li><a href="pro.html">面料三</a></li>
<li><a href="pro.html">面料四</a></li>
</ul>
</li>
<li><a href="pro.html">服装</a>
<ul>
<li><a href="pro.html">服装一</a></li>
<li><a href="pro.html">服装二</a></li>
<li><a href="pro.html">服装三</a></li>
<li><a href="pro.html">服装四</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="news.html">新闻资讯</a>
<ul>
<li><a href="news.html">公司新闻</a></li>
<li><a href="">行业新闻</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="job.html">人才招聘</a></li>
<li><a href="contact.html">联系我们</a>
<ul>
<li><a href="contact.html">联系方式</a></li>
<li><a href="message.html">在线留言</a></li>
</ul>
</li>
</ul>
</nav>
</div>

<!--首页产品系列-->
<div class="sypro">
<div class="container">
<div class="sytit-wrap fadeInDown wow">
<div class="sytit">
<div class="sytitwrap">
<h3>产品系列</h3>
<b>TRUELAND PRODUCT SERIES</b>
</div>
</div>
<p>致力于发展高附加值产品,全面提供增值服务;为员工、客户和股东创造最大价值,真诚回馈和服务社会</p>
</div>
<div class="syprocon">
<ul class="clearfix">
<li class="fadeIn wow" data-wow-delay="0.2s">
<a href="pro-show.html">
<div class="syprotxt">
<h3>坯布系列</h3>
<span></span>
<p>本集团是全球最大的包芯棉纺织品供应商之一,专门致力于高附加值时尚棉纺织品....</p>
</div>
<div class="pic"><img class="vcenter" src="picture/sypro1.jpg" alt="" /></div>
</a>
</li>
<li class="fadeIn wow" data-wow-delay="0.2s">
<a href="pro-show.html">
<div class="syprotxt">
<h3>纱线系列</h3>
<span></span>
<p>本集团是全球最大的包芯棉纺织品供应商之一,专门致力于高附加值时尚棉纺织品....</p>
</div>
<div class="pic"><img class="vcenter" src="picture/sypro2.jpg" alt="" /></div>
</a>
</li>
<li class="last fadeIn wow" data-wow-delay="0.2s">
<a href="pro-show.html">
<div class="syprotxt">
<h3>面料系列</h3>
<span></span>
<p>本集团是全球最大的包芯棉纺织品供应商之一,专门致力于高附加值时尚棉纺织品....</p>
</div>
<div class="pic"><img class="vcenter" src="picture/sypro3.jpg" alt="" /></div>
</a>
</li>
</ul>
</div>
</div>
</div>

<!--首页关于我们-->
<div class="syabout">
<div class="container">
<div class="syaredbg">
<div class="syawhitebg">
<div class="syaleft pull-left fadeInLeft wow">
<div class="pic"><img class="vcenter" src="picture/syab.jpg" alt="" /></div>
</div>
<div class="syaright pull-right fadeInRight wow">
<h3>COMPANY PROFILE</h3>
<b>公司简介</b>
<span></span>
<p>唯星纺织集团从创立之初至今,一直致力于打造差异化产品并不断的推陈出新,<br/>
在棉纺织领域推动产业升级及变革,目前已在行业中享有较高的声望,吸引了诸多国际知名纤维供应商的关注与合作。<br/>
唯星多年来采用美国英威达发明并拥有专利的莱卡氨纶系列,出品的弹力纱线已广泛应用于知名高档品牌服装的面料。
</p>
<a href="about.html">→查看详细</a>
</div>
</div>
</div>
</div>
</div>

<!--首页新闻资讯-->
<div class="synews">
<div class="container">
<div class="sytit-wrap fadeInDown wow">
<div class="sytit">
<div class="sytitwrap">
<h3>新闻资讯</h3>
<b>TRUELAND NEWS&INFORMATION</b>
</div>
</div>
<p>致力于发展高附加值产品,全面提供增值服务;为员工、客户和股东创造最大价值,真诚回馈和服务社会</p>
</div>
<ul>
<li class="clearfix">
<div class="pic pull-left fadeInLeft wow">
<a href="news-show.html"><img class="vcenter" src="picture/synews.jpg" alt="" /></a>
</div>
<div class="syntxt pull-right fadeInRight wow">
<span>2020-7-14</span>
<a class="ntit" href="news-show.html">提花女装面料出样增加</a>
<p>中国轻纺城传统市场正处夏日淡季,以制作秋冬两用衫为主的提花女装面料<br/>挂样花式品种增加,现货上市款式品种增多,各地对口客商认购较为持续,以中小批量分散性成交为主,连日销量震荡推升。</p>
<a class="detailed" href="news-show.html">查看更多>></a>
</div>
</li>
<li class="clearfix">
<div class="pic pull-right fadeInRight wow">
<a href="news-show.html"><img class="vcenter" src="picture/synews2.jpg" alt="" /></a>
</div>
<div class="syntxt pull-left fadeInLeft wow">
<span>2020-7-14</span>
<a class="ntit" href="news-show.html">提花里料交易启活 面料温而不火</a>
<p>中国轻纺城传统市场正处夏日淡季,以制作秋冬两用衫为主的提花女装面料<br/>挂样花式品种增加,现货上市款式品种增多,各地对口客商认购较为持续,以中小批量分散性成交为主,连日销量震荡推升。</p>
<a class="detailed" href="news-show.html">查看更多>></a>
</div>
</li>
</ul>
</div>
</div>

<!--友情链接-->
<div class="link">
<div class="container">
<span></span>
<p>
<em>友情链接</em>
<a href="#">上海唯星</a><i>|</i>
<a href="#">我们的专业团队</a><i>|</i>
<a href="#">上海唯星</a><i>|</i>
<a href="#">我们的专业团队</a><i>|</i>
<a href="#">上海唯星</a><i>|</i>
<a href="#">上海唯星</a><i>|</i>
<a href="#">上海唯星</a><i>|</i>
<a href="#">上海唯星</a><i>|</i>
<a href="#">上海唯星</a><i>|</i>
<a href="#">上海唯星</a><i>|</i>
<a href="#">上海唯星</a><i>|</i>
<a href="#">上海唯星</a>
</p>
</div>
</div>

<!--底部开始-->
<footer class="footer">
<div class="container clearfix">
<div class="footerleft pull-left">
<h3>CONTACT</h3>
<span></span>
<ul>
<li><em class="glyphicon glyphicon-earphone"></em><a href="tel:021-12345678">021-12345678</a></li>
<li><em class="glyphicon glyphicon-envelope"></em><a href="mailto:XXX">XXX</a></li>
<li><em class="glyphicon glyphicon-phone"></em><a href="tel:">XXX</a></li>
<li><em class="glyphicon glyphicon-map-marker"></em>XXX******</li>
</ul>
</div>
<div class="footerright pull-right">
<ul class="clearfix">
<li class="li1"><input type="text" placeholder="姓名" /></li>
<li class="li2"><input type="text" placeholder="电话" /><span>*</span></li>
<li class="li6"><input type="text" placeholder="邮箱" /></li>
<li class="li3"><textarea placeholder="留言内容"></textarea><span>*</span></li>
<li class="li4"><input type="text" placeholder="验证码" /><span>*</span><img src="picture/code.jpg" alt="" /><a href="#">看不清,换一张</a></li>
<li class="li5"><input type="submit" value="在线提交" /></li>
</ul>
</div>
</div>
<div class="copy">
<div class="container">
<p class="pull-left">版权所有©:XXX XXX <img src="picture/yu_1.png" alt="" /></p>
<p class="pull-right">
<a href="map.html">站点地图</a>
<span class="weixin">
<a href="#"><img src="picture/weixinh.png" alt="" /></a>
<em class="slideDown"><img src="picture/erweima_1.jpg" alt="" /></em>
</span>
<span class="weibo"><a href="#"><img src="picture/weiboh.png" alt="" /></a></span>
</p>
</div>
</div>
</footer>


</body>
</html>