练习——制作懂车帝-视频播放页面(导航栏定位布局+内容div布局且浮动)

本文链接：https://blog.csdn.net/weixin_48796690/article/details/127230597

一、代码：

<!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>Document</title>
</head><!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>
</head>
<style>
    * {
   
        margin: 0;
        padding: 0px;
    }

    nav {
   
        height: 68px;
        background-color: #fff;
        position: sticky;
        top: 0px;
        padding-top: 10px;
        box-sizing: border-box;
    }

    ul {
   
        /* background-color: greenyellow; */
        list-style: none;

        /* 当内容超出容器时，多余的内容隐藏，在这里用他的原因，是为了触发BFC环境 */
        overflow: hidden;
        padding-left: 60px;
    }

    ul li {
   
        float: left;
        margin-left: 30px;
    }

    a {
   
        text-decoration: none;
        color: initial;
        height: 46px;
        display: inline-block;
        line-height: 46px;
    }

   
    .input-li {
   
        margin-left: 2px;
        width: 639px;
        height: 40px;
        border: 2px solid #ffcc32;

    }
    
    .input-li input {
   
        outline: none;
        width:88%;
        height: 40px;
        border: none;
        
    }

    .button {
   
        width: 12%;
        height: 40px;
        background-color: #ffcc32;
        border:none;
        background-image: none;
    }
    
    a:hover {
   
        color: red;
    }

    li img:hover {
   
        /* 改变鼠标的形状,pointer是手 */
        cursor: pointer
    }

    /* placeholder 可以改变输入框中的提示内容的样式 */
    ::placeholder{
   
        color: rgba(202, 200, 200, 6);
    }

    
    body {
   
        background-color: #f7f8fc;
        font-size: 14px;
        /*字符之间的距离 */
        letter-spacing: 3px;
        /* 单词与单词之间的距离 */
        word-spacing: 20px;

    }

    main {
   
        width: 90%;
        height:704px;
        /* 水平居中 */
        margin: auto;
        padding-top: 30px; 
    }

    .video-container {
   
        width: 100%