动漫主题dreamweaver作业静态HTML网页设计——仿京东(海贼王)版本

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

文章目录

一、网页介绍
一、网页效果
二、代码展示
- 1.HTML代码
- 2.CSS代码
三、个人总结
四、更多干货

一、网页介绍

1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。

2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、音频元素、Flash，同时设计了Logo（源文件）所需的知识点。

一、网页效果

在这里插入图片描述

二、代码展示

1.HTML代码

代码如下（示例）：以下仅展示部分代码供参考~


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">
            <ul class="left">
                <li>新世界欢迎您！ li>
                <li><a href="#">请登录  a><a href="#" class="red">免费注册a>li>
            ul>
            <ul class="right">
                <li>我的关注li>
                <li>|li>
                <li class="add">我的新世界li>
                <li>|li>
                <li>新世界会员li>
                <li>|li>
                <li>历史记录li>
                <li>|li>
                <li class="add">关注新世界li>
                <li>|li>
                <li class="add">售后服务li>
                <li>|li>
                <li class="add">网站导航li>
            ul>
        div>
    div>
    
    <div class="header">
        <div class="logo">
            <img src="./img/onepiece.png" alt="" width="286px" height="106px">
        div>
        <p>欢迎来到新世界,一起航海吧!p>
    div>
    
    <div class="nav">
        <div class="both">
            <div class="dropdown">
                <div class="dt">
                    <dt>导航dt>
                div>
                <div class="dd">
                    <dd><a href="#">原创服装a>dd>
                    <dd><a href="#">海报、壁纸a>dd>
                    <dd><a href="#">美妆、洗护a>dd>
                    <dd><a href="#">订制、家具、家装a>dd>
                    <dd><a href="#">男装、女装、童装a>dd>
                    <dd><a href="#">化妆、宠物a>dd>
                    <dd><a href="#">饰品、手表a>dd>
                    <dd><a href="#">户外运动a>dd>
                    <dd><a href="#">手办、玩具a>dd>
                    <dd><a href="#">鞋靴、T恤a>dd>
                    <dd><a href="#">医疗保健a>dd>
                    <dd><a href="#">明信片、通缉令a>dd>
                    <dd><a href="#">会员、漫画a>dd>
                    <dd><a href="#">充值、票务a>dd>
                    <dd><a href="#">众筹、应援a>dd>
                div>
            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">
                <li>
                    <h3>今日致敬h3>
                li>
                <p>再见了，p>
                <p>火拳艾斯。p>
                <img src="./img/艾斯致敬.png" alt="">
            div>
        div>
    div>

            <div class="sec2">
                <img src="./img/艾斯2.png" alt="">
                <p>印花T恤+破洞牛仔裤休闲套装p>
                <span class="now">￥2449span>
                <span class="pass">￥2999span>
                <div>div>
                <span class="one">已售span>
                <span class="red"><strong>75%strong>span>
                <div class="line">
                    <li>li>
                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>
                <span class="red"><strong>5strong>span>
                <span class="one">件span>
                <div class="box">立即抢购div>
            div>
        div>
    div>
    
    <div class="w mosion">

        <div class="hd">
            <div class="left">情怀墙div>
            <div class="right"><a>我要投稿a>div>
        div>
        <div class="bd">
            <img class="img2" src="./img/举手.png">img>
            <p>   有一部动漫，让我热血沸腾；有一部动漫，让我悄然泪下；有一部动漫，让我义愤填膺……是的，那是海贼王的旗帜在飞扬；看吧，那是大海的怒狂；听吧，大海的战歌在回荡；咆哮吧！无畏的海贼王！p>
            <img src="./img/海贼王.png" alt="">
        div>
    div>
    
    <div class="aside">
        <img src="./img/探头.png" alt="">
    div>
    
    <div class="footer">
        <div class="top w">
            <div class="mod_service">
                <div class="out1">
                    <div class="slogan">div>
                    <div class="text">
                        <dt class="dt">正品保障dt>
                        <dd class="dd">正品保障，提供发票dd>
                    div>
                div>
                <div class="out2">
                    <div class="slogan">div>
                    <div class="text">
                        <dt class="dt">极速物流dt>
                        <dd class="dd">极速物流，极速发货dd>
                    div>
                div>
                <div class="out3">
                    <div class="slogan">div>
                    <div class="text">
                        <dt class="dt">无忧售后dt>
                        <dd class="dd">7天无理由退换货dd>
                    div>
                div>
                <div class="out4">
                    <div class="slogan">div>
                    <div class="text">
                        <dt class="dt">特色服务dt>
                        <dd class="dd">私人订制家电套餐dd>
                    div>
                div>
                <div class="out5">
                    <div class="slogan">div>
                    <div class="text">
                        <dt class="dt">帮助中心dt>
                        <dd class="dd">您的购物指南dd>
                    div>
                div>
            div>
            <div class="mod_help w">
                <div class="sec1">
                    <dt class="dt">购物指南dt>
                    <dd class="dd">购物流程dd>
                    <dd class="dd">会员介绍 dd>
                    <dd class="dd"> 生活旅行/团购dd>
                    <dd class="dd"> 常见问题 dd>
                    <dd class="dd"> 大家电 dd>
                    <dd class="dd"> 联系客服dd>
                div>
                <div class="sec2">
                    <dt class="dt">配送方式dt>
                    <dd class="dd">上门自提dd>
                    <dd class="dd">211限时达 dd>
                    <dd class="dd"> 配送服务咨询dd>
                    <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
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297

2.CSS代码


/* 声明字体图标 注意更改路径 */

/* 快捷导航栏 */

.shortcut {
    height: 31px;
    line-height: 31px;
    background-color: #f1f1f1;
}

.cut {
    width: 1200px;
    margin: 0 auto;
}

.cut .left {
    float: left;
}

.cut .right {
    float: right;
}

.cut li {
    float: left;
    font-size: 12px;
}

.red {
    color: #c81623;
}

.cut ul li:nth-of-type(even) {
    padding: 0 10px;
}

.cut .right .add::after {
    content: '\e900';
    font-family: 'icomoon';
    margin-left: 5px;
}


/* 头部header */

.header {
    height: 106px;
    width: 1200px;
    margin: 0 auto;
}

.header .logo img {
    float: left;
}

.header p {
    float: right;
    font-family: '方正舒体';
    font-size: 72px;
    color: #c9021e;
}


/* nav导航栏 */

.nav {
    height: 45px;
    border-bottom: 2px solid #b1191a;
}

.nav .both {
    height: 47px;
    line-height: 47px;
    width: 1200px;
    margin: 0 auto;
}

.dropdown {
    float: left;
    width: 208px;
    height: 512px;
    background-color: #078ffc;
}

.dropdown .dt {
    text-align: center;
    font-size: 18px;
    color: #fff;
}

.dropdown dd {
    /* display: none; */
    position: relative;
    padding-left: 10px;
    margin-left: 1px;
    text-align: left;
    line-height: 31px;
    height: 31px;
    background-color: #58affc;
}

.dropdown dd a {
    color: #f1f1f1;
    font-size: 14px;
}

.dropdown dd:hover {
    background-color: #f1f1f1;
}

.dropdown dd:hover a {
    color: #c81623;
}



.like .hd {
    height: 40px;
}

.like .hd .left {
    float: left;
    font-size: 18px;
    line-height: 40px;
}

.like .hd .right {
    float: right;
    line-height: 40px;
    margin-right: 20px;
}

.like .hd .right img {
    widows: 12px;
    height: 12px;
}

.like .bd {
    height: 240px;
    border: 1px solid #ededed;
}

.like .bd li {
    height: 240px;
    width: 199px;
    float: left;
}

.like .bd li .img {
    width: 170px;
    height: 140px;
    text-align: center;
    line-height: 140px;
    margin-bottom: 5px;
}

.like .bd li .text {
    position: relative;
    width: 170px;
    margin-left: 30px;
}

.like .bd li i {
    color: #df3033;
    font-size: 18px;
}

.like .text:nth-child(-n+5)::after {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 5px;
    width: 1px;
    height: 45px;
    background-color: #ddd;
}


/* 角色简介 */

.actor-help {
    height: 1100px;
}

.actor {
    height: 1100px;
}

.actor .hd {
    height: 40px;
    border-bottom: 1px solid #ededed;
}

.actor .hd .left {
    float: left;
    font-size: 18px;
    line-height: 40px;
}

.actor .hd .right {
    float: right;
    line-height: 40px;
    margin-right: 20px;
}

.actor .hd .right img {
    widows: 12px;
    height: 12px;
}

.actor .bd>div {
    position: relative;
    float: left;
    width: 366px;
    height: 328px;
    margin-top: 1px;
    margin-left: 25.5px;
    margin-bottom: 30px;
    border: 5px solid #000;
}

.actor .bd .sec1 .background {
    position: absolute;
    left: 50px;
    bottom: 2px;
    z-index: -1;
}

.actor .bd .sec3 .background {
    position: absolute;
    left: 200px;
    top: 225px;
    z-index: -2;

.mod_help .dd {
    line-height: 22px;
}

.mod_copyright {
    height: 135px;
    text-align: center;
}

.mod_copyright .part1 {
    height: 16px;
    margin-top: 36px;
    margin-bottom: 16px;
}

.mod_copyright .part1 li {
    float: left;
    padding-left: 20px;
}

.mod_copyright .part2 {
    margin-bottom: 10px;
}

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
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259

三、个人总结

一套合格的网页应该包含(具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；
所有页面相互超链接，可到三级页面，有5-10个页面组成；
页面样式风格统一布局显示正常，不错乱，使用Div+Css技术；
菜单美观、醒目，二级菜单可正常弹出与跳转；
要有JS特效，如定时切换和手动切换图片新闻；
页面中有多媒体元素，如gif、视频、音乐，表单技术的使用；
页面清爽、美观、大方，不雷同。
网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

四、更多干货

1.看到这里了就 【点赞收藏博文】 三连支持下吧，你的支持是我创作的动力, 【观注作者 |获取更多源码| 优质文章】 。

2.关注我带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、期末大作业模板、等! 「在这里有好多前端开发者，一起探讨前端 Node 知识，互相学习」！

3.以上内容技术相关问题可以相互学习交流

在这里插入图片描述

相关阅读:
chmod的权限代号
 linux文件组 avc: denied { dac_read_search } for capability=2
java Excel 自用开发模板
 Python批量测试IP端口GUI程序(Tkinter)
MySQL基础学习总结（二）
Transformer的应用
 07 【收集表单数据】
全国计算机二级考试MySQL有必要考吗
 面试之并查集
 thinkphp6 入门教程合集（更新中）
原文地址：https://blog.csdn.net/qq_38512571/article/details/127582521