1000字范文 > div+css静态网页设计——防锤子手机商城官网 (1页) HTML5网页设计成品_学生DW静态网

div+css静态网页设计——防锤子手机商城官网 (1页) HTML5网页设计成品_学生DW静态网

时间：2018-11-12 18:26:01

HTML5期末大作业：防锤子手机商城网站设计——防锤子手机商城官网 (1页) HTML5网页设计成品

文章目录

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"/><link rel="stylesheet" href="css/iconfont.css"><link rel="stylesheet" href="css/swiper.min.css"><script src="js/swiper.min.js"></script><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><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>