Kilikili首页布局设计(仿照Bilibili)前部分

前言：模仿Bilibili的首页样式自己设计一个网页布局拥有动态配合，需要CSS+HTML+JS，用到serilize插件和bootstrap插件，用户的信息暂时存放在本地存储.这次没有用到接口，将会在后部分中使用。使用接口编写一个天气预报。注意有主页面登录页面还有注册页面三个页面

引入两个插件和axios库

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"> //用于制作弹出框
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>  //为后面调接口做准备
https://www.npmjs.com/package/form-serialize //收集表单数据

一、整体布局分析

1、分为三部分head，channel和body

2、head一个版心，lchannel和body一个版心

总结：先整体再局部，从上到下，从左到右

二、具体代码

1、head设计

思路：分为三个部分，左边首页到下载客户端，中间搜索框，右边用户头像到投稿。并且加上背景图片

1.1 html设计

<div class="head">
    <!-- head背景图片 -->
    <div class="headbgi">
        <div class="wrapper">
            <!-- logo -->
            <div class="logo"><h1><a href="https://www.bilibili.com/?spm_id_from=333.1007.0.0" class="iconfont icon-bilibili"></a></h1></div>
            <!-- 左边小导航 -->
            <div class="headleft">
                <ul>
                    <li><a href="https://www.bilibili.com/?spm_id_from=333.1007.0.0" class="firsttu" target="_blank"><span class="iconfont icon-bilibili-line"></span><p class="firstzi">首页</p></a></li>
                    <li><a href="#"><p>番剧</p></a></li>
                    <li><a href="#"><p>直播</p></a></li>
                    <li><a href="#"><p>游戏中心</p></a></li>
                    <li><a href="#"><p>会员购</p></a></li>
                    <li><a href="#"><p>漫画</p></a></li>
                    <li><a href="#"><p>赛事</p></a></li>
                    <li><a href="#"><p>畅玩S13</p></a></li>
                    <li><a href="#" class="lasttu"><span class="iconfont icon-bottom"></span><p class="downzi">下载客户端</p></a></li>
                </ul>
            </div>
            <!-- 搜索框 -->
            <div class="headmid">
                <input type="text" placeholder="Clannad">
                <span class="iconfont icon-suosou"></span>
            </div>
            <!-- 右边用户功能 -->
            <div class="headright">
                <ul>
                    <div class="header-login-entry"><span> 登录 </span></div>
                    <li><a href="#"><span class="iconfont icon-wodedahuiyuan"></span><p class="firstzi">大会员</p></a></li>
                    <li><a href="#"><span class="iconfont icon-xinxi"></span><p class="firstzi">消息</p></a></li>
                    <li><a href="#"><span class="iconfont icon-dongtai"></span><p class="firstzi">动态</p></a></li>
                    <li><a href="#"><span class="iconfont icon-shoucang"></span><p class="firstzi">收藏</p></a></li>
                    <li><a href="#"><span class="iconfont icon-lishijilu"></span><p class="firstzi">历史</p></a></li>
                    <li><a href="#"><span class="iconfont icon-chuangzuozhongxin"></span><p class="firstzi">创作中心</p></a></li>
                    <li><a href="#" class="tougao"><span class="iconfont icon-shangchuan"></span><p class="firstzi">投稿</p></a></li>
                </ul>
            </div>
        </div>
    </div>
  </div>

1.2 CSS设计

/* 头部的wrapper */
.head .wrapper {
    
    /* width: 100%; */
    margin: 0 auto;
    width: 1440px;
    padding: 0 24px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    /* background-color: blueviolet; */
    padding-top: 12px;
    position: relative;
}

/* .主要内容的wrapper */
.wrapper {
    padding: 0 60px;
    width: 1440px;
}


/* 头部的背景图片 */
.head .headbgi {
    position: relative;
    width: 100%;
    height: 155px;
    background-color: black;
    /* margin-top: -20px; */
    background-image: url(../images/headbgi2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    min-width: 1456px;
}

/* logo部分 */
.head .logo {
    width: 78px;
    height: 162px;
    position: absolute;
    float: left;
    top: 80px;
    left: 90px;
}

.head .logo a {
    position: absolute;
    display: block;
    width: 110px;
    height: 45px;
    /* background-image: url(../images/-56879509f84f10da.gif); */
    /* background-color: #fff; */
    /* font-size: 0; */
    background-size: contain;
    background-repeat: no-repeat;
    /* background-color: #fff; */
    
}

.head .logo  .iconfont {
    color: #fff;
    /* font-size: large; */
    /* width: 100%;
    height: 100%; */
    font-size: 50px;
}


/* 左边的部分 */
.head .headleft ul {
    display: flex;
    margin-right: 24px;
}

.head .wrapper .headleft li {
    margin-right: 15px;
}

/* head的所有字 */
.head .wrapper li p {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

/* head左边第一个图标 */
.head .wrapper .firsttu {
    display: flex;
    /* justify-content: center; */
}

.head .wrapper .headleft .firsttu span {
    margin-right: 3px;
    /* align-items: center; */
    margin-bottom: 1px;
    font-size: 20px;
}

/* head的左边的最后一个图标 */
.head .wrapper .headleft .lasttu {
    display: flex;
    /* justify-content: center; */
}

.head .wrapper .lasttu span {
    margin-right: 3px;
    /* align-items: center; */
    margin-top: 1px;
    font-size: 18px;
}


/* 中间的部分 */
.head .headmid {
    position: relative;
    display: flex;
    margin-right: 15px;
    width: 300px;
    height: 35px;
    border-right: none;
}

/* 头部输入框 */
.head .headmid input {
    /* border-radius: 30px; */
    width: 0;
    flex: 1;
    outline: none;
    border-right: none;
    border-bottom: none;
}


/* 头部输入框搜索图标 */
.head .headmid .iconfont {
    font-size: 26px;
    color: black;
    margin-top: 5px;
    position: absolute;
    /* float: right; */
    right: 10px;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 1s;
    border-radius: 20%;
}

.head .headmid .iconfont:hover {
    background-color: #f3e9eb;
}


.head .headmid input::placeholder {
    padding-left: 5px;
}

/* 右边的部分 */
.head .headright ul {
    display: flex;
    align-items: center;
}

.head .wrapper .headright li {
    margin-right: 20px;
}

/* 设置右边的图标和字都是垂直居中对齐一个在上一个在下 */
.head .wrapper  .headright  li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* 设置所有head的所有图标的大小颜色和粗细 */
.head .wrapper a span {
    /* line-height: 10px; */
    /* margin-right: 3px; */
    /* align-items: center; */
    /* margin-top: 1px; */
    font-size: 18px;
    color: #fff;
    font-weight: 700;
}

/* 用户图像设置 */
.header-login-entry {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    background: #00AEEC;
    text-align: center;
    letter-spacing: 0;
    font-size: 14px;
    line-height: 36px;
    margin-right: 10px;
    cursor: pointer;
}

.header-login-entry img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    cursor: pointer;
    border: #fff 2px solid;
}

.head .headright .user-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid white;
}

/* 给最后一个在改成inherit继承父级元素a的flex，变成水平 */
.head .wrapper .headright .tougao {
    /* display: flex; */
    flex-direction:inherit;
    width: 88px;
    height: 35px;
    background-color: #fb7299;
    border-radius: 8px;
}

.head .wrapper .headright .tougao span {
    margin-right: 5px;
    font-size: 15px;
}

1.3 JS设计

document.querySelector('.header-login-entry').addEventListener('click', e => {
    // console.log(123)
    location.href = './login.html'
})
// 登录成功后登录按钮消失变成用户随机头像
const uname = localStorage.getItem('uname')
const pwd = localStorage.getItem('pwd')
// console.log(uname,pwd)
if (uname && pwd ) {
    // console.log(123)
    document.querySelector('.header-login-entry').innerHTML = `<img src="./images/userimg.jpg" alt="">`
} else (
    document.querySelector('.header-login-entry').innerHTML = `<span> 登录 </span>`

)

1.4 遇到的问题总结

1.4.1 问题1

图标和字要垂直居中对齐,而且图标要调整垂直距离

解决方法:给图标和字外面再套一个盒子,盒子flex弹性盒子并且改变主轴方向,水平居中,垂直居中,图标设置line-height行高调整

1.4.2 问题2

设置head的上边距的时候出现背景图也移动了，这是因为子标签会跟父标签的边框会重合

解决方法：给父级加上边的内边距1px;给父级添加overflow：hidden;为父元素或者子元素声明绝对定位；或者给子标签加内边距

1.4.3 问题3

给投稿项设置样式的时候需要再设置图标在左，字在右边

解决方法：给图标元素添加flex-direction:inherit;继承a的位置元素flex

1.4.4 问题4

设置背景图片后浏览器缩小后背景图片没显示全部

解决方法：在设置背景图片的选择器里面再加上min-width：你的浏览器的最宽宽度;

2、channel设计

思路：一个大盒子，里面放三个小盒子，采用ul嵌套li的方式布局，记得弹性盒子,还用gird网格布局

1.1 html设计

  <!-- 频道区域channel -->
  <div class="main">
    <div class="wrapper">
        <div class="channel">
            <div class="iconfontpic">
                <div class="iconfontleft">
                    <a href="#">
                        <img src="./images/userimg.jpg" alt="">
                    <span class="title">动态</span>
                    </a>
                </div>
                <div class="iconfontright">
                    <a href="#">
                        <div  class="iconfont icon-remen"></div>
                        <span class="title">热门</span>
                    </a>
                    
                </div>
            </div>
            <div class="channelleft"><ul>
                <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>
                <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>
                <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>
                <li><a href="#">更多 <div class="iconfont icon-xiangxiajiantou"></div></a></li>
            </ul></div>
            <div class="channelright">
                <ul>
                    <li><a href="#"><span class="iconfont icon-zhuanlan"></span><span>专栏</span></a></li>
                    <li><a href="#"><span class="iconfont icon-zhibo"></span><span>直播</span></a></li>
                    <li><a href="#"><span class="iconfont icon-huodong"></span><span>活动</span></a></li>
                    <li><a href="#"><span class="iconfont icon-ketang"></span><span>课堂</span></a></li>
                    <li><a href="#"><span class="iconfont icon-shequzhongxin"></span><span>社区中心</span></a></li>
                    <li><a href="#"><span class="iconfont icon-remen1"></span><span>新歌热榜</span></a></li>
                </ul>
            </div>
          </div>
    </div>
  </div>

1.2 CSS设计

/* channel部分 */
.channel {
    display: flex;
    /* margin-top: 1px; */
    height: 110px;
}

/* 最左边图标部分 */
.channel .iconfontpic {
    height: 72px;
    width: 140px;
    /* background-color: skyblue; */
    /* border: 1px solid black; */
    /* margin-right: 6px; */
    margin: 19px 6px 19px 0;
}

/* .中间频道 */
.channel .channelleft {
    width: 932px;
    height: 66px;
    /* background-color: yellow; */
    /* border: 1px solid black; */
    /* margin-right: 27px; */
    margin: 22px 27px 22px 0;
}

/* .右边的频到 */
.channel .channelright {
    width: 240px;
    height: 66px;
    /* background-color: red; */
    border-left: 1px solid #E3E5E7;
    margin: 22px 0 22px 0;

}

/* 最左边的 */
.channel .iconfontpic {
    display: flex;
}

.channel .iconfontpic span {
    font-size: 14px;
}

/* 左边设计 */
.channel .iconfontpic .iconfontleft {
    width: 46px;
    height: 72px;
    margin-right: 24px;
    text-align: center;
    cursor: pointer;
}

.channel .iconfontpic .iconfontleft img {
    width: 46px;
    height: 46px;
    border-radius: 50%;
}



/* 右边设计 */
.channel .iconfontpic .iconfontright {
    width: 46px;
    height: 72px;
    margin-right: 24px;
    text-align: center;
    cursor: pointer;
}

/* .channel .iconfontpic .iconfontright a { */
    /* cursor: pointer; */
    /* width: 46px;
    height: 71.1px; */
/* } */


.channel .iconfontpic .iconfontright .iconfont {
    width: 46px;
    height: 46px;
    margin-bottom: 4px;
    background-color: rgb(101, 125, 220);
    border-radius: 50%;
    line-height: 46px;
}

.channel .iconfontpic .iconfontright .iconfont {
    font-size: 20px;
    color: #fff;
}


/* 中间频道 */
.channel .channelleft  ul{
    display: grid;
    width: 100%;
    grid-auto-flow: column;
    grid-column: span 4;
    grid-gap: 10px;
    grid-template-rows: repeat(2,1fr);
    border-right: 1px solid var(--line_regular);
}

.channel .channelleft  ul li {
  
    width: 74px;
    height: 27.4px;
    text-align: center;
    line-height: 25px;
    background-color: #f6f7f8;
    border-radius: 15%;
    /* transition: background-color .3s,color .3s; */
    transition: all ;
}

.channel .channelleft  ul li:hover {
    background-color: rgba(192, 237, 237, 0.871);
}

/* 字体样式 */
.channel .channelleft  ul li a{
  font-weight: 400;
   font-size: 13.5px;
   color: #61666d;

}


/* 设置更多图标位置 */
.channel .channelleft  ul a:last-child {
    position: relative;
}

.channel .channelleft  ul .iconfont {
    position: absolute;
    left: 35px;
    top: 0px;
    font-size: 10px;
    font-weight: 700;
}

/* 右边的频道 */
.channelright ul {
    margin-left: 10px;
    grid-row-gap: 10px;
    grid-auto-flow: column;
    display: grid;
    grid-template-rows: repeat(2,1fr);
    /* width: 168px; */
    flex-shrink: 0;
    margin-top: 7px;
}

/* 字和图标样式 */
.channelright ul li span {
    font-size: 14.5px;
    margin-right: 4px;
}

1.3 JS设计

待定

1.4 遇到的问题总结

1.用ul嵌套li的方式布局，发现22个li怎么换行，一行11，B站用的是网格布局grid。学习一下grid

2.第一个可以设置cursor鼠标，但是第二个不行，明明是一样的样式

3、body设计

1.1 html设计

 <div class="mainvideo">
    <div class="wrapper">
        <div class="swiper">
            <div class="img">
                <a target="_blank" href="https://www.bilibili.com/bangumi/play/ss1539?spm_id_from=333.337.0.0"><img src="./images/lunbo1.png" alt=""></a>
            </div>
            <div class="foot">
                <div class="titleAndDot">
                    <p>我的青春物语果然有问题</p>
                    <div class="dot">
                        <div class="dotLeft"><button><</button></div>
                        <div class="dotRight"><button>></button></div>
                    </div>
                </div>
                    <ul>
                        <li class="active"></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
            </div>
        </div>
        <div class="topVideoRight">
            <ul>
                <!-- 这是放的就是map循环出来的视频数据 -->
            </ul>
        </div>
    </div>
 </div>

1.2 CSS设计

/* 主页视频部分 */

.mainvideo .wrapper{
    display: flex;
}

.mainvideo .swiper {
    width: 500px;
    height: 374px;
    /* background-color: yellow; */
    border-radius: 2%;
}

/* 轮播的图设置 */



.mainvideo .swiper .img {
    width: 500px;
    height: 281.76px;
    /* background-color: yellowgreen; */
    border-radius: 2% 2% 0 0;
}

.mainvideo .swiper .img img {
    width: 100%;
    height: 281.76px;
}

/* 底部介绍样式设置 */
.mainvideo .swiper .foot {
    width: 500px;
    height: 93.2px;
    /* background-color: rgb(139, 98, 66)' */
    background-color: rgb(139, 98, 66);

}

.mainvideo .swiper .foot .titleAndDot {
    /* display: fle; */
    width: 100%;
    height: 22.57px;
    display:inline-block;
    margin: 20px 20px 7px 10px;
    width:450px
}

.mainvideo .swiper .foot .titleAndDot p {
    font-size: 15px;
    color: #fff;
     float: left;
}

.mainvideo .swiper .foot .titleAndDot .dot {
    width: 45px;
    float: right;
    display: flex;
    justify-content: space-between;
    margin-right: 0px;
}

.mainvideo .swiper .foot .titleAndDot .dot button {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    
    cursor: pointer;
}

.mainvideo .swiper .foot ul {
    display: flex;
    margin: 0px 0px 7px 10px;
    align-items: center;
}

.mainvideo .swiper .foot ul li {
    height: 10px;
    width: 10px;
    background-color: black;
    margin-right: 14px;
    border-radius: 50%;
    cursor: pointer;
    line-height: 10px;
}

.mainvideo .swiper .foot ul li.active {
    height: 15px;
    width: 15px;
    background-color: #fff;
}




/* 右边部分 */
.mainvideo .topVideoRight ul {
    margin-left: 20px;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
    /* align-content: flex-start; */
}

.mainvideo .topVideoRight ul li {
    width: 248px;
    height: 214.5px;
    /* background-color: yellowgreen; */
    /* flex: 1; */ 
    margin-left: 10px;
    position: relative;
}

.mainvideo .topVideoRight ul li:nth-child(n+4) {
  margin-top: 10px;
}

.mainvideo .topVideoRight ul .img {
    display: block;
    width: 100%;
    height: 139.5px;
    margin-bottom: 10px;
    border-radius: 50%;
}

.mainvideo .topVideoRight ul li img {
    width: 100%;
    height: 100%;
    /* margin-bottom: 10px; */
}


/* 视频播放信息 */
.mainvideo .topVideoRight ul .videoDetal {
    display: flex;
    position: absolute;
    margin-left: 8px;
    /* background-color: white; */
    margin-bottom: 10px;
    font-size: 12px;
    top: 120px;
    color: #fff;
    /* height: 10px; */
}

.mainvideo .topVideoRight ul .videoDetal .data2 {
    /* display: block; */
    width: 35px;

}

.mainvideo .topVideoRight ul .videoDetal .icon-danmu {
    font-size: 11px; 
    /* margin-top: 2px; */
    margin: 1px 84px 0 15px;
}

.mainvideo .topVideoRight ul li:nth-child(1) .videoDetal .icon-danmu {
    margin: 1px 120px 0 15px;
    
}

.mainvideo .topVideoRight ul li:nth-child(3) .videoDetal .icon-danmu {
    margin: 1px 75px 0 15px;

}


/* UP信息 */
.mainvideo .topVideoRight ul li .anotherMessage {
    display: flex;
    font-size: 12px;
    margin-top: 2px;
    opacity: 0.7;
}

.mainvideo .topVideoRight ul li .anotherMessage .author {
    margin: 0 14px 0 8px;
}

1.3 JS设计

// 轮播图的
// 准备数据

const sliderData  = [
    { url: './images/lunbo1.png', title: '我的青春物语果然有问题', color: 'rgb(139, 98, 66)', videoSrc:'https://www.bilibili.com/bangumi/play/ss1539?spm_id_from=333.337.0.0'},
    { url: './images/lunbo2.png', title: 'ギルティ・サワ氏！犯泽先生', color: 'rgb(43, 35, 26)' ,videoSrc:'https://www.bilibili.com/bangumi/play/ss44903/'},
    { url: './images/lunbo3.png', title: '假面骑士极狐最终集！', color: 'rgb(245, 222, 179)' ,videoSrc:'https://www.bilibili.com/bangumi/play/ep736811?spm_id_from=333.337.0.0&from_spmid=666.25.episode.0'},
    { url: './images/lunbo4.png', title: '冬天到了，一起堆雪人吗', color:'rgb(0, 255, 255)' ,videoSrc:'https://www.bilibili.com/video/BV1RU4y1f7nt/?spm_id_from=333.337.search-card.all.click'},
    { url: './images/lunbo5.png', title: '拉过勾的事情就一定要做到！！！', color: 'rgb(67, 90, 92)',videoSrc:'https://www.bilibili.com/video/BV1w64y1Z7X7/?spm_id_from=333.337.search-card.all.click' },
    { url: './images/lunbo6.png', title: 'BiliBili夏日祭来咯！！！', color: '#aeccea',videoSrc:'https://www.bilibili.com/video/BV1D64y147ME/?spm_id_from=333.337.search-card.all.click&vd_source=1be1aa6d7dacbe358b482fe3b1c4c6dc' }
]
    // 先获取图片的元素
    const img = document.querySelector('.mainvideo .swiper .img img')
    // console.log(img.src)
    const videoSrc = document.querySelector('.mainvideo .swiper a')
    const title = document.querySelector('.mainvideo .swiper .foot .titleAndDot p')
    const foot = document.querySelector('.mainvideo .swiper .foot')
    const dotRight = document.querySelector('.dotRight button')
    const dotLeft = document.querySelector('.dotLeft button')
    const box = document.querySelector('.mainvideo .swiper')
    let liac = 0
    // console.log(liac)
    let li = 0
    

    // 设置间隔函数每两秒替换一次
    let i = 0
    let ti = setInterval(function() {
        i++
        if(i === sliderData.length) {
            i = 0
        }
        trans()
    }, 2000)

    // 设置悬停事件(经过)
    box.addEventListener('mouseenter', function() {
        clearInterval(ti)
    })

    // 设置悬停事件(离开)
    box.addEventListener('mouseleave', function() {
        againStart()
    })

    // 给按钮绑定点击事件
    dotLeft.addEventListener('click', function() {
        i--
        if (i < 0) {
            i = 5
        }
        trans()
    })

    dotRight.addEventListener('click', function() {
        i++
        i = i >= sliderData.length ? 0 : i
        
        trans()
    })

    // 设置函数以后要用
    function trans () {
        // 定时更换图片
        img.src = sliderData[i].url
        // 视频链接
        videoSrc.href = sliderData[i].videoSrc
        // 标语
        title.innerHTML = sliderData[i].title
        // 底部背景颜色
        foot.style.backgroundColor = sliderData[i].color
        liac = document.querySelector('.foot ul .active')
        liac.classList.remove('active')
        li = document.querySelector(`.foot ul li:nth-child(${i + 1})`)
        li.classList.add('active')
    }


      // 再声明一个函数放自动播放间隔函数
      function againStart() {
        // 这里再停止定时器是一个习惯，要开启前一定要先关掉
        // 这个是为了防止一打开 网页鼠标就在块上，定时器还没
        // 关闭后再开启是新的定时器，所以逻辑上一个新的定时器应该先关闭再开启
        clearInterval(ti)
        ti = setInterval(function() {
        i++
        if (i === sliderData.length) {
            i = 0
        }
        trans()
    }, 2000)
    }

// 放右边视频的内容
const rightVideoDataObj = [
    {videoUrl: 'https://www.bilibili.com/video/BV1rZ4y1r7N5/?share_source=copy_web&vd_source=6d85a42211229eb21897bf4e36af0c96',imgUrl:'./images/lunbo1.png',data1:'331',data2:'0',data3:'00:30',title:'【由比滨结衣】团子美图 我的青春恋爱物语果然有问题',author:'开开心心赢大奖',date:'2022-03-06'},
    {videoUrl: 'https://www.bilibili.com/video/BV1d4411F7QQ/?spm_id_from=333.999.0.0',imgUrl:'./images/一刀修罗！.webp',data1:'127.7w',data2:'1519',data3:'03:50',title:'【一刀修罗】以我的最弱，战胜你的最强',author:'秋山澪゛',date:'2019-07-09'},
    {videoUrl: 'https://www.bilibili.com/video/BV1XJ411Y7oK/?spm_id_from=333.337.search-card.all.click',imgUrl:'./images/100名.webp',data1:'1377.3w',data2:'15.8w',data3:'14:11',title:'100部动漫角色联手拯救世界！！！',author:'在下雷姆有何贵干',date:'2019-12-27'},
    {videoUrl: 'https://www.bilibili.com/video/BV1px411C76R/?share_source=copy_web&vd_source=6d85a42211229eb21897bf4e36af0c96',imgUrl:'./images/zohujielun.webp',data1:'231.4w',data2:'1.1w',data3:'10:33',title:'周杰伦十大忘词现场',author:'大腿说什么',date:'2017-03-10'},
    {videoUrl: 'https://www.bilibili.com/video/BV1QV411y7C3/?share_source=copy_web&vd_source=6d85a42211229eb21897bf4e36af0c96',imgUrl:'./images/spireman.webp',data1:'386.7w',data2:'2722',data3:'02:26',title:'喜欢蜘蛛侠的人，应该都会被推送到吧！',author:'I996-TV',date:'2020-11-09'},
    {videoUrl: 'https://www.bilibili.com/video/BV1RV41117ii/?share_source=copy_web&vd_source=6d85a42211229eb21897bf4e36af0c96',imgUrl:'./images/DNA.webp',data1:'583.4w',data2:'3.3w',data3:'03:57',title:'刻在DNA里的那些动漫台词跟场面，你知道多少？',author:'-影子a',date:'2020-10-07'},
]

const rightVideoData = rightVideoDataObj.map(item => {
    return `
    <li>
    <a href="${item.videoUrl}" class="img" target="_blank"><img src="${item.imgUrl}" alt=""></a>
    <div class="videoDetal"><span class="iconfont icon-bofangliang" style="font-weight: 400; margin-bottom: 1px;"></span><span class="data1">${item.data1}</span><span class="iconfont icon-danmu"><span class="data2" style="margin-left: 2px;">${item.data2}</span></span><span style="margin-top: 0.5px;">${item.data3}</span></div>
    <a href="#"><p class="title">${item.title}</p></a>
    <div class="anotherMessage"><span class="iconfont icon-UPzhu"></span><span class="author">${item.author}</span><span class="time">${item.date}</span></div>
</li>
    `
}).join('')
// console.log(rightVideoData)
document.querySelector('.topVideoRight ul').innerHTML = rightVideoData

1.4 遇到的问题总结

1.设置轮播图

      // 再声明一个函数放自动播放间隔函数
      function againStart() {
        // 这里再停止定时器是一个习惯，要开启前一定要先关掉
        // 这个是为了防止一打开 网页鼠标就在块上，定时器还没
        // 关闭后再开启是新的定时器，所以逻辑上一个新的定时器应该先关闭再开启
        clearInterval(ti)
        ti = setInterval(function() {
        i++
        if (i === sliderData.length) {
            i = 0
        }
        trans()
    }, 3000)
    }

2.引入JS文件报错，找不到图片标签

得把引入的标签写在</body>上面，也就是说得等页面加载出来那些图片之后，才可以获取到

3.播放量的图标怎么设置成透明的，也能看到视频的

检查才发现，我忘记把背景颜色去掉了

4.遍历循环出现结构不一致

用了结构伪类选择器解决了，选择后面三个设置不一样的结构就可以了
.mainvideo .topVideoRight ul li:nth-child(n+4) {
  margin-top: 10px;
}

5.怎么判断有没有值然后显示用户头像呢

// 登录成功后登录按钮消失变成用户随机头像
const uname = localStorage.getItem('uname')
const pwd = localStorage.getItem('pwd')
// console.log(uname,pwd)
//if (uname !== '' && pwd !== '')
if (uname && pwd ) {
    // console.log(123)
    document.querySelector('.header-login-entry').innerHTML = `<img src="./images/userimg.jpg" alt="">`
} else (
    document.querySelector('.header-login-entry').innerHTML = `<span> 登录 </span>`

)
//注意这里取不到本地存储，本地存储时null，null也不等于空字符，所以会成立，所以直接判断有没有就行

4、login和register设计

这里简略放一些主要在后部分补充

CSS部分

Login
css
body {
  background-image: url(../images/headbgi2.jpg);
}

h1 {
  color: #fff;
}

.register {
  /* margin: auto; */
  margin-left: 900px;
}

.form {
   margin-top: 40px;
   margin-left: 530px;
    display: flex;
    flex-direction: column;
    width: 400px;
    /* margin: auto; */
}


register

body {
  background-image: url(../images/headbgi2.jpg);
}
.form {
  margin-top: 40px;
  margin-left: 525px;
    display: flex;
    flex-direction: column;
    width: 400px;
    /* margin: auto; */
}
/* 提示框 */
.alert{
  margin-top: 100px;
  /* margin-right: 100px; */
    width: 400px;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
  }
.show{
    display: block !important;
  }

JS部分

login

// 还没注册先注册
const register = document.querySelector('.register')
register.addEventListener('click', e => {
    // console.log(123)
    location.href = 'register.html'
})


const form = document.querySelector('.form')
form.addEventListener('click', e => {
    e.preventDefault()   //组织默认事件
})

// 点击登录后跳转到首页
document.querySelector('.form .login').addEventListener('click', e => {
    // console.log(123)
    const formDataObj = serialize(form, {hash:true,empty:true})
    // console.log(formDataObj.uname)
    // console.log(localStorage.getItem('uname'))
    const uname = localStorage.getItem('uname')
    const pwd = localStorage.getItem('pwd')
    if (formDataObj.uname !== uname || formDataObj.uname === '') {
        // console.log(123)
    myAlert(false, '用户名不能为空或请检查用户名输入是否正确，新用户请先注册')

    }else if (formDataObj.pwd !== pwd || formDataObj.pwd === '') {
    myAlert(false, '密码不能为空或请检查密码输入是否正确，新用户请先注册')
    } else {
    myAlert(true, '登录成功')
    
    setTimeout(function(){
        location.href = '主网页.html' 
        
        }, 2000)
    }  
})

register
const form = document.querySelector('.form')
form.addEventListener('click', e => {
    e.preventDefault()   //组织默认事件
})

// 点击登录后跳转到首页
document.querySelector('.form .login').addEventListener('click', e => {
    // console.log(123)
    // 使用serialize插件收集表单数据
    const registerObj = serialize(form, {hash:true, empty:true})
    // console.log(registerObj)
    // console.log(registerObj.uname)
    // 判断不为空就存进去并且跳转
    if (registerObj.uname !== '' && registerObj.pwd !== '') {
        localStorage.setItem('uname', registerObj.uname)
        localStorage.setItem('pwd', registerObj.pwd)
        myAlert(true, '注册成功')
        setTimeout(function() {
            // console.log(123)
            location.href = 'login.html'
    
        },2000)
    }else {
        myAlert(false, '注册用户名和内容不能空，请重新输入')
        form.reset()
    }
})

三、总结（问题、想法、优化）

笔记思路最好是先静态，然后在动态业务逻辑

设置用户登录的时候，可以加一个滑到用户头像的时候出现退出登录按钮，一点击退出就跳转到首页头像消失。再登录的时候还可以用之前注册的信息再登录。

本栏目推荐文章
• 一行代码创建网页（html）
• vue-quill编辑器网页版
• Android Webview判断网页加载完毕
• python的登陆认证及网页认证
• 网页CAD中实现打开DWG图纸的方式
• 通过腾讯网页快捷登录协议截取 QQ邮箱 的 QQClientkey / QQKey 教程
• 通过腾讯网页快捷登录协议截取 QQ邮箱 的 QQClientkey / QQKey 教程
• 移动端最新布局处理
• chatgpt中国免费网页版现已上线，用户可直接在线访问
• electron+vue网页直接播放RTSP视频流？

布局 Bilibili 网页布局bilibili网页 快捷键bilibili网页 布局 网页01 布局 网页 标准webkit 布局 常见 网页html bilibili bilibili视频java 清晰度bilibili 封面bilibili视频com 客户端bilibili客户