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


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



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


作品介绍

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

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

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

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


文章目录

一、作品展示

1.首页

HTML5期末大作业:鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码_html

2.关于我

HTML5期末大作业:鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码_html期末大作业_02

3.永生花

HTML5期末大作业:鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码_html期末大作业_03

4.联系我

HTML5期末大作业:鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码_html期末大作业_04

5. 详情

HTML5期末大作业:鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码_鲜花网页设计源码HMTL_05

二、文件目录

HTML5期末大作业:鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码_web期末网站设计大作业_06

三、代码实现

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/web.js" type="text/javascript"></script>
</head>

<body>
<div class="header">
<div class="logo"><a href=""><img src="images/logo.jpg"></a></div>
<div class="nav">
<ul>
<li class="cur"><em><span>首页</span><a href="index.htm">HOME</a></em></li>
<li><em><span>关于我们</span><a href="about.htm">ABOUT</a></em></li>
<li><em><span>永生花</span><a href="flowers-ysh.htm">LIVING</a></em></li>
<li><em><span>鲜花</span><a href="flowers.htm">FLOWERS</a></em></li>
<li><em><span>服务中心</span><a href="service.htm">SERVICE</a></em></li>
<li><em><span>花卉知识</span><a href="knowledge.htm">KNOWLEDGE</a></em>
<ul>
<li><a href="">本周推荐</a></li>
<li><a href="">花艺设计</a></li>
<li><a href="">花材介绍</a></li>
</ul>
</li>
<li><em><span>联系我们</span><a href="contact.htm">CONTACT</a></em></li>
</ul>
<div class="clear"></div>
</div>
<div class="header_r">
<div class="search_form fr">
<form>
<input type="text" class="search_text" placeholder="产品搜索">
<input type="button" class="search_btn" value="">
</form>
</div>
<p> <a href="login.htm">登入</a> &nbsp;&nbsp;&nbsp;&nbsp;<a href="reg.htm">注册</a></p>
</div>
<div class="clear"></div>
</div>
<div class="pages_banner" style="background:url(images/flowers_banner.jpg) no-repeat center top">
<div class="posi">
<h2>鲜花</h2>
<p><a href="">首页</a> / <a href="" class="cur">鲜花</a></p>
</div>
</div>
<div class="wrap">
<div class="products_buy">
<div class="products_img fl">
<div class="indeximg_list">
<div class="img_scroll_maximg">
<div class="img_list_maximg" id="bigimg"><img src="images/img1.jpg" /> </div>
</div>
<div class="text fl">
<div class="img_scroll_minimg img_scroll_c "> <span class="prev_minimg prev_c"></span> <span class="next_minimg next_c"></span>
<div class="img_list_minimg img_list_c">
<ul id="smallimg">
<li><img src="images/img1.jpg" /> </li>
<li><img src="images/img2.jpg" /> </li>
<li><img src="images/img3.jpg" /> </li>
<li><img src="images/img4.jpg" /> </li>
<li><img src="images/img1.jpg" /> </li>
<li><img src="images/img2.jpg" /> </li>
<li><img src="images/img3.jpg" /> </li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="products_price fr">
<p class="font01">FOWEVER</p>
<p class="font02">大地农园绣球花永生花</p>
<div class="info">
<p><img src="images/productsimg2.png"></p>
</div>
<p class="price">¥890</p>
<p><a href="" class="buy_btn">前往购买</a> <a href="" class="zx_btn">在线咨询</a></p>
</div>
<div class="clear"></div>
</div>
<div class="products_bar fl">
<div class="knowledge_form">
<input type="text" class="search_text">
<input type="button" class="search_btn" value="">
</div>
<div class="products_menu">
<div class="title">所有产品</div>
<ul class="menulist">
<li class="cur"> <a href="" class="sub_links">玫瑰</a>
<ul>
<li><a href="">红玫瑰</a></li>
<li><a href="">6支装玫瑰</a></li>
<li><a href="">8支装玫瑰</a></li>
<li><a href="">9支装玫瑰</a></li>
<li><a href="">24支装玫瑰</a></li>
<li><a href="">蓝色妖姬</a></li>
<li><a href="">黄玫瑰</a></li>
</ul>
</li>
<li><a href="" class="sub_links">多肉植物</a></li>
<li><a href="" class="sub_links">绣球花</a></li>
<li><a href="" class="sub_links">薰衣草</a></li>
<li><a href="" class="sub_links">太阳花</a></li>
</ul>
</div>
</div>
<div class="products_main fr">
<div class="products_info">
<div class="tit"><img src="images/productstit.png"></div>
<div class="info">
<div class="text fl">
<p><img src="images/productstit02.png"></p>
<p>&nbsp;</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30"><img src="images/list13.png"> 品牌:ROSE VOVO </td>
<td><img src="images/list13.png"> 适用场景;摆放花艺</td>
</tr>
<tr>
<td height="30"><img src="images/list13.png"> 仿真花类型:保鲜花</td>
<td><img src="images/list13.png"> 颜色分类:紫 红 蓝 </td>
</tr>
<tr>
<td height="30"><img src="images/list13.png"> 组合形式;单品</td>
<td><img src="images/list13.png"> 风格:田园</td>
</tr>
<tr>
<td height="30"><img src="images/list13.png"> 花草种类:绣球花</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div class="img fr"><img src="images/img1.jpg"></div>
<div class="clear"></div>
</div>
</div>
<div class="products_show">
<div class="tit"><img src="images/productstit03.png"></div>
<div class="info">
<p><img src="images/productsimg.png"></p>
<p>&nbsp;</p>
<p>Designer Talk</p>
<p>设计师物语</p>
<p>roseonly的设计师最了解玫瑰,从设计到选材,从制作到包装,只为将"信者得爱,爱是唯一"完美传达。每一道工序,都是为玫瑰而生。</p>
<p>&nbsp;</p>
<p> 玫瑰成为roseonly前,它应是一件艺术品,当艺术品与花盒共舞,她为珍品。玫瑰将爱情孕为珍品盛放花盒,此为"恒久"。</p>
</div>
</div>
</div>
<div class="clear"></div>
</div>
<div class="friend_links wrap">
<ul>
<li><a href=""><img src="images/links01.png"></a></li>
<li><a href=""><img src="images/links02.png"></a></li>
<li><a href=""><img src="images/links03.png"></a></li>
<li><a href=""><img src="images/links04.png"></a></li>
<li><a href=""><img src="images/links05.png"></a></li>
</ul>
<div class="clear"></div>
</div>
<div class="footer">
<div class="wrap fot_info">
<div class="fot_links fl">
<dl>
<dt>关于我们</dt>
<dd><a href="">关于我们</a></dd>
<dd><a href="">企业文化</a></dd>
<dd><a href="">合作伙伴</a></dd>
</dl>
<dl>
<dt>服务中心</dt>
<dd><a href="">订购指南</a></dd>
<dd><a href="">常见问题</a></dd>
<dd><a href="">售后服务</a></dd>
</dl>
<dl>
<dt>人才发展</dt>
<dd><a href="">人才政策</a></dd>
<dd><a href="">工作机会</a></dd>
</dl>
<div class="clear"></div>
</div>
<div class="fot_contact fr">
<p class="font01">Contact US</p>
<p>Tel:(021)678XX638</p>
<p>E-mail:xxx@xxx.com</p>
<p>地址:上海省徐家汇XXXXXXXXX89-号7号办公楼</p>
<div class="fot_search">
<form>
<input type="text" class="search_text">
<input type="button" class="search_btn" value="提交">
</form>
</div>
</div>
<div class="clear"></div>
</div>
<div class="fot_bottom">
<div class="box">
<p class="fr">COPYRXXX© 2084 MORE 备沪7636XXXI</p>
<div class="icons">
<ul>
<li><a href="" class="icon01"></a></li>
<li><a href="" class="icon02"></a>
<div class="ico_box"><img src="images/wx.png"><span class="cur"></span></div>
</li>
<li><a href="" class="icon03"></a></li>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<div class="youce">
<ul>
<li><a title="返回顶部" class="yc1" href="javascript:void(0)" id="gotop" style="display: block;"></a><!--置顶--></li>
<li><a class="yc2" href="javascript:window.external.AddFavorite(location.href,document.title);"></a><!--加入收藏--></li>
<li> <a title="淘宝店铺" class="yc3" href="#">
<div class="wx_box">
<div class="yc_weixin"><span>淘宝店铺</span> </div>
</div>
</a><!--淘宝店铺-->
</li>
<li> <a title="阿里巴巴店铺" class="yc4" href="#">
<div class="wx_box">
<div class="yc_weixin"><span>阿里巴巴店铺</span> </div>
</div>
</a><!--阿里巴巴店铺-->
</li>
<li> <a title="客服" class="yc5" href="#">
<div class="wx_box">
<div class="yc_weixin"><span>客服</span> </div>
</div>
</a><!--阿里巴巴店铺-->
</li>
</ul>
</div>
</body>
</html>

四、web前端(学习资料)

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)

适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

HTML5期末大作业:鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码_html_07