老师，请问为什么会报错啊

package com.bjsxt;

/*
基于单向链表
 */
public class MySinglyLinkedList<E> implements MyList<E> {

    /*
    定义单向链表中的节点对象
     */
    class Node<E> {
        private E item;                  //存储元素
        private Node next;               //存储下一个节点对象的地址

        Node(E item, Node next) {
            this.item = item;
            this.next = next;
        }
    }

    private Node head;  //存放链表中的头节点
    private int size;   //记录元素个数

    //向链表中添加元素
    @Override
    public void add(E element) {
        //创建节点
        Node<E> node = new Node<>(element, null);
        //找到尾节点
        Node tail = getTail();
        if (tail == null) {
            this.head = node;
        } else {
            tail.next = node;
        }
        //记录元素个数
        this.size++;

    }

    private Node getTail() {
        //头节点是否存在
        if (this.head == null) {
            return null;
        }
        //查找尾节点
        Node node = this.head;
        while (true) {

            if (node.next == null) break;
            node = node.next;
        }
        return node;
    }

    //根据元素位置获取元素
    @Override
    public E get(int index) {
        //校验index的合法性
        this.checkIndex(index);
        //根据位置获取指定节点
        Node<E> node = this.getNode(index);
        //将该节点中的元素返回
        return node.item;

    }

    /*
    对index进行校验
     */
    private void checkIndex(int index) {
        if (!(index > 0 && index < size)) {
            throw new IndexOutOfBoundsException();
        }
    }

    /*
    根据位置获取节点
     */

    private Node getNode(int index) {
        Node<E> node = this.head;
        for (int i = 0; i < index;i++) {
            node = node.next;
        }
        return node;
    }


    //获取元素个数
    @Override
    public int size() {
        return size;
    }

    //根据元素位置删除元素
    @Override
    public E remove(int index) {
        //检验index合法性
        this.checkIndex(index);
        //根据位置找到该节点对象
        Node<E> node = this.getNode(index);
        //获取该节点对象中的元素
        E item = node.item;
        //将还节点对象从单向链表中删除
        //判断当前删除订的节点是否尾头节点
        if (this.head == node) {
            this.head = node.next;
        } else {
            Node<E> temp = this.head;
            for (int i = 0; i < index - 1; i++) {
                temp = temp.next;
            }
            temp.next = node.next;
        }
        node.next = null;
        //记录元素个数
        this.size--;
        //将该元素返回
        return item;
    }

    public static void main(String[] args) {
        MySinglyLinkedList<String> my=new MySinglyLinkedList<>();
        my.add("a");
        my.add("b");
        my.add("c");
        my.add("d");
        System.out.println(my.size());
        System.out.println(my.get(3));
        System.out.println(my.remove(2));
        for(int i=0;i<my.size();i++){
            System.out.println(my.get(i));
        }
    }


}

package com.bjsxt;
/*
基于链表结构存取元素的方法API定义

 */


public interface MyList<E> {
    void add(E element);
    E get(int index);
    int size();
    E remove(int index);


}

为什么这里不用拆分数据集直接就拟合了啊？

'''开发记事本软件的菜单'''

from tkinter.filedialog import *

from tkinter.colorchooser import *
from tkinter.filedialog import *

class Application(Frame):

    def __init__(self,master=None):
        super().__init__(master)
        self.master = master
        self.textpad = None
        self.pack()
        self.createWidget()

    def createWidget(self):
        # 创建主菜单栏
        menubar = Menu(root)


        #创建子菜单
        menuFile = Menu(menubar)
        menuEdit = Menu(menubar)
        menuHelp = Menu(menubar)

        # 将子菜单加入到主菜单栏
        menubar.add_cascade(label="文件(f)",menu=menuFile)
        menubar.add_cascade(label="编辑(E)",menu=menuEdit)
        menubar.add_cascade(label="帮助(H)",menu=menuHelp)

        #添加菜单栏
        menuFile.add_command(label="新建",accelerator="ctrl+n",command=self.newfile)
        menuFile.add_command(label="打开",accelerator="ctrl+o",command=self.openfile)
        menuFile.add_command(label="保存",accelerator="ctrl+s",command=self.savefile)
        menuFile.add_separator()#添加分割线
        menuFile.add_command(label="退出",accelerator="ctrl+q",command=self.exit)

        #将菜单栏加到根窗口

        root["menu"] = menubar

        #增加快捷键
        root.bind("<Control-n>",lambda event:self.newfile())
        root.bind("<Control-o>",lambda event:self.openfile())
        root.bind("<Control-s>",lambda event:self.savefile())
        root.bind("<Control-q>",lambda event:self.exit())

        #文本编辑区
        self.textpad = Text(root,width=50,height=30)
        self.textpad.pack()

        #创建上下菜单
        self.contextMenu = Menu(root)
        self.contextMenu.add_command(label="背景颜色",command=self.openAskColor)

        #为右键绑定事件
        root.bind("<Button-3>",self.createContextMenu)
    def newfile(self):
        self.filename = askopenfilename(title="另存为",initialfile="未命名.txt",
                        filetype=[("文本文档","*.txt")],
                        defaultextension=".txt")
        self.savefile()

    def openfile(self):
        # with open(askopenfile(),"r",encoding="utf-8") as f:
        #     self.textpad.insert(INSERT,f.read())
        with open(askopenfilename(title="打开文本文件"),"r",encoding='utf-8') as f:  #转译后需要改成这个
            self.textpad.insert(INSERT,f.read())
            self.filename = f.name

    def savefile(self):
        with open(self.filename,"w") as f:
            c = self.textpad.get(1.0,END)
            f.write(c)

    def exit(self):
        root.quit()


    def openAskColor(self):
        s1 = askcolor(color="red",title="选择背景色")
        self.textpad.config(bg=s1[1])

    def createContextMenu(self,event):
        # 菜单在鼠标右键单机坐标处显示

        self.contextMenu.post(event.x_root,event.y_root)


if __name__ == "__main__":
    root = Tk()
    root.geometry("300x300+200+200")
    root.title("记事本")
    app = Application(master=root)
    root.mainloop()

老师，您帮我看一下，为什么我这个新建文件不可以，提示我让我打开

x ():
    y ():
        (x=)
    ()

麻烦问一下，我不是很理解这个打印出来的过程，能不能讲解一下

老师，为什么“技术·共享·娱乐”这张图片的高度变高了呢？

<!--第一块开始-->
<div class="one box">
    <video src="images/201702241034284066.mp4" autoplay loop muted>
        您的浏览器不支持视频，请升级！
    </video>
    <div class="text">
        <img src="images/video_txt.png" alt="">
        <a href="#">下载迅雷产品</a>
        <i class="iconfont">&#xe60c;</i>
    </div>
</div>
<!--第一块结束-->

/*第一块样式开始*/
.one{
    /*垂直方向溢出部分隐藏 不出现滚动条*/
    overflow: hidden;
    position: relative;
}
.one>video{
    width: 100%;
}
.text{
    width: 716px;
    height: 193px;
    position: absolute;
    /*相对于父元素one往下走50%*/
    top: 50%;
    /*相对于父元素one往右走50%*/
    left: 50%;
    /*往左上走自己宽高的一半*/
    transform: translate(-50%,-50%);
}
.text>img{
    width: 100%;
}
.text>a{
    width: 180px;
    height: 50px;
    margin: 30px auto 20px;
    color: #fff;
    /*z转换为块级元素 样式才会生效*/
    display: block;
    border: 1px solid #fff;
    /*水平居中 行高等于高*/
    line-height: 50px;
}
.text>a:hover{
    background-color: rgba(255,255,255,.5);
}
.text>i{
    font-size: 40px;
    color: #fff;
    animation: updown 1s linear infinite;
    /*转换为块级元素 实现动画*/
    display: block;
}
@keyframes updown{
    0%{
        transform: translateY(0);
    }
    33%{
        transform: translateY(-3px);
    }
    66%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(3px);
    }
}
/*第一块样式结束*/

关于yield x

请问这里yield的作用是类似于return吗？

还是说类似int（x）， 用yield将变量x声明为生成器？

为什么我需要两个参数

老师，视频中，这个查询组件的菜单命令是什么？

老师，有没有教程是那种 gitee里面的项目已经有代码了，第一次如何把上面的代码拉取下来的教程？也是新建一个文件夹做仓库 然后直接用命令行拉下来？

最后的练习第2道题的打印和无打印什么意思呢？

老师，多部件解析器ID为什么必须要叫multipartResolver？

老师这个标题的通配符的"通"字是统治的"统"吗?

class ZolSpider(scrapy.Spider):
    name = 'zol'
    allowed_domains = ['faloo.com']
    start_urls = ['https://b.faloo.com/1216400_1.html']

    def parse(self, response):
        name = response.xpath('//h1/text()').extract_first()

        content = response.xpath('//div[@class="noveContent"]/p/text()').extract()

        next_url = response.xpath('//*[@id="next_page"]/@href').get()

        yield {
            'name':name,
            'content':content
        }
       
        yield scrapy.Request('https:'+next_url,callback=self.parse)

老师我有两个问题  parse这个方法是只要有url无限传递 那他就会无限爬取吗 类似于爬虫加个for循环吗

 这样只有在没有url了以后才会停止爬取 那要是想控制爬取的次数 或者说达到一定条件停止爬取 那这样应该怎么控制呢  yield有能像for循环那样能跳出语句的操作吗 

<!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="icon" href="../img/favicon.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/小米官网练习.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <link rel="stylesheet" href="../css/demo.css">
    
</head>
<body>
<!--顶部图片  -->
<div class="header">
    <a href="#">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
    </a>
<!-- 黑色导航div -->
</div>
    <div class="nav">
        <div class="nav-center">
            <ul class="nav-left">
                <li><a href="#">小米商城</a><span>|</span></li>
                <li><a href="#">MIUI</a><span>|</span></li>
                <li><a href="#">loT</a><span>|</span></li>
                <li><a href="#">云服务</a><span>|</span></li>
                <li><a href="#">天星科技</a><span>|</span></li>
                <li><a href="#">有品</a><span>|</span></li>
                <li><a href="#">小爱开放平台</a><span>|</span></li>
                <li><a href="#">企业团购</a><span>|</span></li>
                <li><a href="#">资质证照</a><span>|</span></li>
                <li><a href="#">协议规则</a><span>|</span></li>
                <li class="app">
                    <a href="#">下载APP</a>
                    <span>|</span>
                    <div class="QRcode">
                        <img src="../img/93650133310ec1c385487417a472a26c.png" alt="" class="QRcode-img">
                        <p>小米商城APP</p>
                    </div>
                    <div class="sanjiao"></div>
                </li>
                <li><a href="#">智能生活</a><span>|</span></li>
                <li><a href="#">select location</a></li>
            </ul>   
            <ul class="nav-right">
                <li class="cart">
                    <a href="#">购物车（0)</a>
                    <div class="cart-list">购物车还没有商品，赶紧加入吧</div>
                </li>
                <li><a href="#">信息通知</a></li>
                <li><a href="#">注册</a><span>|</span></li>
                <li><a href="#">登录</a><span>|</span></li>
            </ul>   
        </div>  
    </div>
<!-- 白色导航div -->
<div class="white-nav">
    <div class="white-wrap">
        <div class="logo-mi">
            <a href="#">
                <img src="../img/mi-logo.png" alt="" class="mi-logo">
                <img src="../img/mi-home.png" alt="" class="mi-home">
            </a>
            
        </div>
        <div class="white-nav-center"> 
             <ul>
                <li>
                    <a href="#">
                    <img src="../img/大logo.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">小米手机</a>
                    <div class="pull-down">
                        <div class="pull-down-center">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="../img/pull-down.jpg" alt="">
                                        </div>
                                        <p>小米10s</p>
                                        <p>3299元起</p>
                                    
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="../img/pull-down1.png" alt="">
                                        </div>
                                        <p>小米11</p>
                                        <p>3999元起</p>                                      
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">Redmi 红米</a>
                    <div class="pull-down">
                        <div class="pull-down-center">
                            <ul>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="../img/pull-down1.png" alt="">
                                        </div>
                                        <p>小米10s</p>
                                        <p>3299元起</p>
                                    
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img-box">
                                            <img src="../img/pull-down.jpg" alt="">
                                        </div>
                                        <p>小米11</p>
                                        <p>3999元起</p>                                      
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </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>
            </ul> 
        </div>
        <div class="nav-input">
            <input type="text" placeholder="小米之家">
            <button class="button">搜索</button>
               <div class="nav-input-list"></div>
        </div>
    </div>
</div>
<!-- 轮播图部分div -->
<div class="banner">
    <div class="banner-center">
        <div class="center-lfet">
            <ul>
                <li>
                    <a href="#">电视 机顶盒<u>▶</u></a>
                    <div class="center-left-list">
                        <div class="center-left-list-sub">
                            <ul>
                                <li>
                                    <a href="#">
                                    <img src="../img/left.png" alt="">
                                    <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                    <img src="../img/left.png" alt="">
                                    <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>                                                                                                                          
                            </ul>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">手机 充电器<u>▶</u></a>
                    <div class="center-left-list">
                        <div class="center-left-list-sub">
                            <ul>
                                <li>
                                    <a href="#">
                                    <img src="../img/left-bottom.png" alt="">
                                    <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                    <img src="../img/left-bottom.png" alt="">
                                    <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left-bottom.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left-bottom.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left-bottom.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="../img/left-bottom.png" alt="">
                                        <span>小米MIX FOLD</span>
                                    </a>
                                </li>                   
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
                <li><a href="#">电视 机顶盒<u>▶</u></a></li>
            </ul>
        </div>
    </div>
</div>
<!-- 轮播图部分结束 -->


<!-- 伪对象部分 -->
<div class="weiduixiang">
    <!-- 伪对象的六张opacity: ;透明度 -->
    <div class="wdx">
        <ul>
            <li>
                <a href="#">
                    <img src="../img/placeholder-40.png" alt="">
                    <span>小米之家</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="">
                    <span>小米之家</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="">
                    <span>小米之家</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
                    <span>小米之家</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
                    <span>小米之家</span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
                    <span>小米之家</span>
                </a>
            </li>
        </ul>
    </div>
    <!-- 伪对象部分的三张超链接图片 -->
    <div class="diyi">
        <a href="#">
            <img src="../img/weiduixiang.jpg" alt="">
        </a>
    </div>
    <div class="dier">
        <a href="#">
            <img src="../img/weiduixiang.jpg" alt="">
        </a>
    </div>
    <div class="disan">
        <a href="#">
            <img src="../img/weiduixiang.jpg" alt="">
        </a>
    </div>
</div>



<!-- 手机广告部分 -->
<div class="big-shouji">
    <div class="h2">
        <h2>广告部分</h2>
    </div>
    <a href="">
        <img src="../img/big-img.jpg" alt="">
    </a>
    
    <div class="title1">
        <h2>手机</h2>
       <div class="more">
           <a href="#">
               <span>查看更多 <u>▶</u></span>
           </a>
       </div>
    </div>
   <!-- 居中的手机广告div -->
    <div class="shouji-guanggao">
      <!-- 左侧div -->
      <div class="shouji-left-img">
        <a href="#">
            <img src="../img/left-img.jpg" alt="">
        </a>
      </div>
       <!-- 右侧的8张图片设置 -->
       <ul class="shouji-right">
           <li>
               <a href="#">
                   <img src="../img/shouji-rigth.png" alt="">
                   <h3>小米MIX FOLD</h3>
                   <p>折叠大屏｜自研芯片</p>
                   <p>9999元起</p>
               </a>
            </li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏｜自研芯片</p>
                   <p>9999元起</p></a></li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏｜自研芯片</p>
                   <p>9999元起</p></a></li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏｜自研芯片</p>
                   <p>9999元起</p></a></li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏｜自研芯片</p>
                   <p>9999元起</p></a></li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏｜自研芯片</p>
                   <p>9999元起</p></a></li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏｜自研芯片</p>
                   <p>9999元起</p></a></li>
           <li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
                   <p>折叠大屏｜自研芯片</p>
                   <p>9999元起</p></a></li>
       </ul>
    </div>
    <!-- 隔断图 -->
    <a href="#">
        <img src="../img/隔断图.jpg" alt="">    
    </a>
    <!-- 家电部分的h2让（广告部分）的h2重用了 -->
    <div class="jiadian">
        <h2>家电</h2>
    </div>
    <!--家电部分居中div加10个里边的div设置-->
    <div class="home">
        <div class="home2">
            <a href="#">
                <img src="../img/家电.jpg" alt="">
            </a>
        </div>
        <div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
            <p>全面屏设计</p>
            <p><span>2899元</span> <s>3299元</s></p></a></div>
        <div class="home1">
            <a href="#">
                <img src="../img/家电1.jpg" alt="">
                <h3>小米全面屏电视65英寸 E65X</h3>
                <p>全面屏设计</p>
                <p><span>2899元</span> <s>3299元</s></p>
            </a>
        </div>
        <div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
            <p>全面屏设计</p>
            <p><span>2899元</span> <s>3299元</s></p></a></div>
        <div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
            <p>全面屏设计</p>
            <p><span>2899元</span> <s>3299元</s></p></a></div>
        <div class="home2"><a href="#"><img src="../img/家电.jpg" alt=""> </a></div>
        <div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
            <p>全面屏设计</p>
            <p><span>2899元</span> <s>3299元</s></p></a></div>
        <div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
            <p>全面屏设计</p>
            <p><span>2899元</span> <s>3299元</s></p></a></div>
        <div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
            <p>全面屏设计</p>
            <p><span>2899元</span> <s>3299元</s></p></a></div>
            <!-- 最后一个单独写 -->
        <div class="home-last">
            <a href="#">
                <div class="last1">
                    <img src="../img/last.webp" alt="">
                    <p>米家电烤箱</p>
                    <p>299元</p>
                </div>
                <div class="last2">
                   <div>
                       <p>浏览更多</p>
                       <p>热门</p>
                   </div>
                </div>
            </a>
        </div>   
    </div>
    <!-- 视频广告部分开始 -->
    <div class="shipin">
        <h2>视频</h2>
    </div>
    <!--第一个超链接视频的设置 -->
    <div class="video">
        <div class="video1">
                                      <!-- 新开一网站打开 -->
            <a href="../video/video.mp4" target="_blank">
                <img src="../img/video.jpg" alt="">
                <span class="span">
                 <u>▶</u>
                </span>
                 <a href="../video/video.mp4" target="_blank">
                    <p>Redmi 10X系列发布会 </p>
                 </a>
               
            </a>
        </div>
       <div class="video1"></div>
       <div class="video1"></div>
       <div class="video1"></div>
    </div>




</div>
</body>
</html>

/* 顶部图片隐藏 */
.header{
    width: 100%;
    height: 100%;
    display: none;
}
/* 黑色导航 */
.nav{
    width: 100%;
    height: 40px;
    background-color:#333;
    

}
/* 居中div */
.nav-center{
    width: 1226px;
    height: 100%;
    margin: 0 auto;
}
/* a的字体颜色 */
a{
    color: #b0b0b0;
}
/* 鼠标悬停时字体颜色 */
.nav-center a:hover{
    color: #fff;
}
/* 左侧li浮动 定位*/
.nav-left>li{
    float: left;
    font-size: 12px;
    line-height: 40px;
    position: relative;
}
/* 右侧li浮动 定位*/
.nav-right>li{
    float: right;
    font-size: 12px;
    line-height: 40px;
    position: relative;
}
/* span竖杠(|)的外边距 */
.nav span{
    margin: 0 3.6px;
    color: #424242;
}
/* 购物车:大小 颜色 外边距 */
.cart{
    width: 120px;
    height: 40px;
    background: #424242;
    margin-left: 20px;
}
/* 购物车鼠标悬停时背景颜色 */
.cart:hover{
    background: #fff;
}
/* 购物车鼠标悬停时a的的颜色*/
.cart:hover>a{
    color: #ff6700;
}
/* 购物车下拉列表的属性，1:相对于右侧li定位，隐藏下拉列表，所有属性:all .3s的过度 */
.cart>.cart-list{
    width: 316px;
    /* 高度设置为0隐藏下拉列表 */
    height: 0px;
    background:#fff;
    position: absolute;
    right: 0px;
    top: 40px;
    box-shadow: 0 2px 10px #aaa;
    color: #424242;
    /* 下拉列表的文字溢出部分隐藏 */
    overflow: hidden;
    /* 过度:所有属性 .3s秒速度显示 */
    transition: all .3s;
    /* 在白色导航上边显示出来 */
    z-index: 1;
}
/* 鼠标悬停时显示下拉列表，字体居中 */
.cart:hover>.cart-list{
    height: 100px;
    line-height: 100px;
}
/* app下载的属性中的二维码框设置 */
.app>.QRcode{
   width: 124px;
    /* 高度设置为0隐藏下拉列表 */
   height: 0px;
   background-color:#fff;
   box-shadow: 0 1px 5px #aaa;
   /* 相对于左侧li定位 */
   position: absolute;
   top: 40px;
   left: 50%; 
   margin-left: -66px; 
   /* 下拉列表的文字溢出部分隐藏 */
   overflow: hidden;
   /* 过度:所有属性 .3s秒速度显示 */
   transition:all .3s;
   /* 在白色导航上边显示出来 */
   z-index: 1;
}
/* 二维码图片的设置 */
.QRcode>.QRcode-img{
    width: 90px;
    height: 90px;
    margin: 18px 0 0;
}
/* 二维码框中字体的设置 */
.QRcode>p{
    font-size: 14px;
    line-height: 1;
}
/* 鼠标悬停二维框显示 */
.app:hover>.QRcode{
    height: 148px;
}
/* 小三角的设置:绘制特殊图形的方式写 */
.sanjiao{
    width: 0;
    height: 0;
    border-bottom: 8px solid #fff;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    /* 定位小三角并且隐藏 */
    position: absolute;
    left: 17px;
    top: 32px;
    display: none;
}
/* 鼠标悬停显示小三角 */
.app:hover>.sanjiao{
    display: block;
}
/* 白色导航部分 */
.white-nav{
    width: 100%;
    height: 100px;
    position: relative;
}
/* 居中部分 */
.white-wrap{
    width: 1226px;
    height: 100px;
    margin: 0 auto;
}
/* logo部分 */
.logo-mi{
    width: 55px;
    height: 55px;
    background: #ff6700;
    float: left;
    margin-top: 22.5px;
    /* 定位加隐藏 */
    position: relative;
    overflow: hidden;
    
}
/* 中间文字导航部分 */
.white-nav-center{
    width: 876px;
    height:100px;
    float: left;
}
/* 搜索框部分 */
.nav-input{
    width: 295px;
    height:100px;
    float: right;
    position: relative;
}
/* logo的图片大小 */
.logo-mi>a>img{
    width: 100%;
    height: 100%;
    /* 定位加过渡*/
    position: absolute;
    top: 0;
    transition: all .3s;
}
/* logo-mi-logo定位的设置 */
.mi-logo{
    top: 0;
    left: 0px;
}
/* logo-mi-home定位的设置 */
.mi-home{
    top: 0;
    left: -55px;
}
.logo-mi:hover>a>.mi-home{
    left: 0px;
}
.logo-mi:hover>a>.mi-logo{
    left: 55px;
}
/* 白色导航中间部分 浮动加字体间距 */
.white-nav-center ul>li{
    float: left;
    line-height: 100px;
}
/* 设置a的字体 颜色 内边距 */
.white-nav-center>ul>li>a{
   font-size: 16px;
   color: #333;
   padding:0 10px;
}
/* logo右边图标的调整 */
.white-nav-center>ul>li:first-child{
    margin-top: 9px;
    margin-left: 20px;
    margin-right: 40px;
}
/* 鼠标悬停a的文字变橘色 */
.white-nav-center>ul>li>a:hover{
    color: #ff6700;
}
/* 白色导航栏的下拉列表的属性 */
.pull-down{
    width: 100%;
    height: 0px;
    background: #fff;
    
    box-shadow: 0 1px 2px #aaa;
    position: absolute;
    top: 100px;
    left: 0;
    box-sizing: border-box;
    transition: all .3s;
    overflow: hidden;
    z-index: 2;
    outline: none;
}
/* 居中的下拉列表部分 */
.pull-down-center{
    width: 1226px;
    height: 100%;
    background-color: #fff;
    margin: 0 auto;
    
}
.img-box{
    width: 204px;
    height: 110px;
    border-right:1px solid #bdb8b8 ;
    box-sizing: border-box;
    margin-top: 30px;
    margin-bottom: 15px;
}
.img-box img{
    width: 160px;
    height: 110px;
}
.pull-down-center p{
    font-size: 12px;
    line-height: 20px;
    
}
.pull-down-center p:nth-of-type(1){
    color: #333;
}
.pull-down-center p:nth-of-type(2){
    color:#ff6700;
}
/* 隐藏高度实现过渡效果 */
.white-nav li:hover>.pull-down{
    height: 230px;
    
}


/* input属性 */
.nav-input>input{
    width: 220px;
    height: 50px;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    padding: 0 10px;
    margin-top: 23.5px;
    float: left;
    /* 不显示轮廓线 */
    outline: none;
    border-right: none;
    transition:all .3s;
    z-index: 5;
}
/* button按钮属性 */
.nav-input>button{
    width: 52px;
    height: 50px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-sizing: border-box;
    float: left;
    margin-top: 23.5px;
    /* 不显示轮廓线 */
    outline: none;
    transition:all .3s;
}
/* hover鼠标悬停时的状态 */
.nav-input>input:hover,.nav-input>input:hover+button{
    border-color: #b0b0b0;
}
/* focus（否卡尔时）鼠标获取焦点时的状态 */
.nav-input>input:focus,.nav-input>input:focus+button{
    border-color: #ff6700;
}
/* 鼠标悬停在button按钮上的状态 */
.nav-input>button:hover{
    background-color: #ff6700;
    border-color: #ff6700;
    color: #fff;
}
/* input下拉列表属性 */
.nav-input-list{
    width: 219px;
    height: 240px;
    background-color: #fff;
    border: 1px solid #ff6700;
    border-top:none ;
    /* 在input的div上定位 */
    position: absolute;
    left: 0;
    top: 74px;
    display: none;
   
}
/* 点击获取焦点时下拉列表出现 */
.nav-input>input:focus~.nav-input-list{
    display: block;
}
/* 以上白色导航结束 */


/* banner轮播图部分 */
.banner{
    width: 100%;
    height: 460px;
/* 总高/宽度的设定 */
}
/* banner居中部分 */
.banner>.banner-center{
    width: 1226px;
    height: 460px;
    background-color: #ff6700;
    margin: 0 auto;
    background-image: url(../img/小米动画练习.webp);
    /* 引入动画 1名字 2播放时间 3循环次数(因飞内特) 4播放速度 5播放方向(哦特内特) */
    animation: xiaomi 5s  infinite ease-in-out alternate;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    
}
/* 鼠标悬停动画停止播放 */
div>.banner-center:hover{
    animation-play-state: paused;
}
/* 关键帧制作动画 url引入图片 */
@keyframes xiaomi{
    0%{
        background-image: url(../img/小米动画练习.webp);
    }
    50%{
        background-image: url(../img/113.jpg);
    }
    100%{
        background-image: url(../img/118.jpg);
    }
}
/* 左侧的半透明div */
.center-lfet{
    width: 234px;
    height: 460px;
    background-color: rgba(105,101,101,.6);
    padding-top: 18px ;
    line-height: 40px;
    box-sizing: border-box;
    position: relative;
}
/* 左侧半透明div里边的a样式 */
.center-lfet>ul>li>a{
    font-size: 14px;
    color: #fff;
    margin-left: -90px;
}

/* 左侧半透明鼠标悬停li的样式 */
.center-lfet>ul>li:hover{
    background-color: #ff6700;
}
/* 三角的特殊图形设置 */
.center-lfet>ul>li>a>u{
    float:right;
    margin-right: 20px;
    text-decoration: none;
}
/* 滑动门的设置与定位 */
.center-left-list{
    width: 992px;
    height: 460px;
    background: #fff;
    float: left;
    position: absolute;
    left: 234px;
    top: 0;
    border: 1px solid #eee;
    box-sizing: border-box;
    border-left:none ;
    display: none;
}
.center-left-list>div>ul>li{
    float: left;
    
}
.center-left-list>div>ul>li>a{
    font-size: 14px;
    color: #333;
    /* 在a里边加入inline-block会变成a的行内块元素img和span就会在a的范围里显示 */
    display: inline-block;
    height: 65px;
    width: 170px;
    padding-top: 13px;
    padding-left: 10px;
    box-sizing: border-box;
}
.center-left-list>div>ul>li a>span{
    position: relative;
    top: -20px;
    left: 05px;
}
.center-left-list>div>ul>li>:hover{
    color: #ff6700;
}
.center-lfet>ul>li:hover>.center-left-list{
    display: block;
}
/* 伪对象部分css */
.weiduixiang{
    width: 1226px;
    height: 170px;
    margin: 15px auto;
    display: flex;
    justify-content: space-between;
    
}
.weiduixiang .diyi,.dier,.disan{
    transition: all .3s;
}
.weiduixiang>.diyi:hover,.dier:hover,.disan:hover{
    box-shadow: 0 3px 6px #5f5750;
}

/* 第一个伪对象有六个div的设置 */
.weiduixiang>.wdx{
    width: 234px;
    height: 170px;
    background-color: #5f5750;
    float: left; 
}
.weiduixiang img{
    width: 316px;
    height: 170px;
}
.wdx>ul>li>a img{
    width: 24px;
    height: 24px;
    display:block;
    margin: 0 auto 4px;
}
.wdx>ul>li span{
    font-size: 12px;
    color: #fff;
}
.wdx>ul>li a{
    width: 76px;
    height: 82px;
    float: left;
    padding-top: 20px;
    box-sizing: border-box;
    transition:all.3s;
    border: 1px solid #686262;
    border-right: none;
    border-bottom: none;
}
.wdx>ul>li a{
    opacity: .4;
}
.wdx a:hover{
   opacity: 1;
}
/* 广告部分最外层的大div */
.big-shouji{
    width: 100%;
    height: 100%;
    background-color: #f1eded;
}
/* （广告部分）h2的div的设置+加上（家电字体div）的设置 */
.h2,.jiadian{
    width: 1226px;
    height: 58px;
    margin: 0 auto;
    text-align: left;
    line-height: 58px;
}
/* （广告部分）的字体设置+加上（家电字体）设置 */
.h2>h2,h2{
    font-size: 24px;
    font-weight: 300;
    color: #333;
    text-align: left;
}
/* 第一张居中（生生不息）的img图片 */
.big-shouji>a img{
    margin: 0 auto;
    width: 1226px;
    height: 120px;
}
/* h2（手机）的div设置 */
.title1{
   text-align: left; 
   width: 1226px;
   height: 58px;
   margin: 0 auto;
}
/* h2（手机）的样式设置 */
.title1>h2{
    font-size: 24px;
    line-height: 58px;
    font-weight: 300;
    margin-top: -3px;
    display: inline-block;
}
/* （查看更多）的a设置 */
.title1>.more{
    float: right;
    width: 100px;
    height: 100%;
}
/* （查看更多）的a设置 */
.title1>.more>a{
    font-size: 16px;
    line-height: 55px;
    color: #333;
    transition: all .3s;
}
/* 小三角的设置 */
.title1>.more>a u,u{
    text-decoration: none;
}
/* （查看更多）的鼠标悬停设置 */
.title1>.more>a:hover{
    color: #ff6700;
}
/* 居中的手机广告div部分 */
.shouji-guanggao{
    width:1240px ;
    height: 614px;
    margin: 0 auto;
}
/* 手机广告里的左侧div设置 */
.shouji-left-img{
    width: 234px;
    height: 614px;
    background-color: aqua;
    float: left;
    margin-left:8px;
    box-sizing: border-box;
    transition: all .3s;
}
/* 左侧div的过渡设置+加上右侧8个a鼠标悬停在a上的转换+加上家电部分十个a的鼠标悬停转换+视频部分的4个div转换  */
.shouji-left-img:hover,.shouji-right li a:hover,.home .home1 a:hover,.home2 a:hover,.video>div:hover{
    box-shadow: 0 8px 18px rgb(182, 168, 168);
    transform:translateY(-2px) ;
}
/* 左侧图片大小 */
.shouji-left-img>a img{
    width: 234px;
    height: 614px;
}
/* 右侧8张图片的大小+加上家电部分的img大小 */
.shouji-right img,.home1 img{
    width: 160px;
    height: 160px;
    margin-top: 20px;
}
/* 右侧八张超链接a的设置 */
.shouji-right li a{
    width: 234px;
    height: 300px;
    background-color: #fff;
    float: left;
    margin-left: 13px;
    margin-bottom: 14px;
    box-sizing: border-box;
    transition: all .3s;
}
/* h3字体的设置+加上家电部分h3的设置 */
.shouji-right li a>h3,.home1 h3,p{
    margin-top: 15px;
    font-size: 14px;
    font-weight: 400;
    color: #333;
}
/* 字体，第一个p的设置+加上家电部分的第一个p的设置 */
.shouji-right li a>p:nth-of-type(1),.home1 p:nth-of-type(1){
    font-size: 12px;
    color: #b0b0b0;
    margin-top: 5px;
}
/* 字体，第二个p的设置+加上家电部分的第二个p的设置*/
.shouji-right li a>p:nth-of-type(2),.home1 p:nth-of-type(2){
    font-size: 14px;
    color: #ff6700;
    margin-top: 10px;
}


/* 家电部分居中div设置 */
.home{
    width: 1226px;
    height: 614px;
    margin: 0 auto;
}
/* 实在没找到重用的元素，单独写。 */
.home>.home1 a,.home2 a{
    width: 234px;
    height: 300px;
    background-color: #fff;
    float: left;
    transition: all .3s;
}
/* 定义home1的外边距 */
.home1 a{
    margin-left: 14px;
    margin-bottom: 15px;
}
/* 删除线 */
s{
    color: #aaa;
}
/* 10个中的最后一个div */
.home-last{
    width: 234px;
    height: 300px;
    float: left;
    margin-left: 14px;
}
/* 米家电烤箱图片设置 */
.last1 img{
    width: 80px;
    height: 80px;
    margin-left: 100px;
    margin-top: 29px;
    box-sizing: border-box;
}
/* 第十个中的上边的那一块 */
.last1{
    width: 234px;
    height: 143px;
    background-color: #fff;
    margin-bottom: 13px;
    box-sizing: border-box;
    float: left;
    transition: all .3s;
}
/* 第十个中下边的那一块，去掉下外边距 */
.last2{
    width: 234px;
    height: 143px;
    background-color: #fff;
    box-sizing: border-box;
    float: left;
    transition: all .3s;
}
/* 给上边的一个p设置定位 */
.last1 p{
    position: relative;
    right: 50px;
    top: -70px;
}
/* 给上边的第一个p设置样式 */
.last1 p:nth-of-type(1),.last2 p{
    color: #333;
    font-size: 14px;
}
/* 给上边的第二个p设置样式 */
.last1 p:nth-of-type(2){
    color: #ff6700;
    font-size: 14px;
    position: relative;
    right: 63px;
}
/* 给第十个的两个都设置上过渡和阴影 */
.home-last a>div:hover{
    box-shadow: 0 8px 18px rgb(182, 168, 168);
    transform:translateY(-2px) ;
}
/* 设置下p的距离没写具体内容内容，因为图标不生效 */
.last2 p{
    margin-top: 30px;
}
/* 以上手机、家电部分样式完成 */
/* 单独给（视频）字体的样式设置 */
.shipin{
    width: 1226px;
    height: 58px;
    margin:  auto;
}
/* 单独给（视频）字体的样式设置 */
.shipin h2{
    position: relative;
    left: -980px;
    line-height: 58px;
}
/* 视频div部分开始 */
/* 居中，视频部分的设置 */
.video{
    width: 1226px;
    height: 285px;
    margin: 0 auto;
    /* 写在父元素中的属性 （切记） */
    display: flex;
    justify-content: space-between;
}

/* 视频中div的设置 */
.video>div{
    width: 296px;
    height: 285px;
    background-color: #fff;
    transition: all .3s;
    margin-bottom: 14px;
}
/* 视频图片大小 */
.video>div img{
    width: 100%;
    height: 180px;
}
/* 三角形样式 */
.video>div u{
    color: #fff;
}
/* 播放按钮的属性 */
.span{
    width: 35px;
    height: 25px;
    border: 1px solid #fff;
    border-radius: 30px;
    position: relative;
    top: -50px;
    left: 20px;
    transition: all .2s;
    display: block;
}
/* 鼠标悬停在播放按钮上的属性 */
.video>div a:hover>.span{
    background-color: #ff6700;
    border: none;
}

鼠标放在视频的播放按钮上下边的文字会有会跟着上移，并且从手机部分开始后都会有鼠标悬停在div有一瞬间的由灰黑的很快的过程需要仔细看，鼠标移开时也会有一瞬间由灰变黑的过程。

老师，不加双缓冲正常是会闪的吧，但是我按照视频敲的代码运行之后也没闪啊