200字范文 > 静态HTML网页设计作品——仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计

静态HTML网页设计作品——仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计

时间：2024-07-01 18:48:14

HTML5期末大作业：海贼王影视网站设计——仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wweb前端期末大作业

文章目录

HTML5期末大作业：海贼王影视网站设计——仿京东-海贼王(1页) HTML+CSS+JavaScript 学生DW网页设计作业成品 wweb前端期末大作业一、作品展示二、文件目录三、代码实现四、完整源码

一、作品展示

二、文件目录

三、代码实现

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新世界</title><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/index.css"><link rel="shootcut icon" href="./favicon .ico"></head><body><div class="shortcut"><div class="cut"></div><div class="header"><div class="logo"><img src="./img/onepiece.png" alt="" width="286px" height="106px"></div><p>欢迎来到新世界,一起航海吧!</p></div><div class="navitems"><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></div></div></div><div class="w"><div class="main"><div class="focus"><ul><li><img src="./img/大图.png" alt=""></li></ul><div class="dotted"><li></li><li></li><li></li><li></li></div></div><div class="newsflash"><h5>0点上新</h5><div class="darkblue">全场包邮</div><p>低至1折</p><div class="darkblue2">闪购</div></div><div class="img"><img src="./img/今日推荐4.png" alt=""></div></div></div><div class="like"><div class="hd"><div class="left">猜你喜欢</div><div class="right">换一批   <img src="./img/换一批.png" alt=""></div></div><div class="bd"><li><div class="img"><img src="./img/猜你喜欢1.png" alt=""></div><div class="text"><p>新款海贼王背包</p><p>特拉法尔加·罗新款双肩包</p><i>￥116.00</i></div></li><li><div class="img"><img src="./img/猜你喜欢2.png" alt=""></div><div class="text"><p>海贼王漫画全套</p><p>尾田荣一郎著</p><i>￥399.00</i></div></li><li><div class="text"><p>马克杯</p></div><div class="sec2"><img src="./img/索隆和服.png" alt=""><div class="text"><h1>罗罗诺亚·索隆</h1><p>剑客，喜欢喝酒、睡觉觉，宝剑爱好者，还是一个路痴。草帽海贼团的二把手之一，属于人狠话不多的类型，虽然索大表面看起来比较冷淡，但是对人对事绝对是满腔热血。索大的梦想是成为世界第一大剑豪。</p><p>悬赏金：7.5亿贝利</p></div><div class="down"><li></li></div></div><div class="sec3"><li class="background"><img src="./img/介绍背景.png" alt=""></li><img src="./img/山治和服.png" alt=""><div class="text"><h1>文斯莫克·山治</h1><p>厨师，喜欢做饭，厨艺一绝，喜欢美女，还喜欢抽烟，可以说是一个老烟民了，擅长使用踢技，目前最厉害的技能就属恶魔风脚，草帽海贼团的二把手之一。很有绅士风范。山治的梦想是拥有透明果实的能力，然后……真正的梦想是找到传说中四大海鱼类汇聚的地方all blue</p><p>悬赏金：7亿贝利</p></div><div class="down"><li></li></div></div>p><p>悬赏金：3.5亿</p></div><div class="down"><li></li></div></div><div class="sec7"><img src="./img/弗兰奇和服.png" alt=""><div class="text"><h1>弗兰奇</h1><p>船匠，改造人，拥有高超的造船技术，在水之都与路飞一伙相遇，最终帮助路飞打造了全新的船。在路飞的再三邀请下加入，梦想就是可以看到自己的船可以真正见证这个世界。</p><p>悬赏金：1.9亿贝利</p></div><div class="down"><li></li></div><div class="down"><li></li></div></div></div></div></div><div class="w fasion"><div class="hd"><div class="left">海贼王*时尚潮牌</div><div class="middle">艾斯专场</div><span class="one">剩余</span><span class="red"><strong>37%</strong></span><span class="one">件</span><div class="box">立即抢购</div></div><div class="sec3"><img src="./img/艾斯3.png" alt=""><p>印花T恤+拖地裤休闲套装</p><span class="now">￥2599</span><span class="pass">￥2999</span><div></div><span class="one">已售</span><span class="red"><strong>90%</strong></span><div class="line"><li></li></div><span class="one">剩余</span><span class="red"><strong>19</strong></span><span class="one">件</span><div class="box">立即抢购</div></div><div class="sec4"><img src="./img/艾斯4.png" alt=""><p>运动风休闲套装</p><span class="now">￥2999</span><span class="pass">￥3499</span><div></div><span class="one">已售</span><span class="red"><strong>95%</strong></span><div class="line"><li></li></div><span class="one">剩余</span><dd class="dd"> 配送费收取标准</dd><dd class="dd"> 海外配送 </dd></div><div class="sec3"><dt class="dt">支付方式</dt><dd class="dd">货到付款</dd><dd class="dd">在线支付 </dd><dd class="dd"> 分期付款</dd><dd class="dd"> 邮局汇款 </dd><dd class="dd"> 公司转账</dd></div><div class="sec4"><dt class="dt">售后服务</dt><dd class="dd">售后政策</dd><dd class="dd">价格保护 </dd><dd class="dd"> 退款说明</dd><dd class="dd"> 返修/退换货 </dd><dd class="dd"> 取消订单</dd></div><div class="sec5"><dt class="dt">特色服务</dt><dd class="dd">夺宝岛</dd><dd class="dd">DIY装机 </dd><dd class="dd"> 延保服务</dd><dd class="dd"> 品优购E卡 </dd><dd class="dd"> 品优购通信</dd></div><div class="sec6"><dt class="dt">帮助中心</dt><dd class="dd"><img src="./img/二维码.png" alt="" width="100px" height="100px"></dd></div></div><div class="mod_copyright"><div class="part1"><li>关于我们</li><li>|</li><li>联系我们</li><li>|</li><li>联系客服</li><li>|</li><li>商家入驻</li><li>|</li><li>营销中心</li><li>|</li><li>手机品优购</li><li>|</li><li>友情链接</li><li>|</li><li>销售联盟</li><li>|</li><li>品优购社区</li><li>|</li><li>品优购公益</li><li>|</li><li>English Site</li><li>|</li><li>Contact U</li></div><div class="part2">地址：北京市昌平区建材城西路金燕龙办公楼一层邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+</div><div class="part3">京ICP备08001421号京公网安备110108007702</div></div></div></div></body></html>