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/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课程设计网页规划与设计 计算机
发布评论