京东每日特价专栏仿写
生活随笔
收集整理的這篇文章主要介紹了
京东每日特价专栏仿写
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
關(guān)于圖片素材，在京東官網(wǎng)（注意是www.jd.com不是global.jd.com）可以找到，找不到的話留言我私發(fā)給你。
一、代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>京東每日特價(jià)</title><style>* {padding: 0;margin: 0;list-style: none;}.container {/*設(shè)置總體大小*/margin: 50px 200px;width: 400px;height: 600px;position: relative;}.top {height: 50px;/*頂部區(qū)域*/}.bland {/*每日特價(jià)*/color: black;font-weight: bold;width: 100px;float: left;}.top ul {float: left;width: 300px;}#tab li {/*五個(gè)菜單*/float: left;margin-right: 20px;color: #999;height: 30px;line-height: 30px;cursor: pointer;}.on {/*下劃線*/border-bottom: 2px solid red;}#content {/*存放所有圖片*/height: 200px;width: 400px;}.pic {/*包含單個(gè)菜單的圖片*/display: block !important;/*不加!important會(huì)失效*/height: 270px !important;}/* id的優(yōu)先級(jí)大于class，!important的優(yōu)先級(jí)最高 */#content>div {/*把每個(gè)菜單的圖片隱藏起來(lái)*/display: none;}#content>div>div {float: left;}.left {width: 150px;}.mid,.right {width: 125px;}.mid img {height: 74px;}.right img {height: 74px;}</style> </head><body><div class="container"><div class="top"><div class="bland">今日特價(jià)</div><ul id="tab"><li class="on">精選</li><li>數(shù)碼</li><li>美食</li><li>百貨</li><li>預(yù)告</li></ul></div><div id="content"><div class="pic"><div class="left"><img src="images/left1.webp"></div><div class="mid"><img src="images/mid_1.webp"><img src="images/mid_2.webp"></div><div class="right"><img src="images/right_1.webp"><img src="images/right_2.webp"></div></div><div><div class="left"><img src="images/left2.webp"></div><div class="mid"><img src="images/mid_2_1.webp"><img src="images/mid_2_2.webp"></div><div class="right"><img src="images/right_2_1.webp"><img src="images/right_2_2.webp"></div></div><div><div class="left"><img src="images/left3.webp"></div><div class="mid"><img src="images/mid_3_1.webp"><img src="images/mid_3_2.webp"></div><div class="right"><img src="images/right_3_1.webp"><img src="images/right_3_2.webp"></div></div><div><div class="left"><img src="images/left4.webp"></div><div class="mid"><img src="images/mid_4_1.webp"><img src="images/mid_4_2.webp"></div><div class="right"><img src="images/right_4_1.webp"><img src="images/right_4_2.webp"></div></div><div><div class="left"><img src="images/left5.webp"></div><div class="mid"><img src="images/mid_5_1.webp"><img src="images/mid_5_2.webp"></div><div class="right"><img src="images/right_5_1.webp"><img src="images/right_5_2.webp"></div></div></div></div><script>var tabs = document.getElementById('tab').getElementsByTagName('li');// var pics=document.getElementById('content').getElementsByTagName('div');//這樣會(huì)獲取到所有div，并不只是第一層divvar pics = document.getElementById('content').children;for (var i = 0; i < tabs.length; i++) {tabs[i].onmouseover = function() {change(this);}}function change(obj) {for (var i = 0; i < tabs.length; i++) {if (obj === tabs[i]) {tabs[i].className = 'on'; //給鼠標(biāo)下的菜單加下劃線pics[i].className = 'pic'; //將該菜單對(duì)應(yīng)的圖片顯示出來(lái)} else {tabs[i].className = '';pics[i].className = '';}}}</script> </body></html>二、效果圖
?
總結(jié)
以上是生活随笔為你收集整理的京东每日特价专栏仿写的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： internal error:faile
- 下一篇： 震惊！Canvas原来还能这么搞！代码画