京东每日特价专栏仿写
生活随笔
收集整理的這篇文章主要介紹了
京东每日特价专栏仿写
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
關于圖片素材，在京東官網（注意是www.jd.com不是global.jd.com）可以找到，找不到的話留言我私發給你。
一、代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>京東每日特價</title><style>* {padding: 0;margin: 0;list-style: none;}.container {/*設置總體大小*/margin: 50px 200px;width: 400px;height: 600px;position: relative;}.top {height: 50px;/*頂部區域*/}.bland {/*每日特價*/color: black;font-weight: bold;width: 100px;float: left;}.top ul {float: left;width: 300px;}#tab li {/*五個菜單*/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 {/*包含單個菜單的圖片*/display: block !important;/*不加!important會失效*/height: 270px !important;}/* id的優先級大于class，!important的優先級最高 */#content>div {/*把每個菜單的圖片隱藏起來*/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">今日特價</div><ul id="tab"><li class="on">精選</li><li>數碼</li><li>美食</li><li>百貨</li><li>預告</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');//這樣會獲取到所有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'; //給鼠標下的菜單加下劃線pics[i].className = 'pic'; //將該菜單對應的圖片顯示出來} else {tabs[i].className = '';pics[i].className = '';}}}</script> </body></html>二、效果圖
?
總結
以上是生活随笔為你收集整理的京东每日特价专栏仿写的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： internal error:faile
- 下一篇： JavaScript实现轮播图