国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

CSS響應(yīng)式導(dǎo)航原理,下圖那個具體怎么做出來的?
高洛峰
高洛峰 2016-10-24 17:03:29
0
1
1076

1.png

高洛峰
高洛峰

擁有18年軟件開發(fā)和IT教學(xué)經(jīng)驗。曾任多家上市公司技術(shù)總監(jiān)、架構(gòu)師、項目經(jīng)理、高級軟件工程師等職務(wù)。 網(wǎng)絡(luò)人氣名人講師,...

reply all(1)
三叔

原理就是利用css的媒體查詢(media query)來檢測屏幕寬度,根據(jù)屏幕寬度來改變導(dǎo)航的css樣式。

類似下面這樣:

@media?screen?and?(min-width:?40em)?{

????.nav-collapse?ul?li?{?width:?18%;?}
}
.navbox?{?background:?#1e9f3d;?height:?40px;}
.search?{?margin-top:?50px;}
.servicePhone{?margin-top:?60px;?height:?60px;?line-height:?60px;}
.phoneIcon?{?width:?10%;?float:?left;?height:?30px;?line-height:?30px;?text-align:?center;}
.phoneNumber?{?width:?80%;?float:?left;?margin-left:?10%;?margin-top:?-10%;?line-height:?30px;}


@media?screen?and?(max-width:768px)?and?(min-width:640px){
?????.search{?float:?right;}
????.servicePhone?{float:?left;}
????.logo{?float:?left;?width:?220px;}
????.contactInfo?h6?{line-height:?20px;}
????.contactTit?h5?{?line-height:?50px;}
}

@media?screen?and?(max-width:?640px){
????.servicePhone?{?display:?none;}
????.search?{?display:?none;}
????.fixed-bottom?{display:?block;}
????.contactInfo?h6?{line-height:?20px;}
????.contactTit?h5?{?line-height:?50px;}
????.footerBtm?{?margin-bottom:?100px;}
}

=======================================補充線:我的下面這篇博文詳細闡述過,可以參考:

利用Responsive Nav.js插件制作響應(yīng)式導(dǎo)航


Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template