HTML5期末大作

文章目录

  • HTML5期末大作
  • 一、作品展示
  • 二、文件目录
  • 三、代码实现
  • 四、学习资料
  • 五、完整源码

一、作品展示






二、文件目录

三、代码实现


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>苏苏超市</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/iconfont.css">
</head>
<body>
<!-- 顶部广告 --><div class="Top_banner" id="Top_banner"><a href="javascript:;"><img src="img/152480985414096131.jpg" alt="" class="Top_banner_jpg" title="蜜蜂节" /></a><a href="javascript:;" class="banner_close" id="banner_close" title="关闭"></a></div><a href="javascript:;" class="banner_open" id="banner_open" title="打开"></a>
<!-- 顶部导航栏 --><div class="nav"><div class="typearea"><div class="nav_left"><a href="javascript:;" class="n_i_hv"><i class="iconfont icon-shouye"></i>返回首页</a><a href="javascript:;" class="n_change_c">网站导航<i class="iconfont icon-icon_arrow_bottom"></i></a><a href="javascript:;">商家入驻<i class="iconfont icon-icon_arrow_bottom"></i></a><a href="javascript:;" class="n_change_c">客户服务<i class="iconfont icon-icon_arrow_bottom"></i></a></div><div class="nav_right"><a href="javascript:;">请登录</a><a href="javascript:;" class="orange">注册有礼</a><a href="javascript:;">我的订单<i class="iconfont icon-icon_arrow_bottom"></i></a><a href="javascript:;">我的易购<i class="iconfont icon-icon_arrow_bottom"></i></a><a href="javascript:;">苏苏会员</a><a href="javascript:;" class="orange"><i class="iconfont icon-gouwuche orange n_ani"></i>购物车<b class="orange">0</b><i class="iconfont icon-icon_arrow_bottom"></i></a><a href="javascript:;">易付宝</a><a href="javascript:;">企业采购</a><a href="javascript:;">手机苏苏<i class="iconfont icon-icon_arrow_bottom"></i></a></div></div></div><!-- 搜索框那一行 --><div class="content_top"><div class="typearea"><div class="logo"><img src="img/logo.jpg" alt="" /></div><div class="content_top_center"><div class="search"><span><i class="iconfont icon-search"></i></span><input type="text" id="placehold"/><a href="javascript:;" class="submit">搜索</a><ul id="ss_uo"></ul></div><div class="search_ul"><ul><li><a href="javascript:;">啤酒</a></li><img src="img/pic2.png" alt="" /><li class="horange"><a href="javascript:;">小罐茶</a></li><img src="img/pic2.png" alt="" /><li><a href="javascript:;">阿胶糕</a></li><img src="img/pic2.png" alt="" /><li class="horange"><a href="javascript:;">怡宝</a></li><img src="img/pic2.png" alt="" /><li class="horange"><a href="javascript:;">维达</a></li><img src="img/pic2.png" alt="" /><li><a href="javascript:;">松露巧克力</a></li><img src="img/pic2.png" alt="" /><li><a href="javascript:;">胡姬花</a></li><img src="img/pic2.png" alt="" /><li><a href="javascript:;">防晒霜</a></li><img src="img/pic2.png" alt="" /><li><a href="javascript:;">伊萨狗粮</a></li><img src="img/pic2.png" alt="" /><li><a href="javascript:;">清扬</a></li></ul></div></div><div class="code"><img src="img/new-down-img.png" alt="" /></div></div></div><!-- 表头 --><div class="sort"><div class="sort_pop"><div class="sort_tit"><i class="iconfont icon-caidan"></i><a href="javascript:;">苏苏超市频道分类</a></div><div class="sort_ul"><ul><li><a href="javascript:;">超值抢购</a></li><span></span><li><a href="javascript:;">量贩巨惠</a></li><span></span><li><a href="javascript:;">苏苏生鲜</a></li><span></span><li><a href="javascript:;">医药保健</a></li><span></span><li><a href="javascript:;">特色馆</a></li><span></span></ul></div></div></div><div class="content"><!-- 导航开始 --><div class="content_nav"><ul><li><i class="iconfont icon-shengxiantianchong c_n_i"></i><span class="c_n_s1"><a href="javascript:;" class="c_n_l">苏苏生鲜</a><i class="iconfont icon-jiantoushang"></i></span><span class="c_n_s2"><a href="javascript:;">水果</a><a href="javascript:;">海鲜水产</a></span></li><li><i class="iconfont icon-jiushuishouru c_n_i"></i><span class="c_n_s1"><a href="javascript:;" class="c_n_l">酒水饮料</a><i class="iconfont icon-jiantoushang"></i></span><span class="c_n_s2"><a href="javascript:;">红酒</a><a href="javascript:;">酸奶</a><a href="javascript:;">咖啡</a></span></li><li><i class="iconfont icon-caigouriyongpin c_n_i"></i><span class="c_n_s1"><a href="javascript:;" class="c_n_l">粮油干货零食</a><i class="iconfont icon-jiantoushang"></i></span><span class="c_n_s2"><a href="javascript:;">食用油</a><a href="javascript:;">坚果蜜饯</a></span></li><li><i class="iconfont icon-yukuaijiatingshenghuo- c_n_i"></i><span class="c_n_s1"><a href="javascript:;" class="c_n_l">纸品清洁</a><i class="iconfont icon-jiantoushang"></i></span><span class="c_n_s2"><a href="javascript:;">抽纸</a><a href="javascript:;">洗衣液</a><a href="javascript:;">卷纸</a><a href="javascript:;">柔顺剂</a></span></li><li><i class="iconfont icon-kouhong c_n_i"></i><span class="c_n_s1"><a href="javascript:;" class="c_n_l">美妆个护</a><i class="iconfont icon-jiantoushang"></i></span><span class="c_n_s2"><a href="javascript:;">洗面奶</a><a href="javascript:;">洗护</a><a href="javascript:;">面膜</a><a href="javascript:;">姨妈巾</a></span></li><li><i class="iconfont icon-yiyaobaojian c_n_i"></i><span class="c_n_s1"><a href="javascript:;" class="c_n_l">医药保健</a><i class="iconfont icon-jiantoushang"></i></span><span class="c_n_s2"><a href="javascript:;">血压计</a><a href="javascript:;">成人用品</a></span></li></ul></div><!-- 右侧活动部分 --><div class="content_nav_r"><div class="c_n_r_t"><ul><li><a href="javascript:;"><em></em><p>牛奶的妙用</p></a></li><li><a href="javascript:;"><em></em><p>小龙虾千万别吃头</p></a></li><li><a href="javascript:;"><em></em><p>1克干燕窝等于40颗蛋</p></a></li></ul></div><div class="c_n_r_b"><a href="javascript:;"><img src="img/sptt_a.png" alt=""></a></div></div><!-- 轮播图 --><div id="container"><ul class="pic"><li><a href="javascript:;"><img src="img/1.jpg" alt="pic1"></a></li><li><a href="javascript:;"><img src="img/2.jpg" alt="pic2"></a></li></ul><ul id="position"><li class="cur"></li><li class=""></li></ul><a href="javascript:;" id="prev" class="arrow"><i class="iconfont icon-jiantoushang"></i></a><a href="javascript:;" id="next" class="arrow"><i class="iconfont icon-jiantoushang"></i></a></div></div><!-- 吸顶效果 --><div class="scrollTop" id="scrollTop"><div class="typearea"><div class="scrollTop_r"><a href="javascript:;" class="s_r_a"><img src="img/logo.jpg" alt="" class="logo_top"></a><div class="search_a"><div class="search_a_r"><i class="iconfont icon-search"></i><input type="text" id="placeholds" class="top_i_a"/><a href="javascript:;" class="submit_t"><input type="submit" value="搜索"></a></div></div></div></div></div><!-- 右边侧边栏 --><div class="inside_column"><div class="in_c_t"><i class="iconfont icon-shouye"></i><a href="javascript:;" class="gocart"><i class="iconfont icon-gouwuche"></i><span class="gophp">购物车</span><span class="gonum">0</span></a><div class="puptit"><a href="javascript:;"><i class="iconfont icon-ai25"></i></a><div class="tit_pop"><a href="javascript:;">消息</a></div></div></div><div class="in_c_c"><div class="puptit"><a href="javascript:;"><i class="iconfont icon-qian"></i></a><div class="tit_pop"><a href="javascript:;">理财</a></div></div><div class="puptit"><a href="javascript:;"><i class="iconfont icon-history"></i></a><div class="tit_pop"><a href="javascript:;">足迹</a></div></div><div class="puptit"><a href="javascript:;"><i class="iconfont icon-qiandao"></i></a><div class="tit_pop"><a href="javascript:;">签到</a></div></div></div><div class="in_c_b"><div class="puptit"><a href="javascript:;"><i class="iconfont icon-iconset0269"></i></a><div class="tit_pop"><a href="javascript:;">在线咨询</a></div></div><div class="puptit"><a href="javascript:;"><i class="iconfont icon-liuyan"></i></a><div class="tit_pop"><a href="javascript:;">意见反馈</a></div></div><div class="puptit"><a href="javascript:;"><i class="iconfont icon-saoma"></i></a><div class="tit_pop tit_pop_img"><a href="javascript:;"><img src="img/h5.png" alt=""></a></div></div><div class="puptit" id="top_pup"><a href="javascript:;"><i class="iconfont icon-top"></i></a><div class="tit_pop"><a href="javascript:;">返回顶部</a></div></div></div></div><!-- 抢购部分 --><div class="buy_tit"><p>限/时/抢/购</p><p>FLASH SALE</p></div><!-- 抢购商品 --><div class="buy"><p class="buy_p" timer="3600" timestamp="1482737420000" datetime="2018-12-26 15:30:20">距离本场结束还有</p><div class="buy_time"><em class="hours">00</em><em class="minutes">00</em><em class="seconds">00</em></div><div class="buy_nav"><ul><li class="active"><i class="iconfont icon-duoyun"></i><a href="javascript:;">今日必抢</a></li><li><i class="iconfont icon-icon-"></i><a href="javascript:;">明日预告</a></li></ul></div><div class="lazy"><div class="lazy_t"><ul class="lazy_t_ul active"><li><a href="javascript:;"><p class="lazy_t_p1">￥79.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">金龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li><li><a href="javascript:;"><p class="lazy_t_p1">￥69.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">木龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li><li><a href="javascript:;"><p class="lazy_t_p1">￥59.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">水龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li><li><a href="javascript:;"><p class="lazy_t_p1">￥49.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">火龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li><li><a href="javascript:;"><p class="lazy_t_p1">￥39.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">土龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li></ul><ul class="lazy_t_ul"><li><a href="javascript:;"><p class="lazy_t_p1">￥149.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">天龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li><li><a href="javascript:;"><p class="lazy_t_p1">￥139.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">地龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li><li><a href="javascript:;"><p class="lazy_t_p1">￥129.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">玄龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li><li><a href="javascript:;"><p class="lazy_t_p1">￥119.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">黄龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li><li><a href="javascript:;"><p class="lazy_t_p1">￥99.90</p><img src="img/01.jpg" alt=""><p class="lazy_name">老龙鱼 葵花籽食用调和油 5L</p><p class="lazy_num">已抢购<span class="num_span">79</span>%</p><span class="num_man"><i></i></span></a></li></ul></div></div></div><!-- 排行榜 --><div class="buy_tit"><p>排/行/榜</p><p>RANKING LIST</p></div><div class="rank"><div class="rank_t"><ul class="rank_t_ul"><li class="active_two"><i class="iconfont icon-chashuiyinliao"></i><p>水饮冲调</p></li><li><i class="iconfont icon-liangyouganhuo"></i><p>粮油米面</p></li><li><i class="iconfont icon-chongwu"></i><p>宠物</p></li><li><i class="iconfont icon-ui"></i><p>个人护理</p></li><li><i class="iconfont icon-jiubei"></i><p>中外名酒</p></li><li><i class="iconfont icon-kouhong"></i><p>美妆</p></li><li><i class="iconfont icon-caigouriyongpin"></i><p>日用家纺</p></li><li><i class="iconfont icon-niunairupin"></i><p>乳制品</p></li><a href="javascript:;">苏苏-88888888</a><span class="shu_line"></span><a href="javascript:;"> 苏苏-88888888</a><span class="shu_line"></span><i>出版物经营许可证新出发苏批字第A-888号</i><i>互联网药品信息服务资格证书</i><a href="javascript:;">（苏）-非经营性-2016-0005</a></p><p class="qita5">本网站直接或间接向消费者推销商品或者服务的商业宣传均属于“广告”（包装及参数、售后保障等商品信息除外）</p><p class="qita6"><img src="img/bottom6.png" alt="" /><img src="img/bottom7.png" alt="" /><img src="img/bottom8.jpg" alt="" /><img src="img/bottom9.png" alt="" /></p></div></div></div>
</body><script src="js/banner.js"></script><script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script><script src="js/scrollTop.js"></script><script src="js/carousel.js"></script><script src="js/time.js"></script><script src="js/xxk.js"></script><script>place($('placehold'));// 生成随机数var num = parseInt(100*Math.random());$('.num_span').text(num);$('.num_man i').css("width",num + "%");// 定时器$('.buy_time').downCount({date: '12/24/2020 12:00:00',offset: +10});// 选项卡$('.buy').tab();// 选项卡$('.rank').tabs();// 返回顶部$(function(){$("#top_pup").click(function() {$("html,body").animate({scrollTop:0}, 500);}); })</script>
</html>

四、学习资料

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

五、完整源码

~ 关注我，点赞博文~ 每天带你涨知识

静态HTML网页设计作品——服装商城-功能齐全(31页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码相关推荐

  1. HTML5期末大作业：购物商城网站设计——尤洪购物商城-功能齐全(30页) HTML+CSS+JavaScript 学生DW网页设计作业成品 实训大作业

    HTML5期末大作业:购物商城网站设计--尤洪购物商城-功能齐全(30页) HTML+CSS+JavaScript 学生DW网页设计作业成品 实训大作业 常见网页设计作业题材有 个人. 美食. 公司. ...

  2. html大作业网页代码 尤洪购物商城-功能齐全(30页) HTML+CSS+JavaScript 学生DW网页设计作业成品 实训大作业

    HTML5期末大作业:购物商城网站设计--尤洪购物商城-功能齐全(30页) HTML+CSS+JavaScript 学生DW网页设计作业成品 实训大作业 文章目录 HTML5期末大作业:购物商城网站设 ...

  3. HTML5期末大作业：商城网站设计——男女装商城-功能齐全(40页) HTML+CSS+JavaScript 大学生网店作品 商城网页设计作业模板 学生网页制作源代码下载

    HTML5期末大作业:商城网站设计--男女装商城-功能齐全(40页) HTML+CSS+JavaScript 大学生网店作品 商城网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人 ...

  4. 学生网页作业商城网站设计——男女装商城-功能齐全(40页) HTML+CSS+JavaScript 大学生网店作品 商城网页设计作业模板 学生网页制作源代码下载

    HTML5期末大作业:商城网站设计--男女装商城-功能齐全(40页) 文章目录 HTML5期末大作业:商城网站设计--男女装商城-功能齐全(40页) 一.作品展示 二.文件目录 三.代码实现 四.学习 ...

  5. 静态HTML网页设计作品—绿色古典旅游景区(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品

    HTML5期末大作业:旅游景区网站设计--绿色古典旅游景区(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电 ...

  6. HTML5期末大作业：服装鞋子网站设计——服装商城(31页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码

    HTML5期末大作业:网站设计--服装商城-功能齐全(31页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业 ...

  7. HTML5期末大作业：网购商城网站设计——服装商城-功能齐全(40页) HTML+CSS 学生HTML个人网页作业作品下载 个人商城网页设计制作 大学生个人网站作业模板 简单个人网页制作

    HTML5期末大作业:网购商城网站设计--服装商城-功能齐全(40页) HTML+CSS 学生HTML个人网页作业作品下载 个人商城网页设计制作 大学生个人网站作业模板 简单个人网页制作 常见网页设计 ...

  8. HTML5期末大作业：化妆品商城网站设计——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页

    HTML5期末大作业:化妆品商城网站设计--化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游 ...

  9. DIV布局——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页

    HTML5期末大作业:化妆品商城网站设计--化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页 文章目录 HTML5期末大作业:化妆品商城网站设计--化妆品 ...

最新文章

  1. Microsoft .NET Pet Shop 4 架构与技术分析
  2. POJ 1691 Painting A Board
  3. JQUERY的appendappendTo
  4. step3 . day3 数据结构之线性表 单项循环链表和双向循环链表
  5. xay loves trees
  6. SpringBoot中使用Shiro和JWT做认证和鉴权
  7. C语言 提取字符串中的所有整数
  8. webapi输出炜json_.Net基于MVC4 Web Api输出Json格式实例
  9. HUSTOJ平台的搭建
  10. 京东方10.1寸1280*800薄屏EV101WXM-N10-BOE工业屏
  11. Fastdfs预留空间问题排查分析
  12. SpringBoot GA/PRE/SNAPSHOT含义
  13. 【微信公众号】第一步：申请公众号及测试号
  14. 传热学相关的无量纲数的物理意义
  15. 促使新网站快速增加百度收录的几个不外传技巧
  16. [李宏毅 机器学习笔记] Gradient Descent
  17. pygame的游戏窗口退出办法
  18. 闲聊----Simulation，MSaaS到SaaS
  19. centos 7升级内核，yum方式升级内核，编译方式升级内核
  20. composer类库—汉字转拼音

热门文章

  1. PlatformIO离线安装终极方法
  2. 判断火车票座位python代码_12306 火车票监控Python代码，12306python, import u
  3. k8s kube-proxy ipvs
  4. 安装suds报错，ImportError: No module named client
  5. LaTex的粗体、斜体和下划线
  6. 据说这些设计模式的理念都是相同的！
  7. 介绍一位朋友，如何从生物工程转到计算机，再到后面自学Python
  8. 2.建立场景图形-2叶节点（Geode）和几何信息
  9. 网页UI视觉设计规范
  10. betwin V.419 实现一台电脑变两台！实用设置案例