1200字范文 > HTML5期末大作业：苏苏网站设计——仿苏苏超市(1页) 大学生简单个人静态HTML网页设计

HTML5期末大作业：苏苏网站设计——仿苏苏超市(1页) 大学生简单个人静态HTML网页设计

时间：2020-10-26 21:32:28

HTML5期末大作业：苏苏网站设计——仿苏苏超市(1页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载

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

🧡作者主页-更多源码

🧡HTML期末大作业文章专栏

作品介绍

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

2.网页作品编辑：作品下载后可使用任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++等任意HTML软件编辑修改网页）。

3.网页作品技术：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

文章目录

HTML5期末大作业：苏苏网站设计——仿苏苏超市(1页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载作品介绍一、作品展示二、文件目录三、代码实现四、学习资料五、完整源码六、更多源码

一、作品展示

二、文件目录

三、代码实现

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"><meta name="renderer" content="webkit" /><meta name="force-rendering" content="webkit" /><script>/*@cc_on window.location.href="/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script><title></title><link type="text/css" rel="stylesheet" href="css/style.css" /><script src="js/jquery-1.8.1.min.js"></script><script type="text/javascript" src="js/banner.js"></script></head><body><div class="topssbox1"><div class="topss"><a href="seacher.html"><div class="topssbox"><img src="images/s.png" /></div></a></div></div><div class="banner"><div id="fade_focus"><div class="loading"></div><ul><li><img src="images/b1.png" /></li><li><img src="images/b2.png" /></li></ul></div></div><div class="clear"></div><div class="typeNav"><ul><li><a href="shoplist.html"><img src="images/typeicon1.png" /><p>今日特惠</p></a></li><li><a href="shoplist.html"><img src="images/typeicon2.png" /><p>全球购</p></a></li><li><a href="javascript:void()"><img src="images/typeicon3.png" /><p>充值中心</p></a></li><li><a href="jifen.html"><img src="images/typeicon4.png" /><p>我的积分</p></a></li><li><a href="javascript:void()"><img src="images/typeicon5.png" /><p>签到</p></a></li><li><a href="quanNews1.html"><img src="images/typeicon6.png" /><p>优惠券</p></a></li><li><a href="shoplist.html"><img src="images/typeicon7.png" /><p>闪电购</p></a></li><li><a href="shopType.html"><img src="images/typeicon8.png" /><p>分类</p></a></li></ul></div><div class="clear"></div><div class="hotTit"><div class="hotTitL"><img src="images/hotit.png" /></div><div class="hotTitR"><p>商城开业狂欢！四重大礼等你来抢！</p></div></div><div class="clear"></div><div class="kbox"></div><div class="timeBuy"><div class="Buybox"><p><span>限时</span>抢购</p><a href="shoplist.html" class="more"></a><a href="shoplist.html" class="btn">全场一折起</a></div><ul><li><a href="xq.html"><img src="images/timebuy1.png" /><p>超值特惠电饭煲</p></a></li><li><a href="xq.html"><img src="images/timebuy2.png" /><p>达芙妮秋款包包</p></a></li><li><a href="xq.html"><img src="images/timebuy3.png" /><p>特百惠优质水杯</p></a></li><li><a href="xq.html"><img src="images/timebuy4.png" /><p>易捷手机充电宝</p></a></li></ul><div class="clear"></div></div><div class="clear"></div><div class="kbox"></div><div class="clear"></div><div class="w100"><img src="images/ad.jpg" /></div><div class="clear"></div><div class="kbox"></div><div class="clear"></div><div class="hotMarket"><div class="hotM_1"><div class="hotM_1L"><div style="width:100%; height:100%;background-image:url(images/1.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_1C"><div style="width:100%; height:100%;background-image:url(images/2.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_1R"><div style="width:100%; height:100%;background-image:url(images/3.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div></div><div class="hotM_1"><div class="hotM_1L"><div style="width:100%; height:100%;background-image:url(images/4.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_1C"><div style="width:100%; height:100%;background-image:url(images/5.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_1R"><div style="width:100%; height:100%;background-image:url(images/6.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div></div></div><div class="clear"></div><div class="kbox"></div><div class="hotMarket"><div class="hotM_2"><p><span>品牌</span>特卖</p><i>知名品牌，特价销售</i><a href="shoplist.html" class="more">更多</a></div><div class="hotM_3"><div class="hotM_3L"><div style="width:100%; height:100%;background-image:url(images/7.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_3R"><div class="hotM_3R_1"><div style="width:100%; height:100%;background-image:url(images/8.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_3R_1 br"><div style="width:100%; height:100%;background-image:url(images/9.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_3R_1"><div style="width:100%; height:100%;background-image:url(images/10.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_3R_1 br"><div style="width:100%; height:100%;background-image:url(images/11.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div></div></div></div><div class="clear"></div><div class="kbox"></div><div class="hotMarket"><div class="hotM_2"><p><span>热门</span>主题</p><i>太热门啦，要挤爆了</i><a href="shoplist.html" class="more">更多</a></div><div class="hotM_4"><div class="hotM_4L"><div style="width:100%; height:100%;background-image:url(images/12.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_4R"><div class="hotM_4R_1"><div style="width:100%; height:100%;background-image:url(images/13.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_4R_1 br"><div style="width:100%; height:100%;background-image:url(images/14.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_4R_1"><div style="width:100%; height:100%;background-image:url(images/15.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_4R_1 br"><div style="width:100%; height:100%;background-image:url(images/16.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div></div></div><div class="hotM_5"><div class="hotM_5L"><div style="width:100%; height:100%;background-image:url(images/17.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_5L"><div style="width:100%; height:100%;background-image:url(images/18.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_5L"><div style="width:100%; height:100%;background-image:url(images/19.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div><div class="hotM_5L br"><div style="width:100%; height:100%;background-image:url(images/20.png); background-repeat:no-repeat; background-position:center center; background-size:contain"></div></div></div></div><div class="clear"></div><div class="kbox"></div><div class="likebox"><div class="likeTit"><img src="images/heart.png" /><span>猜你喜欢</span></div><ul><li><a href="xq.html"><img src="images/21.png" class="proimg"/><p class="tit">三利毛巾家纺纯棉吸水提缎面巾两条装</p><p class="price">￥29.9<span>￥49.9</span><img src="images/f3.png" /></p></a></li><li><a href="xq.html"><img src="images/22.png" class="proimg"/><p class="tit">韩国代购正品超爆款 </p><p class="price">￥198.0<span>￥286.0</span><img src="images/f3.png" /></p></a></li><li><a href="xq.html"><img src="images/23.png" class="proimg"/><p class="tit">三利毛巾家纺纯棉吸水提缎面巾两条装</p><p class="price">￥29.9<span>￥49.9</span><img src="images/f3.png" /></p></a></li><li><a href="xq.html"><img src="images/24.png" class="proimg"/><p class="tit">韩国代购正品超爆款休闲迷彩磨砂真皮运动鞋女单鞋</p><p class="price">￥198.0<span>￥286.0</span><img src="images/f3.png" /></p></a></li><li><a href="xq.html"><img src="images/25.png" class="proimg"/><p class="tit">三利毛巾家纺纯棉吸水提缎面巾两条装</p><p class="price">￥29.9<span>￥49.9</span><img src="images/f3.png" /></p></a></li><li><a href="xq.html"><img src="images/26.png" class="proimg"/><p class="tit">韩国代购正品超爆款休闲迷彩磨砂真皮运动鞋女单鞋</p><p class="price">￥198.0<span>￥286.0</span><img src="images/f3.png" /></p></a></li><li><a href="xq.html"><img src="images/27.png" class="proimg"/><p class="tit">三利毛巾家纺纯棉吸水提缎面巾两条装</p><p class="price">￥29.9<span>￥49.9</span><img src="images/f3.png" /></p></a></li><li><a href="xq.html"><img src="images/28.png" class="proimg"/><p class="tit">韩国代购正品超爆款休闲迷彩磨砂真皮运动鞋女单鞋</p><p class="price">￥198.0<span>￥286.0</span><img src="images/f3.png" /></p></a></li></ul></div><div class="fbox"></div><div class="footbox"><div class="footer"><ul><li class="on"><a href="index.html"><img src="images/f1.png" /><p>首页</p></a></li><li><a href="message.html"><img src="images/f02.png" /><p>发现</p></a></li><li><a href="gwc.html"><img src="images/f03.png" /><p>购物车</p></a></li><li><a href="my.html"><img src="images/f04.png" /><p>我的</p></a></li></ul></div></div></body></html>