HTML5期末大作业：防锤子手机商城网站设计——防锤子手机商城官网 (1页) HTML5网页设计成品
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>锤子官网模板</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!--引入网页样式-->
<link href="css/public.css" rel="stylesheet"/>
<link href="css/cz.css" rel="stylesheet"/>
<!--引入iconfont-->
<link rel="stylesheet" href="css/iconfont.css">
<!--引入swiper-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
<!--引入自己写的js-->
<script src="js/index.js"></script>
</head>
<body>
<!--网页开头-->
<div id="cz_page">
<!--顶部-->
<div class="cz_top">
<h1><a href="cz.html"><img src="img/top/logo.png" alt=""></a></h1>
<div class="top_list">
<ul>
<li><a href="">在线商城</a></li>
<li><a href="">坚果Pro 2S</a></li>
<li><a href="">坚果R1</a></li>
<li><a href=""> 坚果TNT工作站</a></li>
<li><a href="">Smartisan OS</a></li>
<li><a href="">欢喜云</a></li>
<li><a href="">论坛</a></li>
<li><a href="">荣誉与奖项</a></li>
</ul>
</div>
<div class="top_sign">
<p><i class="iconfont icon-denglu"></i></p>
<p><i class="iconfont icon-gouwuche"></i></p>
</div>
</div>
<div class="cz_head_nav">
<div class="h-list">
<ul>
<li class="f-bold"><a class="c-black" href="">首页</a></li>
<li><a href="">手机</a></li>
<li><a href="">"足迹"系列</a></li>
<li><a href="">官方配件</a></li>
<li><a href="">畅呼吸</a></li>
<li><a href="">品牌周边</a></li>
<li><a href="">只能音箱</a></li>
<li><a href="">服务</a></li>
<li><a href="">企业团购</a></li>
</ul>
</div>
<div class="h-sear" id="cz-search">
<input type="text" id="h-inp">
<i class="iconfont icon-xiazai17"></i>
<p id="h-inp-txt">坚果Pro 2S领劵最高减300元</p>
</div>
</div>
</div>
<div class="goods-link">
<p><a href="">畅呼吸智能空气净化器 · 标准版</a></p>
<p><a href="">超强净化能力、超低噪音、超长寿命</a></p>
</div>
<p class="goods-price">￥<span>2998.00</span></p>
<div class="whole-link">
<a href="#" class="check-detail">查看详情</a>
<a href="#" class="sell-out">已售罄</a>
</div>
</div>
</td>
</tr>
</table>
</div>
</section>
<!--introduce2-->
<section class="cz_intro2 b-r m-top-25">
<div class="cz_phone">
<ul>
<li><img src="img/intro2/a.jpg" alt=""><a href=""></a></li>
<li><img src="img/intro2/b.jpg" alt=""><a href=""></a></li>
<li><img src="img/intro2/c.jpg" alt=""><a href=""></a></li>
<li><img src="img/intro2/d.jpg" alt=""><a href=""></a></li>
</ul>
</div>
</section>
<!--论坛精选-->
<section class="cz_forum_choice b-r m-top-25">
<div class="g-top">
<h2>论坛精选</h2>
<p>前往论坛 <span>></span></p>
</div>
<div class="form_intro">
<ul>
<li>
<div><img src="img/forumChoice/a.jpg" alt=""></div>
<p>[开箱] 坚果 Pro 2S 内敛骚蓝惊艳炫光</p>
<p>内敛骚蓝，惊艳炫光</p>
<p>阅读全文 ></p>
<a href="" class="whole-link"></a>
</li>
<li>
<div><img src="img/forumChoice/b.jpg" alt=""></div>
<p>[开箱] 坚果 Pro 2S</p>
<p>全新的炫光蓝急炫光红色相当惊艳</p>
<p>阅读全文 ></p>
<a href="" class="whole-link"></a>
</li>
<li>
<div><img src="img/forumChoice/c.jpg" alt=""></div>
<p>[开箱] 纯白色坚果Pro2图赏</p>
<p>优美如斯，冰清玉洁</p>
<p>阅读全文 ></p>
<a href="" class="whole-link"></a>
</li>
<li>
<div><img src="img/forumChoice/d.jpg" alt=""></div>
<p>[合辑] 八月优秀摄影作品</p>
<p>8月的优秀作品如期而至</p>
<p>阅读全文 ></p>
<a href="" class="whole-link"></a>
</li>
</ul>
</div>
</section>
<!--网页身体结束-->
</div>
<!--网页结束-->
</div>
<script>
//banner----swiper初始化
var mySwiper = new Swiper ('.main-swiper-container', {
autoplay:true,
speed:3000,
loop: true,
effect : 'fade',
fadeEffect: {
crossFade: true,
},
//分页器
pagination: {
el: '.main-swiper-pagination',
clickable:true,
},
});
//热门商品部分
var hotGoodsSwiper=new Swiper ('.hotGoods-swiper-container', {
autoplay:false,
effect : 'fade',
fadeEffect: {
crossFade: true,
},
//分页器
pagination: {
el: '.hotGoods-swiper-pagination',
clickable:true,
},
});
//搜索框效果
var oInp=document.getElementById("h-inp"),
oPTxt=document.getElementById("h-inp-txt"),
oSearCont=document.getElementById("cz-search");//搜索框部分
oInp.onfocus=function(){ //获得焦点
oPTxt.style.display="none";
}
oInp.onblur=function(){ //失去焦点
oPTxt.style.display="block";
}
</script>
</body>
</html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码