300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > HTML5期末大作业:鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期

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

时间:2021-10-01 19:44:31

相关推荐

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

常见网页设计作业题材有 ​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​ 等网页设计题目, ​​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制作了表单判断(提交时表单不能为空)。

文章目录

​​HTML5期末大作业:鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品​​​​作品介绍​​​​一、作品展示​​1.首页2.关于我3.永生花4.联系我5. 详情​​二、文件目录​​​​三、代码实现​​​​四、web前端(学习资料)​​​​五、源码获取​​​​六、更多源码​​

1.首页

2.关于我

3.永生花

4.联系我

5. 详情

三、代码实现

<!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@</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>

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。