宁德商城网站建设,临沂网站建设微信,工业设计展会2023,百度文库首页官网前端实战的第一天
小米官网 目前效果#xff1a; 实现功能#xff1a; 导航栏#xff0c;首页切换#xff0c;无淡入淡出效果的轮播图#xff0c;搜索功能#xff0c;产品展示栏下滑 代码#xff08;便于记录#xff0c;将js、css和html糅合在了一起#xff09; 实现功能 导航栏首页切换无淡入淡出效果的轮播图搜索功能产品展示栏下滑 代码便于记录将js、css和html糅合在了一起
!DOCTYPE html
htmlheadmeta charsetutf-8title小米商城/titlestyle typetext/cssbody{padding: 0;margin: 0;background-color: white;}#img01{width: 100%;}#nav011{list-style-type: none;margin: -4px;font-size: 12px;width: 700px;height: 40px;overflow: hidden;}#userinfo011{list-style-type: none;margin: -4px;font-size: 12px;width: 140px;height: 40px;overflow: hidden;position: relative;left: 40px;z-index: 30;background-color: #333333;}#div01{background-color: #333333;height: 40px;}#nav011li, #userinfo011li{float: left;margin-left: 5px;color: #b0b0b0;margin-top: 16px;}#nav01{margin-left: 100px;float: left;}.open{color: white;margin-left: 5px;margin-top: 14px;float: left;color: #424242;}#userinfo{margin-left: 1050px;width: :;px;position: relative;}.iconfont{position: relative;top: 10px;left: 220px;}#cartword{font-size: 12px;position: relative;top: 9px;left: 220px;}#carlist{background-color: #3498DB;width: 150px;height: 100px;}#cart{background-color: #424242;width: 350px;height: 40px;margin-left: 190px;position: relative;top: -35px;color: #b0b0b0;right: 150px;z-index: 10;transition: background-color .3s,height .3s;overflow: hidden;}#cart:hover{background-color: white;color: red;height: 120px;}#userinfo011li{margin-top: 12px;}#carli{position: relative;top: 50px;left: 90px;font-size: 12px;}#h{margin-top:24px;margin-left: 145px;width: 1500px;height: 80px;}#h1{background-color: #FF6700;width: 55px;height: 55px;margin: 0;overflow:hidden ;float: left;}#a01{display: inline-block;width: 55px;height: 55px;background-color: #FF6700;}#a02{display: inline-block;background-color: #FF6700;width: 55px;height: 55px;text-decoration: none;color: white;font-size: 20px;position: relative;top: -34.3px;margin-left: -110px;}#a011,#a012{width: 55px;height: 55px;}#s01{position: relative;top: 15px;left: 7px;}#h1:hover img{ /* css无法做到返回时也缓慢使用js*/transform: translate(100px);transition-duration: .3s;}#h1:hover a{ /* css无法做到返回时也缓慢使用js*/transform: translate(53px);transition-duration: .3s;}#h2{margin-left: 15px;float: left;}.ul2li{float: left;list-style-type: none;height: 50px;}.ul2 a{display: inline-block;text-decoration: none;color: black;height: 50px;margin-left: 18px;}.ul2lia:hover{color: #FF6700;}.ul2 a{list-style-type: none;text-decoration: none;color: black;transition: color .1s;height: 70px;}.ul2{margin-left: -40px;float: left;}#h3{width: 70%;margin: 0;overflow: hidden;}#inp{margin-left: 120px;width:245px;height: 50px;padding: 0 10px;outline: none;}#sub{width: 52px;height: 53px;padding: 1px 6px;background-color: white;outline: none;border: solid 1px grey;margin-left: -6px;position: relative;top: 1.3px;transition: color .3s,background-color .3s;z-index: 0;}#sub:hover{color: white;background-color: #FF6700;}#alll{width: 1600px;}#ps{height: 0;background-color: white;overflow: hidden;position: relative;right: 150px;width: 1600px;z-index: 20;}#ul233 li{list-style-type: none;float: left;text-align: center;border-right: solid 1px #E0E0E0;width: 210px;margin-left: 25px;}#ul233 span{font-size: 12px;}.a666{color: #FF6700;}.lb{width: 1226px;height: 460px;margin-left: 150px;float: left;position: relative;z-index: 15;}#lbpicture,#lbnb{height: 460px;position: relative;left: 75px;}/stylelink relstylesheet typetext/css hrefcss/iconfont.css/script typetext/javascriptvar flagfalse; /* 记录鼠标是否移动到div上实现鼠标在div上时鼠标离开li div不回滑*/var flag2false;var cnt0;function dol(a){setTimeout(doll,10,a);}function doll(a){var psdocument.getElementById(ps);ps.style.borderTopsolid 0.5px lightgray;ps.style.height0px;var idsetInterval(function a(){ps.style.heightNumber(ps.style.height.substr(0,ps.style.height.length-2))4px;if (ps.style.height.substr(0,ps.style.height.length-2)200){flag2true;clearInterval(id);}},5);if (a.idaa1){ps.innerHTMLul idul233liimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb1w200h138fwebpq90 alt小米10至尊版br /span小米10至尊纪念版/spanbr /span classa6665299元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb1w200h138fwebpq90 alt小米10 Probr /span小米10 Pro/spanbr /span classa6664999元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb1w200h138fwebpq90 alt小米 10br /span小米 10/spanbr /span classa6663699元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb1w200h138fwebpq90 alt小米10 青春版 5Gbr /span小米10 青春版 5G/spanbr /span classa6661899元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb1w200h138fwebpq90 alt小米MIX Alphabr /span小米MIX Alpha/spanbr /span classa66619999元/span/ul;} else if(a.idaa2){ps.innerHTMLul idul233liimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb1w200h138fwebpq90 alt小米10至尊版br /span小米10至尊纪念版/spanbr /span classa6665299元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb1w200h138fwebpq90 alt小米10 Probr /span小米10 Pro/spanbr /span classa6664999元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb1w200h138fwebpq90 alt小米 10br /span小米 10/spanbr /span classa6663699元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb1w200h138fwebpq90 alt小米10 青春版 5Gbr /span小米10 青春版 5G/spanbr /span classa6661899元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb1w200h138fwebpq90 alt小米MIX Alphabr /span小米MIX Alpha/spanbr /span classa66619999元/spanliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ddc8849eaf164aac333bfd10627867f.png?thumb1w200h138fwebpq90 altRedmi 9br /spanRedmi 9/spanbr /span classa666799元起/span/li/ul;;} else if(a.idaa3){ps.innerHTMLul idul233liimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb1w200h138fwebpq90 alt小米10至尊版br /span小米10至尊纪念版/spanbr /span classa6665299元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb1w200h138fwebpq90 alt小米10 Probr /span小米10 Pro/spanbr /span classa6664999元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb1w200h138fwebpq90 alt小米 10br /span小米 10/spanbr /span classa6663699元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb1w200h138fwebpq90 alt小米10 青春版 5Gbr /span小米10 青春版 5G/spanbr /span classa6661899元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb1w200h138fwebpq90 alt小米MIX Alphabr /span小米MIX Alpha/spanbr /span classa66619999元/spanliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ddc8849eaf164aac333bfd10627867f.png?thumb1w200h138fwebpq90 altRedmi 9br /spanRedmi 9/spanbr /span classa666799元起/span/li/ul;;} else if(a.idaa4){ps.innerHTMLul idul233liimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb1w200h138fwebpq90 alt小米10至尊版br /span小米10至尊纪念版/spanbr /span classa6665299元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb1w200h138fwebpq90 alt小米10 Probr /span小米10 Pro/spanbr /span classa6664999元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb1w200h138fwebpq90 alt小米 10br /span小米 10/spanbr /span classa6663699元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb1w200h138fwebpq90 alt小米10 青春版 5Gbr /span小米10 青春版 5G/spanbr /span classa6661899元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb1w200h138fwebpq90 alt小米MIX Alphabr /span小米MIX Alpha/spanbr /span classa66619999元/spanliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ddc8849eaf164aac333bfd10627867f.png?thumb1w200h138fwebpq90 altRedmi 9br /spanRedmi 9/spanbr /span classa666799元起/span/li/ul;;} else if(a.idaa5){ps.innerHTMLul idul233liimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb1w200h138fwebpq90 alt小米10至尊版br /span小米10至尊纪念版/spanbr /span classa6665299元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb1w200h138fwebpq90 alt小米10 Probr /span小米10 Pro/spanbr /span classa6664999元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb1w200h138fwebpq90 alt小米 10br /span小米 10/spanbr /span classa6663699元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb1w200h138fwebpq90 alt小米10 青春版 5Gbr /span小米10 青春版 5G/spanbr /span classa6661899元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb1w200h138fwebpq90 alt小米MIX Alphabr /span小米MIX Alpha/spanbr /span classa66619999元/spanliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ddc8849eaf164aac333bfd10627867f.png?thumb1w200h138fwebpq90 altRedmi 9br /spanRedmi 9/spanbr /span classa666799元起/span/li/ul;;} else if(a.idaa6){ps.innerHTMLul idul233liimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb1w200h138fwebpq90 alt小米10至尊版br /span小米10至尊纪念版/spanbr /span classa6665299元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb1w200h138fwebpq90 alt小米10 Probr /span小米10 Pro/spanbr /span classa6664999元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb1w200h138fwebpq90 alt小米 10br /span小米 10/spanbr /span classa6663699元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb1w200h138fwebpq90 alt小米10 青春版 5Gbr /span小米10 青春版 5G/spanbr /span classa6661899元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb1w200h138fwebpq90 alt小米MIX Alphabr /span小米MIX Alpha/spanbr /span classa66619999元/spanliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ddc8849eaf164aac333bfd10627867f.png?thumb1w200h138fwebpq90 altRedmi 9br /spanRedmi 9/spanbr /span classa666799元起/span/li/ul;;} else if(a.idaa7){ps.innerHTMLul idul233liimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b11742a0be47f9d97bb6a13ea580018d.png?thumb1w200h138fwebpq90 alt小米10至尊版br /span小米10至尊纪念版/spanbr /span classa6665299元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82ddffd7562c54f9166fa876c143ff22.png?thumb1w200h138fwebpq90 alt小米10 Probr /span小米10 Pro/spanbr /span classa6664999元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4a76ee684e51f0ee531ef3dc7f0aeaf.png?thumb1w200h138fwebpq90 alt小米 10br /span小米 10/spanbr /span classa6663699元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3bf20f1df3f2e22c5b29ff07634f3c59.png?thumb1w200h138fwebpq90 alt小米10 青春版 5Gbr /span小米10 青春版 5G/spanbr /span classa6661899元起/span/liliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d19da60f9f62eb2aa5dcdbd7df19f0f.png?thumb1w200h138fwebpq90 alt小米MIX Alphabr /span小米MIX Alpha/spanbr /span classa66619999元/spanliimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9ddc8849eaf164aac333bfd10627867f.png?thumb1w200h138fwebpq90 altRedmi 9br /spanRedmi 9/spanbr /span classa666799元起/span/li/ul;;}}function dolout(){setTimeout(dollout,10);}function dollout(){if(flagtrue){return;}if (cnt40){alert(频繁操作提醒差不多就行了第一次做页面真的不会);cnt0;}var psdocument.getElementById(ps);ps.style.borderTop;var idsetInterval(function a(){ps.style.heightNumber(ps.style.height.substr(0,ps.style.height.length-2))-4px;if (ps.style.height0px){flag2false;cnt;clearInterval(id);}},1);}function maintain(){// alert(555);var psdocument.getElementById(ps);ps.style.height200px;}function changeflag(){flag!flag;}function lbpicture(){var srcs[https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b7c2e5c62dfcaae720a3cd909c0eae52.jpg?w2452h920,https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/845deea18c7ccddeb01676fe16e99712.jpg?thumb1w1533h575fwebpq90,https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6eecc57f60b6b55b779f7908cfce230c.jpg?thumb1w1533h575fwebpq90,https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fe253b0048a5517abca36a605acacba3.jpg?thumb1w1533h575fwebpq90,https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d9a8a020cf3058f05e8db9483d7a0e45.jpg?thumb1w1533h575fwebpq90];var eledocument.getElementById(lbnb);var now0;var idsetInterval(function(){ele.srcsrcs[now%5];now;},2000);}/script/headbody onloadlbpicture();div idallldiv idad1img srcimages/QQ截图20200813103054.png idimg01/divdiv iddiv01div idnav01ul idnav011li idli1小米商城/lispan stylefloat: left; classopen|/spanliMIUI/lispan classopen|/spanliIoT/lispan classopen|/spanli云服务/lispan classopen|/spanli金融/lispan classopen|/spanli有品/lispan classopen|/spanli小爱开放平台/lispan classopen|/spanli企业团购/lispan classopen|/spanli资质证照/lispan classopen|/spanli协议规则/lispan classopen|/spanli下载app/lispan classopen|/spanliSelect Location/li/ul/divdiv iduserinfoul iduserinfo011li登录/lispan classopen|/spanli注册/lispan classopen|/spanli消息通知/li/uldiv idcarti classiconfont#xe624;/ispan idcartword购物车0/spandiv idcartlistspan idcarli stylecolor: black;购物车中还没有商品赶紧选购吧/span/div/div/div/divdiv idhdiv idh1a hrefindex.html ida01img srcimages/mi-logo.png ida011/aa hrefindex.html ida02span ids01主页/span/a/divdiv idh2a hrefhttps://www.mi.com/a/h/16602.html target_blankimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b06819007feedbea62aedaa3089633d2.gif /a/divdiv idh3ul classul2lia hrefjavascript:void(0) onmouseoverdol(this); onmouseoutdolout(); idaa1小米手机/a/lilia hrefjavascript:void(0) onmouseoverdol(this); onmouseoutdolout(); idaa2Redmi 红米/a/lilia hrefjavascript:void(0) onmouseoverdol(this); onmouseoutdolout(); idaa3电视/a/lilia hrefjavascript:void(0) onmouseoverdol(this); onmouseoutdolout(); idaa4笔记本/a/lilia hrefjavascript:void(0) onmouseoverdol(this); onmouseoutdolout(); idaa5家电/a/lilia hrefjavascript:void(0) onmouseoverdol(this); onmouseoutdolout(); idaa6路由器/a/lilia hrefjavascript:void(0) onmouseoverdol(this); onmouseoutdolout(); idaa7智能硬件/a/lilia hrefhttps://www.mi.com/service/ target_blank服务/a/lilia hrefhttp://www.xiaomi.cn/ target_blank社区/a/li/ulform actionhttps://www.mi.com/search methodgetinput typetext namekeyword idinp value placeholder小米10Pro/input typesubmit value搜索 idsub//formdiv styleclear: both;/div !-- 清除浮动的影响--/divdiv idps onmouseovermaintain(); changeflag(); onmouseoutchangeflag(); dolout();/div/div/divdiv idlbpictureimg srchttps://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b7c2e5c62dfcaae720a3cd909c0eae52.jpg?w2452h920 idlbnb/div/div/body
/html
