今天機(jī)試有個內(nèi)容是做網(wǎng)易云課堂tab欄切換的，如下
創(chuàng)新互聯(lián)專注于九臺網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供九臺營銷型網(wǎng)站建設(shè)，九臺網(wǎng)站制作、九臺網(wǎng)頁設(shè)計、九臺網(wǎng)站官網(wǎng)定制、小程序設(shè)計服務(wù)，打造九臺網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供九臺網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
先簡單說下我當(dāng)時的想法
1.先弄一個大div盒子，我命名為tab
2.在大盒子tab里面有兩個小盒子，分別是標(biāo)題欄（tab_list）和內(nèi)容欄（tab_con）
3.采用display：flex；使標(biāo)題欄菜單和內(nèi)容欄的內(nèi)容水平對齊（可能待會放的代碼不是很規(guī)范，但實現(xiàn)對齊效果）
4.js編寫鼠標(biāo)移入事件，主要是利用display：none和display：block之間的切換。
下面放下我當(dāng)時寫的代碼吧，可能寫得不是很正規(guī)，不符合習(xí)慣，請大家見諒
由于代碼太多分幾部分說
HTML部分——大致布局，標(biāo)題欄和內(nèi)容欄
- 今日 20:00開搶
- 明天 10:00開搶
- 明天 14：00開搶
- 明天 20:00開搶
- 后天 10:00
- 后天 14:00
部分內(nèi)容區(qū)item區(qū)域的HTML代碼，基本差不多
javascript課程
妙學(xué)堂
￥49.9 ￥1600 即將開搶
javascript課程
妙學(xué)堂
￥49.9 ￥1600 即將開搶
javascript課程
妙學(xué)堂
￥49.9 ￥1600 即將開搶
javascript課程
妙學(xué)堂
￥49.9 ￥1600 即將開搶
javascript課程
妙學(xué)堂
￥49.9 ￥1600 即將開搶
CSS部分
重慶分公司
重慶分公司
.tab{
width: 100%;
height: 300px;
text-align: center;
margin: 10px auto;
background-color: ghostwhite;
}
.tab_list ul{
display: flex;
height: 50px;
margin: 0 auto;
padding: 0;
}
.tab li{
list-style: none;
height: 50px;
line-height: 50px;
flex:auto;
}
.tab_list .active{
background-color: red;
color: #ffffff;
}
.tab_con{
margin: 10px auto;
width: 100%;
height: 200px;
}
.item{
display: none;
}
.box{
display: flex;
}
.product{
flex: auto;
}
.product img{
width: 220px;
height: 120px;
}
.price{
position: relative;
width: 220px;
height: 80px;
}
.price p{
margin: 0px;
left: 0px;
position: absolute;
}JS部分
最終我的效果如下
不是很相像，但還算過得去。。。。。。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
