资讯详情

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

在这里插入图片描述

文章目录

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

??作者简介:大家好，我言行不及。yyds ??个人主页：言不及行yyds的CSDN博客 ??系列栏目：前端

视频展示：

张娜英

张娜英网页

一.开始阶段

1.考虑基本架构

我在这里推荐一个工具，）用于抽象基本样式图。 下一步是思考网页需要哪些部分。得到一个基本的框架风格 下面就是我大概的网页元素组成图

1.2填充思路

我会对上图做一些解释. 1.第一部分就是导航栏的位置，左边是标志，中间是导航div ， 右边有两个用于点击搜索栏，一个用于点击切换全局 设置的变量 2.第二部分是几个视频和一个div有几个控制视频切换的视频DOM结构 3.第三部分，左边是旋转正方体的图片，左边是文字打字机效果 4.第四部分，六张图片，文字出现在点击时 5.第五部分放9个视频，用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> 

        标签： 2a振动变送器psxzd
 
锐单商城拥有海量元器件数据手册、
          IC替代型号，打造
          电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台