二、📚网站介绍

📔企业网站定制开发网站布局方面：企业网站定制开发计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

三、🔗网站效果

▶️1.视频演示

🧩 2.图片演示

四、💒 网站代码

🧱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/style.css"></head><body>    <div id="bigbox">        <div id="title">            <img src="picture/bg.png" alt="">            <div>                <img src="picture/touxiang.png" alt="">            </div>        </div>        <div id="mian">            <div id="mian_left">                <a href="">我的主页</a>                <a href="jiaixang.html">我的家乡</a>                <a href="aihao.html">我的爱好</a>                <a href="liuyan.html">给我留言</a>                <div id="bg2">                    <img src="picture/bg2.png" alt="">                </div>            </div>            <div id="mian_right">                <div class="content">                    <ul class="wrapper">                        <li><img src="picture/banner.png"></li>                        <li><img src="picture/banner1.png"></li>                        <li><img src="picture/banner2.png"></li>                        <li><img src="picture/banner.png"></li>                    </ul>                    <ul class="radius">                    </ul>                    <div class="prev">                        <span>                            < </span>                    </div>                    <div class="next">                        <span>></span>                    </div>                </div>            </div>        </div>        <div id="main2">            <p class="title">                我去过的            </p>            <div id="tupian">                <img src="picture/l1.png" alt="">                <p>颐和园</p>            </div>            <div id="tupian">                <img src="picture/l2.png" alt="">                <p>重庆</p>            </div>            <div id="tupian">                <img src="picture/l3.png" alt="">                <p>辽宁</p>            </div>            <div id="tupian">                <img src="picture/l4.png" alt="">                <p>海南</p>            </div>        </div>        <div id="main3">            <p>                <span>姓名</span>：******<br>                <span>爱好</span>：拳击，打球，健身，读书<br>                <span>性格</span>：开朗<br>                <span>特长</span>：打蓝球，拳击<br>                <span>家乡</span>：新疆和田地区            </p>            <p>                <span>自我评价</span>                本人性格开朗、踏实、稳重、有活力，待人热情、真诚。喜欢在空余的时间看书和听音乐，从中减轻平时学习中带来的压力，还可以学到书本中学不到的知识，开拓自己的眼界、积极并不断进取是我做事的原则，谦虚和谨慎是我的优点，懂得不断从生活和学习中提高和完善自己、为人诚实，有良好的人际交往能力，具备相关的专业知识和认证细心的做事态度。            </p>        </div>        <footer>            <p>版权所有©：******</p>        </footer>    </div></body><script src="js/js.js"></script></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

🏠CSS样式代码

* {    margin: 0px;    padding: 0px;    list-style: none;}body {    background-color: #E5E5E5;}#bigbox {    width: 1000px;    margin: 0 auto;    -moz-box-shadow: 2px 2px 5px #333333;    -webkit-box-shadow: 2px 2px 5px #333333;    box-shadow: 2px 2px 5px #333333;}#title {    position: relative;    width: 1000px;    font-size: 0px;}#title>img {    width: 1000px;    height: 104px;}#title div img {    position: absolute;    width: 80px;    top: 12px;    left: 50px;    border-radius: 50%;}#mian {    background-color: #fff;    padding-top: 10px;    font-size: 0px;}#mian>div {    font-size: 16px;}#mian_left {    width: 180px;    display: inline-block;    height: 390px;}#mian_left a {    display: inline-block;    text-align: center;    width: 160px;    background: #525252;    /* fallback for old browsers */    background: -webkit-linear-gradient(to right, rgb(82, 82, 82), rgb(61, 114, 180));    /* Chrome 10-25, Safari 5.1-6 */    background: linear-gradient(to right, rgb(82, 82, 82), rgb(61, 114, 180));    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */    height: 30px;    margin-left: 10px;    text-decoration: none;    color: #fff;    line-height: 30px;    border-radius: 4px;    margin-top: 10px;    font-size: 14px;}#mian_left a:hover {    color: #171717;    font-weight: bold;}#mian_right {    height: 370px;    width: 810px;    background-color: #171717;    display: inline-block;    border-radius: 4px;    overflow: hidden;}#bg2 {    margin-top: 10px;    width: 160px;    margin-left: 10px;    height: 210px;    background-color: #171717;    border-radius: 4px;    overflow: hidden;}* {    margin: 0;    padding: 0;}.content {    width: 810px;    height: 370px;    position: relative;    overflow: hidden;    margin: 0 auto;}.wrapper {    width: 400%;    height: 100%;    margin: 0;    padding: 0;    position: absolute;    top: 0;    left: 0;    display: flex;    transition: none;}.wrapper li {    flex: 1;    list-style: none;    margin: 0;    padding: 0;}.wrapper li img {    width: 810px;    height: 370px;}.radius {    height: 12px;    margin: 0;    padding: 0;    position: absolute;    bottom: 10px;    left: 10px;    display: flex;    align-items: center;}.radius li {    width: 8px;    height: 8px;    border-radius: 50%;    background-color: white;    opacity: 0.6;    margin: 0 3px;    padding: 0;    list-style: none;}.radius-active {    opacity: 1 !important;    border: 2px solid rgb(255, 255, 255, 0.5);    background-clip: padding-box;}.prev {    width: 23px;    line-height: 34px;    text-align: center;    position: absolute;    left: 0;    top: 50%;    margin-top: -17px;    background-color: darkgray;    opacity: 0;}.next {    width: 23px;    line-height: 34px;    text-align: center;    position: absolute;    right: 0;    top: 50%;    margin-top: -17px;    background-color: darkgray;    opacity: 0;}.prev span,.next span {    font-weight: bold;    color: white;    font-size: 18px;}#bg2 img {    width: 160px;}#main2 {    padding-top: 30px;    padding-bottom: 30px;    font-size: 0px;    width: 1000px;    background-color: #fff;    margin-top: 10px;    display: flex;}#tupian {    display: inline-block;    text-align: center;    margin-left: 24px;    line-height: 30px;}#tupian img {    height: 200px;    border-radius: 4px;}.title {    display: inline-block;    font-size: 24px !important;    width: 24px;    margin-left: 30px;    font-weight: bold;    color: #3F6EA9;    line-height: 50px;    margin-right: 40px;}#main2 p {    font-size: 16px;}#main3 {    position: relative;    width: 1000px;    height: 170px;    padding-top: 30px;    padding-bottom: 30px;    background-color: #F1F1F1;    margin-top: 10px;    margin-bottom: 20px;}#main3 p {    font-size: 14px;    line-height: 35px;    margin-left: 30px;}#main3 p:last-child {    position: absolute;    right: 30px;    top: 30px;    width: 500px;}#main3 span {    font-weight: bold;}footer {    width: 1000px;    text-align: center;    line-height: 60px;    background: #525252;    /* fallback for old browsers */    background: -webkit-linear-gradient(to right, rgb(82, 82, 82), rgb(61, 114, 180));    /* Chrome 10-25, Safari 5.1-6 */    background: linear-gradient(to right, rgb(82, 82, 82), rgb(61, 114, 180));    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */    color: #fff;    font-size: 14px;}#main4 {    width: 1000px;    margin-top: 10px;    margin-bottom: 20px;    padding-top: 30px;    padding-bottom: 30px;    background-color: #F1F1F1;}#main4 p {    width: 980px;    margin-left: 10px;    text-indent: 28px;    font-size: 16px;    line-height: 30px;}#main4 span {    font-size: 30px;    font-weight: bold;}#main5 {    width: 1000px;    margin-top: 10px;    margin-bottom: 20px;    padding-top: 30px;    padding-bottom: 30px;    line-height: 50px;    background-color: #F1F1F1;}#main5 h3 {    text-align: center;}#main5 div {    margin: 0 auto;    width: 300px;}#main5 span {    display: inline-block;    width: 70px;}button {    width: 100px;    height: 30px;    margin-left: 80px;}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
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

企业网站定制开发HTML学生个人网站作业设计：个人主页博客web网页设计制作 (HTML+CSS)

📂文章目录