在看到制作精美的网页时,都有会发出感叹的经验。在浏览网页时对于不同的网站,有的网站会使我们产生赏心悦目的使用体验,而有的网站则很难给人留下深刻的印象。

对于相同的技术来说,在网页制作这个层面上更加注重的是设计天赋和灵感。

现在有两个设计师技术水平相当。但是一个设计师在美术造诣上更加具有天赋,而且善于设计。而另一位设计师却缺乏这样的资质和能力。两位设计师设计出的网页会有天差地别的效果。

你可能会对第一位设计师的作品十分欣赏,而另一位设计师的作品却不能给你留下任何深刻印象。

这跟商品设计是一个道理,商品是讲求设计的。你经常体验到商品经过精心设计后,在使用者中产生了风靡效果,成为了fashionable的明星商品。而同类商品虽然技术细节相同,但是在销售过程中却没有产生相同的效果。

区别就在于风靡商品的设计师在进行商品设计时将自己的天赋和灵感注入到商品的每个细节中,这和设计师的价值取向,对美的看法,设计师的品格相辅相成的。

如果一个人举止粗鲁,思想空乏。他所表达的内容和思想一定不会让你产生什么兴趣~~~哈哈哈哈,这个是必然的。

那么,不聊那么多,上一个某汽车网站的code。

来!上code~~~~

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            #div0{
                /*border : 1px solid brown;*/
                width: 100%;
                height: 1900px;
            }
            #div1{
                /*border : 1px solid brown;*/
                width: 1200px;
                height: 170px;
                position: relative;
                margin: auto;
                text-align: center;
                font-size: 25px;
                font-weight: 600;
                text-align: center;
                padding-top: 20px;
            }
            #table1{
                list-style: none;
                position: relative;
                margin: auto;
                text-align: center;
            }
            #hr1{
                position: relative;
                margin: auto;
            }
            #hr2{
                position: relative;
                margin: auto;
                margin-top: 20px;
                height: 1px;
                background-color: burlywood;
            }
            #sp1{
                font-size: 25px;
                position: relative;
                margin: auto;
                display: inline-block;
                color: darkgreen;
                font-family: icomoon;
            }
            #sp2{
                font-size: 6px;
                position: relative;
                margin: auto;
                display: inline-block;
                color: darkgreen;
                font-family: icomoon;
            }
            #table2{
                position: relative;
                top: -4px;
                height: 55px;
                width: 1200px;
                font-size: 15px;
                color: saddlebrown;
                /*border: 1px solid black;*/
            }
            #table2 td{
                position: relative;
                line-height: 70px;
                /*border: 1px solid black;*/
            }
            /*#table2 td:hover{
                color: #335F7D
            }*/
            .td{
                /*border: 1px solid black;*/
                width: 170px;
                text-align: center;
            }
            #td-first{
                width: 200px;
                text-align: left;
            }
            #td-last
            {
                text-align: center;
            }
            #table2-div1{
                position: relative;
                width: 155px;
                height: 80px;
                left: -2px;
                margin-top: -2px;
                border-top: 6px solid transparent;
                transition: all 0.5s ease-in;
                /*border: 1px solid black;*/
            }
            #table2-div2{
                width: 45px;
                height: 80px;
                /*border: 1px solid green;*/
                position: relative;
                left: 60px;
                margin-top: -2px;
                border-top: 6px solid transparent;
                transition: all 0.5s ease-in;
            }
            #table2-div3{
                width: 75px;
                height: 80px;
                /*border: 1px solid green;*/
                position: relative;
                left: 45px;
                margin-top: -2px;
                border-top: 6px solid transparent;
                transition: all 0.5s ease-in;
            }
            #table2-div4{
                width: 110px;
                height: 80px;
                /*border: 1px solid green;*/
                position: relative;
                left: 30px;
                margin-top: -2px;
                border-top: 6px solid transparent;
                transition: all 0.5s ease-in;
            }
            #table2-div5{
                width: 45px;
                height: 80px;
                /*border: 1px solid green;*/
                position: relative;
                left: 60px;
                margin-top: -2px;
                border-top: 6px solid transparent;
                transition: all 0.5s ease-in;
            }
            #table2-div6{
                width: 75px;
                height: 80px;
                /*border: 1px solid green;*/
                position: relative;
                left: 50px;
                margin-top: -2px;
                border-top: 6px solid transparent;
                transition: all 0.5s ease-in;
            }
            #table2-div7{
                width: 70px;
                height: 80px;
                /*border: 1px solid green;*/
                position: relative;
                left: 65px;
                margin-top: -2px;
                border-top: 6px solid transparent;
                transition: all 0.5s ease-in;
            }
            #table2 div:hover{
                border-top: 6px solid darkgreen;
                color: darkgreen;
                cursor: pointer;
            }
            /*listdiv1列表样式*/
            #listdiv1{
                height: 550px;
                width: 100%;
                background-color: burlywood;
                position: relative;
                display: none;
                /*height: 0px;*/
                /*top: -1px;*/
                /*border: 1px solid brown;*/
            }
            #listdiv1-ul{
                position: relative;
                top: 5px;
                /*border-bottom: 75px;*/
                left: 265px;
                list-style: none;
                color: saddlebrown;
            }
            #listdiv1-ul li{
                width: 360px;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px solid white;
                border-top: 5px solid transparent;
                margin-bottom: -2px;
            }
            #listdiv1-ul-li7{
                width: 400px;
            }
            #listdiv1-ul li:not(:first-child):hover{
                width: 360px;
                /*height: 50px;
                line-height: 50px;*/
                border-top: 5px solid darkgreen;
                color: darkgreen;
            }
            /*#listdiv1-ul-li-last{
                border-bottom: 1px solid white;
            }
            #listdiv1-ul-li-last:hover{
                border-top: 3px solid #335F7D;
            }*/
            
            /*第一个子有序列表样式*/
            #listdiv1-sublistdiv1{
                position: relative;
                margin: auto;
                top: -378px;
                /*border-bottom: 75px;*/
                left: 360px;
                list-style: none;
                background-color: burlywood;
                color: saddlebrown;
                /*border: 1px solid brown;*/
                width: 600px;
                height: 375px;
                display: none;
            }
            #listdiv1-sublistdiv1-ul1{
                position: relative;
                list-style: none;
                left: 20px;

            }
            #listdiv1-sublistdiv1-ul1 li{
                width: 360px;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px solid white;
                border-top: 5px solid transparent;
                margin-bottom: -2px;
            }
            #listdiv1-sublistdiv1-ul1 li:not(:first-child):hover
            {
                /*width: 360px;
                height: 50px;
                line-height: 50px;*/
                border-top: 5px solid darkgreen;
                color: darkgreen;
            }
            /*#listdiv1{
                display: none;
            }
            #listdiv1-sublistdiv1{
                display: none;
            }*/
            
            #listdiv1-sublistdiv2{
                position: relative;
                margin: auto;
                top: -486px;
                /*border-bottom: 75px;*/
                left: 360px;
                list-style: none;
                background-color: burlywood;
                color: saddlebrown;
                /*border: 1px solid brown;*/
                width: 600px;
                height: 485px;
                display: none;
            }
            #listdiv1-sublistdiv2-ul1{
                position: relative;
                list-style: none;
                left: 20px;
            }
            #listdiv1-sublistdiv2-ul1 li{
                width: 360px;
                height: 50px;
                line-height: 50px;
                border-bottom: 1px solid white;
                border-top: 5px solid transparent;
            }
            #listdiv1-sublistdiv2-ul1 li:not(:first-child):hover
            {
                width: 360px;
                height: 50px;
                line-height: 50px;
                border-top: 5px solid darkgreen;
                color: darkgreen;
            }
            
            
            
            /*listdiv2列表样式*/
            #listdiv2{
                /*display: none;*/
                height: 770px;
                width: 100%;
                background-color: burlywood;
                position: relative;
                display: none;
            }
            #listdiv2-ul{
                position: relative;
                top: 5px;
                /*border-bottom: 75px;*/
                left: 265px;
                list-style: none;
                color: saddlebrown;
            }
            #listdiv2-ul li{
                width: 360px;
                height: 50px;
                line-height: 50px;
                margin-bottom: -2px;
                border-bottom: 1px solid white;
                border-top: 5px solid transparent;
            }
            #listdiv2-ul-li7{
                width: 400px;
            }
            #listdiv2-ul li:not(:first-child):hover{
                width: 360px;
                height: 50px;
                line-height: 50px;
                border-top: 5px solid darkgreen;
                color: darkgreen;
            }
            
            
            /*listdiv3列表样式*/
            #listdiv3{
                /*display: none;*/
                height: 285px;
                width: 100%;
                background-color: burlywood;
                position: relative;
                display: none;
            }
            #listdiv3-ul{
                position: relative;
                top: 5px;
                /*border-bottom: 75px;*/
                left: 265px;
                list-style: none;
                color: saddlebrown;
            }
            #listdiv3-ul li{
                width: 360px;
                height: 50px;
                line-height: 50px;
                margin-bottom: -2px;
                border-bottom: 1px solid white;
                border-top: 5px solid transparent;
            }
            #listdiv3-ul-li7{
                width: 400px;
            }
            #listdiv3-ul li:not(:first-child):hover{
                width: 360px;
                height: 50px;
                line-height: 50px;
                border-top: 5px solid darkgreen;
                color: darkgreen;
            }
            
            /*listdiv4列表样式*/
            #listdiv4{
                /*display: none;*/
                height: 440px;
                width: 100%;
                background-color: burlywood;
                position: relative;
                display: none;
            }
            #listdiv4-ul{
                position: relative;
                top: 5px;
                /*border-bottom: 75px;*/
                left: 265px;
                list-style: none;
                color: saddlebrown;
            }
            #listdiv4-ul li{
                width: 360px;
                height: 50px;
                line-height: 50px;
                margin-bottom: -2px;
                border-bottom: 1px solid white;
                border-top: 5px solid transparent;
            }
            #listdiv4-ul-li7{
                width: 400px;
            }
            #listdiv4-ul li:not(:first-child):hover{
                width: 360px;
                height: 50px;
                line-height: 50px;
                border-top: 5px solid darkgreen;
                color: darkgreen;
            }
            #div-lun3{
                position: relative;
                /*border: 1px solid brown;*/
                /*width: 100%;*/
                height: 543px;
                display: flex;
                overflow: hidden;
                /*border: 1px solid black;*/
                /*right: -1950px;*/
                /*transition: all 3s ease-in;*/
            }
            .div-lun3-img{
                position: relative;
                left: -1920px;
                transition: all 0.5s ease-in;
                object-fit: cover;
            }
            #div-lun3-button-div{
                position: relative;
                top: -295px;
            }
            #div-lun3-button2{
                position: relative;
                left: 1605px;
            }
            #div-lun3-button-div img:hover{
                cursor: pointer;
            }
            
            
        </style>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script>
            $(function(){
                //下拉列表
                $("#table2-div1").mouseover(function(){
                    
                    $("#listdiv1").stop();
                    $("#listdiv1").slideDown(250);
                })
                $("#table2-div1").mouseleave(function(){
                    $("#listdiv1").stop();
                    $("#listdiv1").slideUp(250);
                })
                $("#listdiv1").mouseover(function(){
                    $("#listdiv1").stop();
                    $("#listdiv1").slideDown(250);
                })
                $("#listdiv1").mouseleave(function(){
                    $("#listdiv1").stop();
                    $("#listdiv1").slideUp(250);
                })
                
                //诚信,合规与风险鼠标移入事件
                $("#listdiv1-ul-li7").mouseover(function(){
                    $("#listdiv1-sublistdiv1").stop();
                    $("#listdiv1-sublistdiv1").show(250);
                })
            
                //诚信,合规与风险鼠标移入事件
                $("#listdiv1-sublistdiv1").mouseleave(function(){
                    $("#listdiv1-sublistdiv1").stop();
                    $("#listdiv1-sublistdiv1").hide(250);
                })
                //诚信,合规与风险鼠标移出事件
                $("#listdiv1-ul-li7").mouseleave(function(){
                    $("#listdiv1-sublistdiv1").stop();
                    $("#listdiv1-sublistdiv1").hide(250);
                })
                
                //工厂鼠标移入事件
                $("#listdiv1-ul-li-last").mouseover(function(){
                    $("#listdiv1-sublistdiv2").stop();
                    $("#listdiv1-sublistdiv2").show(250);
                })
            
                //工厂鼠标移入事件
                $("#listdiv1-sublistdiv2").mouseleave(function(){
                    $("#listdiv1-sublistdiv2").stop();
                    $("#listdiv1-sublistdiv2").hide(250);
                })
                //工厂鼠标移入事件
                $("#listdiv1-ul-li-last").mouseleave(function(){
                    $("#listdiv1-sublistdiv2").stop();
                    $("#listdiv1-sublistdiv2").hide(250);
                })
                    
                $("#table2-div2").mouseover(function(){
                    $("#listdiv2").stop();
                    $("#listdiv2").slideDown(250);
                })
                $("#table2-div2").mouseleave(function(){
                    $("#listdiv2").stop();
                    $("#listdiv2").slideUp(250);
                })
                $("#listdiv2").mouseover(function(){
                    $("#listdiv2").slideDown(250);
                    $("#listdiv2").stop();
                })
                $("#listdiv2").mouseleave(function(){
                    $("#listdiv2").stop();
                    $("#listdiv2").slideUp(250);
                })
                
                $("#table2-div3").mouseover(function(){
                    $("#listdiv3").stop();
                    $("#listdiv3").slideDown(250);
                })
                $("#table2-div3").mouseleave(function(){
                    $("#listdiv3").stop();
                    $("#listdiv3").slideUp(250);
                })
                $("#listdiv3").mouseover(function(){
                    $("#listdiv3").stop();
                    $("#listdiv3").slideDown(250);
                    
                })
                $("#listdiv3").mouseleave(function(){
                    $("#listdiv3").stop();
                    $("#listdiv3").slideUp(250);
                })
                
                $("#table2-div4").mouseover(function(){
                    $("#listdiv4").stop();
                    $("#listdiv4").slideDown(250);
                })
                $("#table2-div4").mouseleave(function(){
                    $("#listdiv4").stop();
                    $("#listdiv4").slideUp(250);
                })
                $("#listdiv4").mouseover(function(){
                    $("#listdiv4").stop();
                    $("#listdiv4").slideDown(250);
                    
                })
                $("#listdiv4").mouseleave(function(){
                    $("#listdiv4").stop();
                    $("#listdiv4").slideUp(250);
                })
                
                $("#div-lun3-button1").mouseover(function(){
                    $("#div-lun3-button1").attr("src","img/icon_19.png");
                })
                $("#div-lun3-button1").mouseleave(function(){
                    $("#div-lun3-button1").attr("src","img/icon_17.png");
                })
                $("#div-lun3-button2").mouseover(function(){
                    $("#div-lun3-button2").attr("src","img/icon_18.png");
                })
                $("#div-lun3-button2").mouseleave(function(){
                    $("#div-lun3-button2").attr("src","img/icon_16.png");
                })
                $("#div-lun3-button1").click(function(){
                    var index = -1;
                    lun(index);
                })
                $("#div-lun3-button2").click(function(){
                    var index = 1;
                    lun(index);
                })
                //轮播图
                var len = 0;                
//                function lun(){
//                    var imgs=["img/20211216172254.ashx","img/img/20220620193934.ashx"];
//                    var index = 0;
//                    while(index < 2){
//                        index ++;
//                        $(".div-lun3-img").after(${imgs[0]});
//                        $(".div-lun3-img").before(${imgs[1]});
//                    }
//
//                    
//                }
                function lun(index){
                    var length = 1920;
                    length = index*length;
                    len = len + length;
                    if(len > 0){
                        len = -1920;
                    }else if(len < -2000){
                        len = 0;
                    }
                    let movelength = len + "px";
//                    alert(len);
//                    document.querySelector('.div-lun3-img').style.left=length;
//                    var url = 
//                    document.querySelector(".div-lun3-img").style.overflow="auto";

                    let d = document.querySelectorAll(".div-lun3-img");
                    d.forEach(function(value,index){
                        d[index].style.left=movelength;
                    })
                }
                //定时器
                ss = setInterval(function(){
//                    alert("cc");
                    lun(1);
                },2000);
            })
//            window.onload=function(){
//            //大众汽车集团(中国)鼠标移入事件
//            document.getElementById("table2-div1").onmouseover=function(){
//                let div = document.getElementById("listdiv1");
//                div.style.display="block";
////                alert("cc")
//            }
//            //大众汽车集团(中国)鼠标移出事件
//            document.getElementById("table2-div1").onmouseleave=function(){
//                let div = document.getElementById("listdiv1");
//                div.style.display="none";
////                alert("cc")
//            }
//            
//            //大众汽车集团(中国)二级菜单鼠标移入事件
//            document.getElementById("listdiv1").onmouseover=function(){
//                let div = document.getElementById("listdiv1");
//                div.style.display="block";
////                alert("cc")
//            }
//            //大众汽车集团(中国)二级菜单鼠标移出事件
//            document.getElementById("listdiv1").onmouseleave=function(){
//                let div = document.getElementById("listdiv1");
//                div.style.display="none";
////                alert("cc")
//            }
//            
//            //诚信,合规与风险鼠标移入事件
//            document.getElementById("listdiv1-ul-li7").onmouseover=function(){
//                let div = document.getElementById("listdiv1-sublistdiv1");
//                div.style.display="block";
//            }
//            
//            //诚信,合规与风险鼠标移入事件
//            document.getElementById("listdiv1-sublistdiv1").onmouseover=function(){
//                let div = document.getElementById("listdiv1-sublistdiv1");
//                div.style.display="block";
//            }
//            
//            //诚信,合规与风险鼠标移出事件
//            document.getElementById("listdiv1-ul-li7").onmouseleave=function(){
//                let div = document.getElementById("listdiv1-sublistdiv1");
//                div.style.display="none";
//            }
//            
//            //工厂鼠标移入事件
//            document.getElementById("listdiv1-ul-li-last").onmouseover=function(){
//                let div = document.getElementById("listdiv1-sublistdiv2");
//                div.style.display="block";
//            }
//            
//            //工厂鼠标移入事件
//            document.getElementById("listdiv1-sublistdiv2").onmouseover=function(){
//                let div = document.getElementById("listdiv1-sublistdiv2");
//                div.style.display="block";
//            }
//            
//            //工厂鼠标移出事件
//            document.getElementById("listdiv1-ul-li-last").onmouseleave=function(){
//                let div = document.getElementById("listdiv1-sublistdiv2");
//                div.style.display="none";
//            }
//            
//            
//            
//            //品牌鼠标移入事件
//            document.getElementById("table2-div2").onmouseover=function(){
//                let div = document.getElementById("listdiv2");
//                div.style.display="block";
//            }
//            //品牌鼠标移出事件
//            document.getElementById("table2-div2").onmouseleave=function(){
//                let div = document.getElementById("listdiv2");
//                div.style.display="none";
//            }
//            
//            //品牌 二级菜单鼠标移入事件
//            document.getElementById("listdiv2").onmouseover=function(){
//                let div = document.getElementById("listdiv2");
//                div.style.display="block";
//            }
//            //品牌 二级菜单鼠标移出事件
//            document.getElementById("listdiv2").onmouseleave=function(){
//                let div = document.getElementById("listdiv2");
//                div.style.display="none";
//            }
//            
//            //合作伙伴鼠标移入事件
//            document.getElementById("table2-div3").onmouseover=function(){
//                let div = document.getElementById("listdiv3");
//                div.style.display="block";
//            }
//            //合作伙伴鼠标移出事件
//            document.getElementById("table2-div3").onmouseleave=function(){
//                let div = document.getElementById("listdiv3");
//                div.style.display="none";
//            }
//            
//            //合作伙伴 二级菜单鼠标移入事件
//            document.getElementById("listdiv3").onmouseover=function(){
//                let div = document.getElementById("listdiv3");
//                div.style.display="block";
//            }
//            //合作伙伴 二级菜单鼠标移出事件
//            document.getElementById("listdiv3").onmouseleave=function(){
//                let div = document.getElementById("listdiv3");
//                div.style.display="none";
//            }
//            
//            //企业社会责任鼠标移入事件
//            document.getElementById("table2-div4").onmouseover=function(){
//                let div = document.getElementById("listdiv4");
//                div.style.display="block";
//            }
//            //企业社会责任鼠标移出事件
//            document.getElementById("table2-div4").onmouseleave=function(){
//                let div = document.getElementById("listdiv4");
//                div.style.display="none";
//            }
//            
//            //企业社会责任 二级菜单鼠标移入事件
//            document.getElementById("listdiv4").onmouseover=function(){
//                let div = document.getElementById("listdiv4");
//                div.style.display="block";
//            }
//            //企业社会责任 二级菜单鼠标移出事件
//            document.getElementById("listdiv4").onmouseleave=function(){
//                let div = document.getElementById("listdiv4");
//                div.style.display="none";
//            }
//            
//            }
        </script>
    </head>
    <body>
        <div id="div0">
        <div id="div1">
            <table id="table1">
                <!--<img src="img/VWK_Logomaster_4C_S.ashx"/>-->
                <tr><td><span id="sp1">VOLKSWAGEN</span></td></tr>
                <tr><td><span id="sp2">GROUP CHINA</span></td></tr>
<!--                <tr><td></td></tr>-->
            </table>
            <hr id="hr2"></hr>
            <table id="table2">
                <tr>
                    <td id="td-first"><div id="table2-div1">大众汽车集团(中国)    </div></td>
                    <td class="td"><div id="table2-div2">品牌</div></td>
                    <td class="td"><div id="table2-div3">合作伙伴</div></td>
                    <td class="td"><div id="table2-div4">企业社会责任</div></td>
                    <td class="td"><div id="table2-div5">职业</div></td>
                    <td class="td"><div id="table2-div6">媒体中心</div></td>
                    <td id="td-last"><div id="table2-div7">社交平台</div></td>
                </tr>
            </table>
        </div>
        <div id="listdiv1">
            <ul id="listdiv1-ul">
                <li></li>
                <li>关于VGC</li>
                <li>集团高管</li>
                <li>新闻</li>
                <li>历年大事件</li>
                <li>所获奖项</li>
                <li id="listdiv1-ul-li7">诚信,合规与风险管理            
                    <div id="listdiv1-sublistdiv1">
                        <ul id="listdiv1-sublistdiv1-ul1">
                            <li></li>
                            <li>诚信</li>
                            <li>合规</li>
                            <li>行为准则</li>
                            <li>举报系统</li>
                        </ul>
                    </div>
                </li>
                <li>环境</li>
                <li id="listdiv1-ul-li-last">工厂
                    <div id="listdiv1-sublistdiv2">
                        <ul id="listdiv1-sublistdiv2-ul1">
                        <li></li>
                        <li>上汽大众与工厂</li>
                        <li>一起-大众与工厂</li>
                        <li>零部件与动力总成工厂</li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
        <div id="listdiv2">
            <ul id="listdiv2-ul">
                <li></li>
                <li>大众汽车</li>
                <li>斯柯达</li>
                <li>捷达</li>
                <li>奥迪</li>
                <li>兰博基尼</li>
                <li>宾利</li>
                <li>保时捷</li>
                <li>宝马</li>
                <li>斯堪尼亚</li>
                <li>曼恩</li>
                <li>大众汽车金融服务</li>
                <li>Mobility Asia</li>
            </ul>
        </div>
        <div id="listdiv3">
            <ul id="listdiv3-ul">
                <li></li>
                <li>上汽大众</li>
                <li>一起-大众</li>
                <li>大众辽宁</li>
            </ul>
        </div>
        <div id="listdiv4">
            <ul id="listdiv4-ul">
                <li></li>
                <li>低碳未来</li>
                <li>教育</li>
                <li>经济赋能</li>
                <li>志愿者</li>
                <li>社会关爱</li>
                <li>集团全球责任报告</li>
            </ul>
        </div>
        <div id="div-lun3">
            <img class="div-lun3-img" id="div-lun3-img0" src="img/20220620193934.ashx"/>
            <img class="div-lun3-img" id="div-lun3-img1" src="img/20211216172254.ashx"/>
            <img class="div-lun3-img" id="div-lun3-img2" src="img/20220620193934.ashx"/>
            <img class="div-lun3-img" id="div-lun3-img3" src="img/20211216172254.ashx"/>
            
        </div>
        <div id="div-lun3-button-div">
            <img id="div-lun3-button1" src="img/icon_17.png"/>
            <img id="div-lun3-button2" src="img/icon_16.png"/>
        </div>
        </div>
    </body>
</html>

更多推荐