授予渔，从0开始搭建一个自己想要的网页

在这里插入图片描述

文章目录

视频展示：
张娜英网页

作者简介：大家好我是
??个人主页：的CSDN博客
??系列专栏：【前端】

视频展示：

张娜英

张娜英网页

一.开始阶段

1.1考虑出基本的架构

在这里我推荐一款工具，（亿图图示）用于抽象出基本的样式图。
接下来就是要去思考网页需要哪些部分。得出一个基本的框架样式
下面就是我大概的网页元素组成图

组件图

1.2填充思路

就上面的图形我进行一些解释.
1.第一部分就是导航栏的位置，左边是标志，中间是导航div ，
右边有两个一个用于点击出现搜索栏，一个用于点击切换全局
设置的变量
2.第二部分就是几个视频，以及一个div中有几个控制切换视频的DOM结构
3.第三部分，左边是一个图片旋转正方体，左边是文字打字机效果
4.第四部分，六张图片，点击时出现文字显现
5.第五部分，放置九个视频，利用swiper实现轮播图效果
6.就是一些简单的布局。

1.3前提准备

1.学会swiper的基本使用。
2.打开颜色调制网站进行你想要的颜色设置。
3.思考需要将哪些样式设置为全局变量比如（- -background:red）
在后面设置样式时使用var（- -background:red）便可。从而是后续
切换样式值变得简单
4.学会怎么使用iconfont的使用

二.实现阶段

2.1导航栏实现

按照图形设计进行实现。

在进行过CSS样式设置时

然后就是要实现右边图标的点击事件处理了。具体的可以看我发的资源。

2.2点击切换视频

.f放置六个视频，一个控制div，点击每一个span切换视频。

然后进行CSS样式设置。实现效果就是
切换视频

然后在这里有一个有用的技巧。
就是在div结构中设置data-set="XXX"后续在js中使用dataset用于获得他的值
然后通过得到video的src，与设置的data-set的值，
使用video.src=spans[i].dataset.src实现切换视频

2.3 左右特效

右边是实现文字打字效果，左边是旋转照片墙。
照片墙：6张图片position定位，利用transform实现位置偏移。在添加动画效果。
文字效果：就是两个div一个div存储文字，一个用于接收文字。采用定时器实现
打字效果

通过CSS样式的实现就是下面的效果
在这里插入图片描述

2.4照片墙

放置六个div，每个div有文字部分，以及图片部分。
开始时让文字部分top值为top：-100%；移动到
图片时文字top：0；然后就实现想要的效果了。

 
        
            
            
                张娜英
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!
                watch more
            
        
        
            
            
                张娜英
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!
                watch more
            
        
        
            
            
                张娜英
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!
                watch more
            
        
        
            
            
                张娜英
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!
                watch more
            
        
        
            
            
                张娜英
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!
                watch more
            
        
        
            
            
                张娜英
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!
                watch more
            
        
        
        
    
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

通过css样式设置就是下面的效果了。
在这里插入图片描述

2.5视频轮播

这个也没啥。通过swipre实现。就是引入css样式文件，以及js文件。
然后设置好div结构。书写js部分。

通过CSS以及JS设置后就是下面的效果了。
在这里插入图片描述
在这里我添加了一些效果，就是单机播放，双击暂停
js：

  for(let i=0;i{
        lbtVideo[i].play()
    })
  }
  for(let i=0;i{
        lbtVideo[i].pause()
    })
  }
1
2
3
4
5
6
7
8
9
10

2.6底部



        

            
                about us
                Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Assumenda quas magni
                    pariatur est accusantium voluptas enim nemo
                    facilis sit debitis.
            
            
                branch locations
                india
                USA
                japan
                france
            
            
                quick links
                home
                book
                packages
                services
                gallery
                review
                contact
            
            
                follow us
                facebook
                instagram
                twitter
                linkedin
            

        

         created by  mr.ztl.com  | all rights reserved! 

    
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

通过CSS设置后：
在这里插入图片描述

2.7点击切换全局变量

在之前我们设置全局变量，我们可是新设置一个css样式，我们绑定
对应的div。实现body的css样式覆盖。

之前的全局变量：

:root{
    --background:#255a4a;
    --hover:#2a917d;
    --nav-a:1.3rem;
    --nav-a-color:#fff;
    --nav-ul-li:55px;
    --nav-middle-left:450px;
    --txt-h2:30px;
    --txt-h2-color:rgb(150, 36, 16);
    --p:20px;
    --box-su:rgb(41, 31, 31);
    --box-su-border:rgba(255, 255, 255, 0.685);
    --login-bac:#333;
    --fo0ter:#333;
    --main-color:#fff;
    --su-color:#fff
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

之后的变量：

:root{
    --background:#255a4a;
    --hover:#2a917d;
    --nav-a:1.3rem;
    --nav-a-color:#fff;
    --nav-ul-li:55px;
    --nav-middle-left:450px;
    --txt-h2:30px;
    --txt-h2-color:rgb(150, 36, 16);
    --p:20px;
    --box-su:rgb(41, 31, 31);
    --box-su-border:rgba(255, 255, 255, 0.685);
    --login-bac:#333;
    --fo0ter:#333;
    --main-color:#fff;
    --su-color:#fff
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

js：

const changeColor=document.querySelector("#login-btn")

changeColor.addEventListener('click',()=>{
    document.body.classList.add('rootActive')
})

changeColor.addEventListener('dblclick',()=>{
    document.body.classList.remove('rootActive')
})
1
2
3
4
5
6
7
8
9

就是实现了。

3.总结

全部代码：

HTML:


    
        
            
            
            
            
            
        
        
    
    
        
            
            
            
            
            
            
        
        
            
                张娜英
                南韩人人称
                南韩魅魔
                自称没有女粉丝
                只有男粉丝
                依靠其独居
                可爱诱惑魅力
                于一体给人以
                心灵一颤
                不由的眼冒爱心
                若娶娜英此生
                不负人间来一次
            
             
        
    
    
        
            
            
                张娜英
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!
                watch more
            
        
        
            
            
                张娜英
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!
                watch more
            
        
        
            
            
                张娜英
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!
                watch more
            
        
        
            
            
                张娜英
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!
                watch more
            
        
        
            
            
                张娜英
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!
                watch more
            
        
        
            
            
                张娜英
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!
                watch more
            
        
        
        
    
    
        
            
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
                
                    
                
            
            
        
    
    

        

            
                about us
                Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Assumenda quas magni
                    pariatur est accusantium voluptas enim nemo
                    facilis sit debitis.
            
            
                branch locations
                india
                USA
                japan
                france
            
            
                quick links
                home
                book
                packages
                services
                gallery
                review
                contact
            
            
                follow us
                facebook
                instagram
                twitter
                linkedin
            

        

         created by  mr.ztl.com  | all rights reserved!

CSS:
index.css

*{
    padding:0;
    margin:0;
    box-sizing: content-box;
    transition: 0.25s;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}

:root{
    --background:#255a4a;
    --hover:#2a917d;
    --nav-a:1.3rem;
    --nav-a-color:#fff;
    --nav-ul-li:55px;
    --nav-middle-left:450px;
    --txt-h2:30px;
    --txt-h2-color:rgb(150, 36, 16);
    --p:20px;
    --box-su:rgb(41, 31, 31);
    --box-su-border:rgba(255, 255, 255, 0.685);
    --login-bac:#333;
    --fo0ter:#333;
    --main-color:#fff;
    --su-color:#fff
}
:root{
    --background:#255a4a;
    --hover:#2a917d;
    --nav-a:1.3rem;
    --nav-a-color:#fff;
    --nav-ul-li:55px;
    --nav-middle-left:450px;
    --txt-h2:30px;
    --txt-h2-color:rgb(150, 36, 16);
    --p:20px;
    --box-su:rgb(41, 31, 31);
    --box-su-border:rgba(255, 255, 255, 0.685);
    --login-bac:#333;
    --fo0ter:#333;
    --main-color:#fff;
    --su-color:#fff
}
.nav{
    position:fixed;
    width:100%;
    height:90px;
    background-color: var(--background);
    display:flex;
    text-align: center;
    line-height: 90px;
    z-index:100;
    border-bottom:2px solid rgba(36, 32, 32, 0.822);
}
.nav-left{
    float:left;
    font-size: 30px;
    color:rgba(255, 255, 255, 0.795);
    margin-left:var(--nav-ul-li);
}
.nav-left span{
    margin-right:3px;
    color:rgba(201, 231, 27, 0.733)
}
.nav-middle{
  margin-left:var(--nav-middle-left);
}
.nav-middle ul li{
    float:left;
    margin-right:50px;
    font-size:var(--nav-a);
    
}
.nav-middle ul li a{
    color:var(--nav-a-color)
}
.nav-middle ul li a:hover{
    color:var(--hover)
}
.nav .icons{
    font-size: 1.8rem;
   margin-left:450px;
   color:#fff;
}
.nav .icons i:hover{
    color: var(--hover);
}
#login-btn{
    margin-left:50px;
}
.su{  
    position:absolute;
    top:100%;
    right:0;
    left:0;
    width:100%;
    height:90px;
    border-bottom: 2px solid var(--background);
    display: flex;
    flex-direction: row;
    text-align: center;
    font-size: 1.8rem;
   background-color: var(--box-su);
   color: #fff;
   display:none;
}
.su .box-su{
    width:90%;
    height:80%;
    border-radius: 5px;
    border:1px solid var(--box-su-border);
    margin:10px 0 0 50px;
}
.su .fa-search{
    position:absolute;
    top:30px;
    right:50px;
}
.su .fa-search:hover{
  color: var(--hover);
}

#video{
    width:100%;
    height:100vh;
    text-align: center;
}
.controls{
    position:absolute;
    bottom:200px;
    left:750px;
    width:400px;
    height:60px;
    border-radius:20px;
    border: 2px solid rgb(21, 255, 0);
    z-index:4;
    display:flex;
    justify-content: center;
    text-align: center;
}
.controls span{
    float:left;
    margin-right:30px;
    margin-top:7px;
    width:40px;
    height:40px;
    border-radius: 50%;
    border:1px solid #fff;
}
.controls span:first-child{
    margin-left:20px;
}
.active{
    background-color: #15bd9b;
}


video{
    position:absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    object-fit: cover;
    height:100vh;
}
#introduce{
   position:relative;
    width:100%;
    height:100vh;
    background-color: var(--background);
}
.rotateImg{
    position:absolute;
    top:350px;
    left:300px;
    width:200px;
    height:200px;
     transform-style: preserve-3d;
    transform: rotateX(45deg) rotateY(45deg);
    animation: rotate1 8s infinite linear;
}
@keyframes rotate1{
    for{
        transform: rotateX(0deg) rotateY(0deg)
    }
    to{
        transform: rotateX(360deg) rotateY(360deg)
    }
}
html{
    perspective: 10000;
}
.rotateImg img{
    width:200px;
    height:200px;
    position:absolute;
    opacity: 0.7;
}
.box1{
    transform: rotateX(90deg) translateZ(0)  translateY(-100px);
}

.box2{
    transform: rotateX(-90deg) translateZ(200px) translateY(-100px);
}

.box3{
    transform: rotateY(90deg)  translateZ(100px);
}

.box4{
    transform: rotateY(-90deg)  translateZ(100px);
}

.box5{
    transform: rotateY(0deg)  translateZ(100px);
}

.box6{
    transform: rotateY(180deg)  translateZ(100px);
}
.textShow{
    position:absolute;
    top:200px;
    right:600px;
    width:400px;
    height:300px;
    text-align: center;
}
.text{
display: none;
}
.main{
    font-size: 30px;
    color:#fff;
}
#node{
    width:100%;
    height: 100vh;
     display:grid ;
     grid-template-rows: repeat(2,1fr);
     grid-template-columns: repeat(3,1fr);
    background-color: var(--background);
}
.box{ 
    width:300px;
    overflow: hidden;
    box-shadow:0 0.5rem 1rem rgba(0,0,0,.1); 
    border:1rem solid #fff;
    border-radius: .5rem;
    height:20rem;
    position:relative;
}
 .active{
    margin-left:200px;
}
.active1{
    margin-left:100px;
}
.box-text{
    position:absolute;
    width:300px;
    height:100%;
    position:absolute;
    top:-100%;left:0;
    height:100%;
    width:100%;
    text-align: center;
    background: rgba(0,0,0,.7);
    color:#fff;
}
.box-text h1{
    margin:20px 0 40px 0;
}
.box-text p{
    font-size: 20px;
}
 .box img{
    width:100%;
    height:100%;
    object-fit: cover;
}
.box:hover .box-text{
    top:0
}
.box-text .btn{
    position:absolute;
    bottom:80px;
    right:80px;
    border:2px solid greenyellow;
    padding:10px;
    font-size: 20px;
    border-radius: 5px;
}
.footer{
    background:var(--fo0ter);
  }
  
.footer .box-container{
    display: grid;
    gap:1.5rem;
    grid-template-columns: repeat(4,1fr);
  }
  
.footer .box-container .box{
    padding:0.9rem 0;
    margin-left:100px;
    border:none;
  }
  
.footer .box-container .box h3{
    font-size: 1.5rem;
    padding:.7rem 0;
    color:#fff;
  }
 
.footer .box-container .box p{
    font-size: 1rem;
    padding:.7rem 0;
    color:#eee;
  }
  
  .footer .box-container .box a{
    display: block;
    font-size: 1rem;
    padding:.7rem 0;
    color:#eee;
  }
  
  .footer .box-container .box a:hover{
    color:var(--hover);
    text-decoration: underline;
  }
  
  .footer .credit{
    text-align: center;
    padding:2rem 1rem;
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: normal;
    color:#fff;
    border-top: .1rem solid rgba(255,255,255,.2);
  }
  
  .footer .credit span{
    color:orange;
  }

#lbtv{
    width:100%;
    height:70vh;
    background-color: var(--background);
}
  html,
  body {
    position: relative;
    height: 100%;
  }

  body {
    background: #eee;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
  }

  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .swiper-slide video{
    object-fit: cover;
  }
  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
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
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406

iconfont.css

@font-face {
  font-family: "iconfont"; /* Project id 3229511 */
  src: url('//at.alicdn.com/t/font_3229511_km6tmiowmej.woff2?t=1647130450920') format('woff2'),
       url('//at.alicdn.com/t/font_3229511_km6tmiowmej.woff?t=1647130450920') format('woff'),
       url('//at.alicdn.com/t/font_3229511_km6tmiowmej.ttf?t=1647130450920') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-zhuye:before {
  content: "e633";
}

.icon-chahao:before {
  content: "e607";
}

.icon-denglu:before {
  content: "e604";
}

.icon-sousuo:before {
  content: "e60a";
}
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

JS：

const spans=document.querySelectorAll('.change')
const video=document.querySelector('.video')
const search=document.querySelector('.fa-search')
const su=document.querySelector('.su')
const lbtVideo=document.querySelectorAll('.swiper-slide video')
const text=document.querySelector('.text')
const main=document.querySelector('.main')

var x=0
var len=text.innerHTML

const changeColor=document.querySelector("#login-btn")

changeColor.addEventListener('click',()=>{
    document.body.classList.add('rootActive')
})

changeColor.addEventListener('dblclick',()=>{
    document.body.classList.remove('rootActive')
})

for(let i=0;i{
        document.querySelector('.change.active').classList.remove('active')
        spans[i].classList.toggle('active')
       
       video.src=spans[i].dataset.src
       video.play() 
    })
}
anima()
function anima(){
    main.innerHTML=len.substring(0,x++)+'|'
    if(x<=len.length){
        var v=Math.round(Math.random()*200)
        setTimeout(anima,v)
    }
}

search.addEventListener('click',()=>{
    su.style.display="block"    
})
window.addEventListener('scroll',()=>{
    su.style.display="none"
})

var swiper = new Swiper(".mySwiper", {
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
  });
  
  for(let i=0;i{
        lbtVideo[i].play()
    })
  }
  for(let i=0;i{
        lbtVideo[i].pause()
    })
  }
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

1.学会了全局思想。
2，学会了怎么使用swiper以及怎么调色
3.学会了一些简单的特效例子

好了这次的文章就到这了
如果觉得还不错的话，帮忙点个关注吧
希望能给博主点赞哎??，评论??，收藏??三连一波加粗样式

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦

相关阅读:
深度神经网络之BiseNet
Java------Stream流式编程常用API【.stream，filter()，map()】（三）
MySQL性能调优，这个工具最有用（中）
进程概念（跑路人笔记）
Biotin hydrazide HCl|CAS:66640-86-6|生物素-酰肼盐酸盐
【软件测试】一线大厂的测试开发基本技能，我不再想庸庸碌碌......
让环境自己说话，论环境自描述的重要性
Node.js | 你不知道的 express 路由使用技巧
future其他成员函数、shared_future、atomic
C++线程操作

原文地址：https://blog.csdn.net/m0_67401545/article/details/126081308