-
静态HTML网页设计作品——仿京东-海贼王(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.00i> div> li> <li> <div class="img"><img src="./img/猜你喜欢2.png" alt="">div> <div class="text"> <p>海贼王漫画全套p> <p>尾田荣一郎著p> <i>￥399.00i> 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 bluep> <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">￥2599span> <span class="pass">￥2999span> <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>19strong>span> <span class="one">件span> <div class="box">立即抢购div> div> <div class="sec4"> <img src="./img/艾斯4.png" alt=""> <p>运动风休闲套装p> <span class="now">￥2999span> <span class="pass">￥3499span> <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 Siteli> <li>|li> <li>Contact Uli> div> <div class="part2">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cndiv> <div class="part3">京ICP备08001421号京公网安备110108007702div> div> div> div> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
四、完整源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码 -
相关阅读:
dll修复工具安装教程
linux驱动之调试技巧--- 应用程序远程gdb+vscode调试应用程序, 串口kgdboc调试.ko驱动程序
GBase XDM API 错误处理调用（上）
SkyWalking 为所有的API接口增加 tag
go进阶语法10问
torchtext中文文本预处理使用流程文档
centos8安装gcc
opencv-python之位平面分解与数字水印
压缩pdf在线工具，压缩pdf大小的软件
Symfony技术的几大亮点
- 原文地址：https://blog.csdn.net/qq_524614081/article/details/122342322
