渡一春季班第五天

其他 2021-03-21 09:42:14 阅读次数: 0

在这里插入图片描述

<!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;
        }
        .clearfix::after{
    
    
            content:"";
            display:block;
            clear:both;
        }

        div.content{
    
    
            cursor:pointer;
            position:relative;
            width:1226px;
            height:460px;
            margin:0 auto;
            background-color:red;;
        }
        div.content>.contentLeft{
    
    
            /* opacity:0; */
            position:absolute;
            width:234px;
            height:420px;
            padding:20px 0px;
            color: #fff;
            background-color:rgba(105,101,101,.6);
            position:absolute;
            z-index:999;
        }
        div.content>.contentLeft>ul{
    
    
            width:234px;
            height:420px;
            /* padding:20px 0px; */
            /* padding-top:20px; */
        }
        div.content>.contentLeft>ul>li{
    
    
            /* position:relative; */
            width:234px;
            height:42px;
            line-height:42px;
        }
        div.content>.contentLeft>ul>li::after{
    
    
            content:">";
            display:inline-block;
            width:16px;
            height:16px;
            font-size:20px;
            position:absolute;
            right:20px;
            color:#e0e0e0
        }
        div.content>.contentLeft>ul>li:hover{
    
    
            background-color:#ff6700;
        }
        div.content>.contentLeft>ul>li>a{
    
    
            color:#fff;
            width:204px;
            height:42px;
            padding-left:30px;
        }
        div.content>.contentRight{
    
    
            /* position: absolute; */
            width:1226px;
            height:460px;
            background-color:lightgoldenrodyellow
            
            
        }






        div.content>.contentRight>img{
    
    
            position: absolute;
            float:left;
            width:1226px;
        }






        div.content>.contentRight>ul{
    
    
            position:absolute;
            bottom: 0px;
            right:30px;
            /* position:relative; */
            width:90px;
            height:50px;
            /* background-color: lightpink; */
        }
        div.content>.contentRight>ul>li{
    
    
            /* position:absolute;
            bottom:0px; */
            /* margin-top:40px; */
            float:left;
            width:10px;
            height:10px;
            border-radius:50%;
            margin: 17px 4px 0;
            box-sizing: border-box;
            border: 2px solid#757575;
            background: rgba(0,0,0,.4);
        }
        div.content>.contentRight>ul>li:hover{
    
    
            background-color:#c0c0c0;
        }
        div.contentRF{
    
    
            overflow:hidden;
            display:none;
            width:992px;
            height:460px;
            background-color:#fff;
            position:absolute;
            top:0px;
            right:0px;
            box-sizing: border-box;
            border:1px solid #e0e0e0;
        }
        div.contentRF>ul{
    
    
            width:992px;
            height:460px;
        }
        div.contentRF>ul>li{
    
    
            float:left;
            width:247.5px;
            height:76px;
        }
        div.contentRF>ul>li:hover{
    
    
            color:#ff6700;
        }
        div.contentRF>ul>li>img{
    
    
            
            margin-left:25px;
            margin-top:22px;
        }
        div.contentRF>ul>li>span{
    
    
            vertical-align:15px;
            margin-left:5px;
            
        }
    </style>
<head>
<body>
    <div class = "content">
        <div class="contentLeft">
            <ul>
                <li class = "clearfix" onmousemove="onmouseover2()" onmouseout="onmouseout2()"><a href="#">手机 电话卡</a></li>
                <li class = "clearfix" onmousemove="onmouseover5()" onmouseout="onmouseout2()"><a href="#">电视 盒子</a></li>
                <li class = "clearfix" onmousemove="onmouseover3()" onmouseout="onmouseout2()"><a href="#">笔记本 显示器</a></li>
                <li class = "clearfix" onmousemove="onmouseover4()" onmouseout="onmouseout2()"><a href="#">家电 插线板</a></li>
                <li class = "clearfix" onmousemove="onmouseover5()" onmouseout="onmouseout2()"><a href="#">出行 穿戴</a></li>
                <li class = "clearfix" onmousemove="onmouseover2()" onmouseout="onmouseout2()"><a href="#">智能 路由器</a></li>
                <li class = "clearfix" onmousemove="onmouseover5()" onmouseout="onmouseout2()"><a href="#">电源 配件</a></li>
                <li class = "clearfix" onmousemove="onmouseover3()" onmouseout="onmouseout2()"><a href="#">健康 儿童</a></li>
                <li class = "clearfix" onmousemove="onmouseover2()" onmouseout="onmouseout2()"><a href="#">耳机 音箱</a></li>
                <li class = "clearfix" onmousemove="onmouseover4()" onmouseout="onmouseout2()"><a href="#">生活 箱包</a></li>
            </ul>
        </div>
        <div class="contentRight clearfix" >
            <img class = "carousel" id = "imagekongzhi" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c7fd00fa846cefaaa73572ea55832854.jpg?w=2452&h=920" alt="">
            <!-- <img class = "carousel" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85fe83512254832000635fb15f048df5.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="">
            <img class = "carousel" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aebcb8f7d8c6ddaa754bfbb701a38cbf.jpeg?thumb=1&w=1226&h=460&f=webp&q=90" alt="">
            <img class = "carousel" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e023dd94c146d0f27f7ae8e98213abff.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="">
            <img class = "carousel" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0f5c49925f3a7d5157b8ac7f4f66b34b.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt=""> -->
            <ul class = "clearfix">
                <li id = "circle" onmousemove="circle()" onmouseout="circleOut()" onclick="circleOver1()"></li>
                <li id = "circle" onclick="circleOver2()"></li>
                <li id = "circle" onclick="circleOver3()"></li>
                <li id = "circle" onclick="circleOver4()"></li>
                <li id = "circle" onclick="circleOver5()"></li>
            </ul>
        </div>
        <div class="contentRF" id = "contentHover1">
            <ul class = "clearfix">
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                <li>
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c89e7b3a3495acaa0a4df271d9da59ea.png?thumb=1&w=40&h=40&f=webp&q=90" alt="">
                    <span>小米10S</span>
                </li>
                
            </ul>
        </div>
    </div>
    <script type = "text/javascript">
        //封装选择ID
            // window.οnlοad=function(){
    
    
                function $(id){
    
    
                    return document.getElementById(id);
                }
        //鼠标进
            function onmouseover2(){
    
    
                // this.style.display="none";
                $("contentHover1").style.display="block";
                $("contentHover1").style.width = "992px"
                $("contentHover1").style.height = "460px"
                // document.getElementById("contentHover1").style.display = "block";
                // this.style.boxShadow=" 0 2px 2px gray";
            }
            function onmouseover3(){
    
    
                $("contentHover1").style.display="block";
                $("contentHover1").style.width = "494px"
                $("contentHover1").style.height = "460px"
            }
            function onmouseover4(){
    
    
                $("contentHover1").style.display="block";
                $("contentHover1").style.width = "992px"
                $("contentHover1").style.height = "148px"
            }
            function onmouseover5(){
    
    
                $("contentHover1").style.display="block";
                $("contentHover1").style.width = "494px"
                $("contentHover1").style.height = "148px"
            }



            function circle(){
    
    
                $("circle").style.backgroundColor = "#e0e0e0";
            }
            function circleOut(){
    
    
                $("circle").style.backgroundColor = "rgba(0,0,0,.4)";
            }


            function circleOver1(){
    
    
                $("imagekongzhi").src = "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c7fd00fa846cefaaa73572ea55832854.jpg?w=2452&h=920";
            }
            function circleOver2(){
    
    
                $("imagekongzhi").src = "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/85fe83512254832000635fb15f048df5.jpg?thumb=1&w=1226&h=460&f=webp&q=90";
            }
            function circleOver3(){
    
    
                $("imagekongzhi").src = "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aebcb8f7d8c6ddaa754bfbb701a38cbf.jpeg?thumb=1&w=1226&h=460&f=webp&q=90";
            }
            function circleOver4(){
    
    
                $("imagekongzhi").src = "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e023dd94c146d0f27f7ae8e98213abff.jpg?thumb=1&w=1226&h=460&f=webp&q=90";
            }
            function circleOver5(){
    
    
                $("imagekongzhi").src = "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0f5c49925f3a7d5157b8ac7f4f66b34b.jpg?thumb=1&w=1226&h=460&f=webp&q=90";
            }
        //鼠标出
            function onmouseout2(){
    
    
                $("contentHover1").style.display="none";
                $("contentHover1").style.width = "992px"
                $("contentHover1").style.height = "460px"
                // this.style.boxShadow='none';
            }


            // document.getElementsByClassName("carousel")[4].style.zIndex = 5;
            // document.getElementsByClassName("carousel")[3].style.zIndex = 5;
            // document.getElementsByClassName("carousel")[2].style.zIndex = 5;
            // document.getElementsByClassName("carousel")[1].style.zIndex = 5;
            // document.getElementsByClassName("carousel")[0].style.zIndex = 5;
            // setInterval(function (){
    
    
            //     // for(var i = 5; i > 0; i--){
    
    
            //         // document.getElementsByClassName("carousel")[4].style.zIndex;
            //         // for(var i = 0; i < 5; i++){
    
    
            //             for(var j = 0; j < 5; j++){
    
    
            //                 document.getElementsByClassName("carousel")[4].style.zIndex+=j;
            //                 document.getElementsByClassName("carousel")[3].style.zIndex+=j;
            //                 document.getElementsByClassName("carousel")[2].style.zIndex+=j;
            //                 document.getElementsByClassName("carousel")[1].style.zIndex+=j;
            //                 document.getElementsByClassName("carousel")[0].style.zIndex+=j;
            //             }
            //         // }
            //     // }
            // }, 1000);
    </script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_48727085/article/details/114702215
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022