渡一春季班第四天

在这里插入图片描述
<!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>
    <style>
        /*外部下载字体*/
        @font-face {
    
    
        font-family: 'iconfont';
        src: url('iconfont.eot');
        src: url('iconfont.eot?#iefix') format('embedded-opentype'),
        url('iconfont.woff2') format('woff2'),
        url('iconfont.woff') format('woff'),
        url('iconfont.ttf') format('truetype'),
        url('iconfont.svg#iconfont') format('svg');
}
        .iconfont {
    
    
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        }
        *{
    
    
            margin:0px;
            padding:0px;
        }
        ul{
    
    
            list-style-type:none;
        }
        a{
    
    
            text-decoration:none;
        }
        body{
    
    
            /* background-color:rgba(128, 128, 128, 0.089);
             */
             background-color:#fff;
            font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
        }
        .fl{
    
    
            float:left;
        }

        div.content{
    
    
            width:1226px;
            height:100px;
            background-color:#fff;
            margin:0 auto;
        }
        div.content::after{
    
    
            content:"";
            display:block;
            clear:both;
        }
        .content>.logo{
    
    
            width:62px;
            height:55px;
            /* background-color:red; */
            margin-top:22px;
        }
        .content>.logo>a{
    
    
            width:55px;
            height:55px;
            display:inline-block;
            text-indent:55px;
            white-space:nowrap;
            overflow:hidden;
            /* 
                height:0px;
                padding-top:55px;
                overflow:hidden;
             */
            background-image:url(logo.png);
        }
        .content>.nav{
    
    
            width:850px;
            height:100px;
            /* background-color:blue; */
        }
        .content>.nav>ul{
    
    
            margin-left:172px;
            height:100px;
            line-height:100px;
            /* background-color:red; */
        }
        .content>.nav>ul::after{
    
    
            content:"";
            display:block;
            clear:both;
        }
        .content>.nav>ul>li{
    
    
            float:left;
            font-size:16px;
            margin:0 10px;
            /* height:100px;
            width:150px; */
            /* background-color:red; */
            height:1px;
        }
        .content>.nav>ul>li>a{
    
    
            color:#333;
        }
        .content>.nav>ul>li>a:hover{
    
    
            color:#ff6600;
        }
        .content>.ser{
    
    
            width:296px;
            height:50px;
            margin-top:25px;
            background-color:lawngreen
        }
        .content>.ser>form{
    
    
            position:relative;
            width:296px;
            height:50px;
        }
        .content>.ser>form>input[type = "text"]{
    
    
            width:296px;
            height:50px;
            color:#757575;
            text-indent:1em;   
            box-sizing:border-box;
            border:1px solid #c0c0c0;
        }
        .content>.ser>form>input[type = "text"]::after{
    
    
            content:"";
            display:block;
            clear:both;
        }
        .content>.ser>form>button{
    
    
            position:absolute;
            right:0px;
            width:52px;
            height:50px;
            box-sizing:border-box;
            background-color:#fff;
            color:#333333;
            font-weight:bold;
            /* outline:none; */
            /* border:0px; */
            border:1px solid #c0c0c0;
        }
        .content>.ser>form>button:hover{
    
    
            background-color:#ff6600;
            color:#fff;
        }
        .contentHover{
    
    
            display:none;
            width:1226px;
            height:230px;
            background-color:#fff;
            margin:0 auto;
            border-top:1px solid #c0c0c0;
        }
        .contentHover>ul::after{
    
    
            content:"";
            display:block;
            clear:both;
        }
        .contentHover>ul{
    
    
            width:1226px;
            height:230px;
        }
        .contentHover>ul>li{
    
    
            cursor:pointer;
            float:left;
            width:203.5px;
            height:231px;
            /* background-color:lightcoral */
            text-align:center;
        }
        .verticalLine{
    
    
            margin-top:40px!important;
            height:100px!important;
            width:1px!important;
            background-color:#c0c0c0!important;
            /* 77*102 */
        }
        .contentHover>ul>li>.img{
    
    
            width:161px;
            height:111px;
            margin:0 auto;
            /* background-color:red; */
            margin-top:40px;
        }
        .contentHover>ul>li>.img>img{
    
    
            width:161px;
            height:111px;
        } 
        .contentHover>ul>li>.model{
    
    
            margin-top:17px;
        }
        .contentHover>ul>li>.model>a{
    
    
            color:#333333;
        }
        .contentHover>ul>li>.price>a{
    
    
            color:#ff6600;
        }        
    </style>
</head>
<body>
    <div class="content">
        <div class="logo fl">
            <a href="#">小米官网</a>
        </div>
        <div class="nav fl">
            <ul>
                <li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">小米手机</a></li>
                <li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">Redmi 红米</a></li>
                <li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">电视</a></li>
                <li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">笔记本</a></li>
                <li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">家电</a></li>
                <li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">路由器</a></li>
                <li onmouseover = "onmouseover2()" onmouseout = "onmouseout2()"><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>
        </div>
        <div class="ser fl">
            <form method = "GET" action="">
                <input type="text" value = "小米10S 新品爆料"> 
                <button class = "iconfont">&#xe65a;</button>
            </form>
        </div>
    </div>
    <div id = "contentHover1" class = "contentHover">
        <ul>
            <li>
                <div class = "img">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f9149ef3ba2c9025a4a21c98ae793808.png?thumb=1&w=160&h=110&f=webp&q=90" alt="">
                </div>
                <div class = "model"><a href="#">小米10S</a></div>
                <div class="price"><a href="#">3299元起</a></div>
            </li>
            <li class = "verticalLine"></li>
            <li>
                <div class = "img">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/963679eaf3937351e154600ab3448460.png?thumb=1&w=160&h=110&f=webp&q=90" alt="">
                </div>
                <div class = "model"><a href="#">小米11</a></div>
                <div class="price"><a href="#">3999元起</a></div>
            </li>
            <li class = "verticalLine"></li>
            <li>
                <div class = "img">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/963679eaf3937351e154600ab3448460.png?thumb=1&w=160&h=110&f=webp&q=90" alt="">
                </div>
                <div class = "model"><a href="#">小米10至尊纪念版</a></div>
                <div class="price"><a href="#">5299元起</a></div>
            </li>
            <li class = "verticalLine"></li>
            <li>
                <div class = "img">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb=1&w=160&h=110&f=webp&q=90" alt="">
                </div>
                <div class = "model"><a href="#">小米10</a></div>
                <div class="price"><a href="#">3399元起</a></div>
            </li>
            <li class = "verticalLine"></li>
            <li>
                <div class = "img">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb=1&w=160&h=110&f=webp&q=90" alt="">
                </div>
                <div class = "model"><a href="#">小米10 青春版 5G</a></div>
                <div class="price"><a href="#">2099元起</a></div>
            </li>
            <li class = "verticalLine"></li>
            <li>
                <div class = "img">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb=1&w=160&h=110&f=webp&q=90" alt="">
                </div>
                <div class = "model"><a href="#">小米MIX Alpha</a></div>
                <div class="price"><a href="#">19999元起</a></div>
            </li>
        </ul>
    </div>
    <script type = "text/javascript">
        //封装选择ID
            // window.οnlοad=function(){
    
    
                function $(id){
    
    
                    return document.getElementById(id);
                }
                function $2(class2){
    
    
                    return document.getElementsByClassName(class2)[0];
                }
        //鼠标进
            function onmouseover2(){
    
    
                // this.style.display="none";
                $("contentHover1").style.display="block";
                // document.getElementById("contentHover1").style.display = "block";
                this.style.boxShadow=" 0 2px 2px gray";
            }
        //鼠标出
            function onmouseout2(){
    
    
                $("contentHover1").style.display="none";
                this.style.boxShadow='none';
            }
        // }
    </script>
</body>
</html>
渡一春季班第四天

猜你喜欢
