网络知识 娱乐 授予渔，从0开始搭建一个自己想要的网页

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

发布: 2023年2月14日 10:17:50

在这里插入图片描述

文章目录

  • 视频展示：
  • 张娜英网页
    • 一.开始阶段
      • 1.1考虑出基本的架构
      • 1.2填充思路
      • 1.3前提准备
    • 二.实现阶段
      • 2.1导航栏实现
      • 2.2点击切换视频
      • 2.3 左右特效
      • 2.4照片墙
      • 2.5视频轮播
      • 2.6底部
      • 2.7点击切换全局变量
    • 3.总结
      • 全部代码：

☀️作者简介：大家好我是言不及行yyds
🐋个人主页：言不及行yyds的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导航栏实现

按照图形设计进行实现。

<div class="nav">
        <div class="nav-left"><span>S</span>how</div>
        <div class="nav-middle">
            <ul>
                <li><a href="#video">video</li>
                <li><a href="#introduce">introduce</li>
                <li><a href="#node">node</li>
                <li><a href="#lbtv">lbtv</li>
                <li><a href="#footer">footer</li>
            </ul>
        </div>
        <div class="icons">
            <i class="fas fa-search" id="search-btn"></i>
            <i class="fas fa-user" id="login-btn"></i>
        </div>
        <div class="su">
            <div class="box-su"></div>
            <i class="fas fa-search"></i>
        </div>
    </div>

在进行过CSS样式设置时
在这里插入图片描述
然后就是要实现右边图标的点击事件处理了。具体的可以看我发的资源。

2.2点击切换视频

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


<div id="video">
        <div class="controls">
            <span class="change active" data-src="./static/1.mp4"></span>
            <span class="change " data-src="./static/2.mp4"></span>
            <span class="change " data-src="./static/3.mp4"></span>
            <span class="change " data-src="./static/4.mp4"></span>
            <span class="change " data-src="./static/5.mp4"></span>
        </div>
        <video src="./static/1.mp4" class="video"></video>
    </div>

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

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

2.3 左右特效

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

 <div id="introduce">
        <div class="rotateImg">
            <div class="box1"><img src="./static/1.webp"></div>
            <div class="box2"><img src="./static/2.webp"></div>
            <div class="box3"><img src="./static/6.webp"></div>
            <div class="box4"><img src="./static/4.webp"></div>
            <div class="box5"><img src="./static/5.webp"></div>
            <div class="box6"><img src="./static/6.webp"></div>
        </div>
        <div class="textShow">
            <div class="text">
                张娜英
                南韩人人称
                南韩魅魔
                自称没有女粉丝
                只有男粉丝
                依靠其独居
                可爱诱惑魅力
                于一体给人以
                心灵一颤
                不由的眼冒爱心
                若娶娜英此生
                不负人间来一次
            </div>
            <pre class="main"> </pre>
        </div>

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

2.4照片墙

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

 <div id="node">
        <div class="box active">
            <img src="./static/641.webp" alt="">
            <div class="box-text">
                <h1>张娜英</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!</p>
                <div class="btn">watch more</div>
            </div>
        </div>
        <div class="box active1">
            <img src="./static/642.webp" alt="">
            <div class="box-text">
                <h1>张娜英</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!</p>
                <div class="btn">watch more</div>
            </div>
        </div>
        <div class="box ">
            <img src="./static/643.webp" alt="">
            <div class="box-text">
                <h1>张娜英</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!</p>
                <div class="btn">watch more</div>
            </div>
        </div>
        <div class="box active">
            <img src="./static/641.webp" alt="">
            <div class="box-text">
                <h1>张娜英</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!</p>
                <div class="btn">watch more</div>
            </div>
        </div>
        <div class="box active1">
            <img src="./static/644.webp" alt="">
            <div class="box-text">
                <h1>张娜英</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!</p>
                <div class="btn">watch more</div>
            </div>
        </div>
        <div class="box">
            <img src="./static/645.jpg" alt="">
            <div class="box-text">
                <h1>张娜英</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, wonam!</p>
                <div class="btn">watch more</div>
            </div>
        </div>
        <div>
        </div>
    </div>

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

2.5视频轮播

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

<div id="lbtv">
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <video src="./static/lbt-1.mp4"></video>
                </div>
                <div class="swiper-slide">
                    <video src="./static/lbt-2.mp4"></video>
                </div>
                <div class="swiper-slide">
                    <video src="./static/lbt-3.mp4"></video>
                </div>
                <div class="swiper-slide">
                    <video src="./static/lbt-4.mp4"></video>
                </div>
                <div class="swiper-slide">
                    <video src="./static/lbt-5.mp4"></video>
                </div>
                <div class="swiper-slide">
                    <video src="./static/lbt-6.mp4"></video>
                </div>
                <div class="swiper-slide">
                    <video src="./static/lbt-4.mp4"></video>
                </div>
                <div class="swiper-slide">
                    <video src="./static/lbt-2.mp4"></video>
                </div>
                <div class="swiper-slide">
                    <video src="./static/lbt-1.mp4"></video>
                </div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>

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

  for(let i=0;i<lbtVideo.length;i++){
    lbtVideo[i].addEventListener('click',()=>{
        lbtVideo[i].play()
    })
  }
  for(let i=0;i<lbtVideo.length;i++){
    lbtVideo[i].addEventListener('dblclick',()=>{
        lbtVideo[i].pause()
    })
  }

2.6底部

<div class="footer">

        <div class="box-container">

            <div class="box boxactive">
                <h3>about us</h3>
                <p>Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Assumenda quas magni
                    pariatur est accusantium voluptas enim nemo
                    facilis sit debitis.</p>
            </div>
            <div class="box">
                <h3>branch locations</h3>
                <a href="#">india</a>
                <a href="#">USA</a>
                <a href="#">japan</a>
                <a href="#">france</a>
            </div>
            <div class="box">
                <h3>quick links</h3>
                <a href="#">home</a>
                <a href="#">book

相关文章