『壹』 建設網站中的導航欄在設計時有哪些常見的樣式
分享幾個常見的導航設計：
1、滑出導航
滑出式導航是現在很流行的一種，當用戶打開頁面時，第一眼看到的是主要的內容而非菜單，給用戶更好的第一印象。響應式全屏滑出導航也可以給人愉悅的體驗。
2、全屏導航
全屏導航設計對內容有強調作用，用戶可以更加便捷地切換到不同的頁面，讓內容成為更加觸手可及的東西。如果設計的夠合理，用戶會在無意識間充分運用起它的導航功能。
3、單頁滾動導航
對於不含有大量內容的網站而言，單頁式的導航的效果非常不錯。這樣的網站只需要簡單的向下滾動操作，內容就會持續不斷地到你的眼前。
4、垂直導航
垂直導航最流行的有兩種排版方式，一種是隱藏式的導航菜單，需要的時候點擊顯示。另外一種是固定的側邊欄來展示菜單。它為網站設計提供了一種新的視覺體驗。
導航如何使用，還是要結合你的項目的具體特徵來決定的。
『貳』 web前端響應式布局怎麼解決'
1、不要優先為桌面版設計
2、導航欄菜單的麻煩
3、不應隱藏內容
4、單獨的移動端網站地址
5、糟糕的用戶體驗
6、不要忽視跨情景的公約
7、不要忽視頁面的載入時間
8、不要為觸摸屏設備開發
9、不找經驗淺的人做前端開發
『叄』 什麼是響應式是什麼
響應式布局是Ethan Marcotte在2010年5月份提出的一個概念，簡而言之，就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動互聯網瀏覽而誕生的。
響應式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗，而且隨著目前大屏幕移動設備的普及，用「大勢所趨」來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。
(3)web導航欄響應式擴展閱讀：
1、響應式布局的優點： 面對不同解析度設備靈活性強，能夠快捷解決多設備顯示適應問題。
2、響應式布局的缺點： 兼容各種設備工作量大，效率低下，代碼累贅，會出現隱藏無用的元素，載入時間加長，其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果，一定程度上改變了網站原有的布局結構，會出現用戶混淆的情況。
『肆』 網頁設計中響應式具體怎麼實現
眼下，幾乎每個新客戶都希望他們的網站可以有專門的移動設備版本。最完美的情況吶，就是為iPhone、iPad、黑莓、Kindle……各自打造一款——頁面解析度還必須兼容任何設備。誰知道未來5年內我們還需要為多少新發明的設備設計開發不同版本的頁面？這種瘋狂什麼時候算個頭？
在Web設計和開發領域，很快的，我們將會無法跟上設備與解析度革新的步伐。對於多數網站來說，為每種新設備及解析度創建其獨立的版本根本就是不切實際的；結果就是，我們將會贏得使用某些設備的用戶群，而失去那些使用其他設備的用戶。不過，或許會有另外一種方式，可以幫助我們避免這種情況的發生。
響應式Web設計(Responsive Web design)的理念是，頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。這樣，我們就可以不必為不斷到來的新設備做專門的版本設計和開發了。
『伍』 BootStrap中怎樣學習響應式導航條
1. 響應式導航欄，就是右上角的三道杠，點一下下方出現隱藏的導航欄。如果屏幕夠大就顯示所有的導航選項，如果屏幕小比如手機，就顯示部分，剩下的放到三道杠里隱藏。
2. 外面套一個大的div，其實建議用nav標簽，語義化一點唄！類名是navbar，說明這是個導航條，如果不帶，後面的內容會移上來。navbar-default這是個皮膚，默認的那種，不帶難看。
3. 裡面分兩部分，首先是navbar-header，這個是主頁選項專用，裡面放個navbar-brand顯示字體會大一點。下面呢個button就是右上角的三道杠按鈕，裡面的類navbar-toggle是給這個button加個樣式，讓他處於導航條的右邊，不加的話是呢個熊樣你可以試試。data-toggle="collapse"跟下拉菜單data-toggle="dropdown"一個尿性，表明這個是三條杠導航。data-target="#shownav"指定點擊三道杠後彈出啥玩意，跟幻燈片輪播里的指定哪個div里的圖片，作用相同。後面的三個span就是畫了三道杠。這樣這個三道杠button就做好了，真特娘的累！
4. 繼續，下面是包含需要隱藏的導航選項的ul，id="shownav"就是給上面的data-target用的，表示點一下三道杠出現這個ul。nav navbarnav是導航條的類，不想解釋了。。collapse類是指這個ul是默認隱藏的，在點三道杠之前別特么給我出來！navbar-collapse是屏幕大的時候需要顯示這些隱藏的導航選項，如果不加，大屏的時候就不顯示了，只能小屏的時候點三道杠才顯示。
5. ok，這樣整個響應式導航就做完了。
『陸』 什麼是web響應式網站
響應式Web設計(Responsive Web design)的理念是：
頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局、圖片、CSS media query的使用等。無論用戶正在使用筆記本還是iPad，我們的頁面都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備；換句話說，頁面應該有能力去自動響應用戶的設備環境。響應式網頁設計就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。
『柒』 什麼是響應式web設計
響應式Web設計是在開發和設計網站過程中產生的一種方式，它的目的是讓內容布局能隨用戶使用顯示器的不同而變化。再明確點說，這種設計概念，就是讓原本1292像素寬，4欄的內容，能夠很好地顯示在1025像素寬的用戶屏幕上，同時還能自動簡化成2欄。當然，讓它很好的適應智能手機和其他種類電腦的屏幕也就成了水到渠成的事了。這種特殊的設計形式就被成為「響應式Web設計」。
響應式Web設計的優點：可以兼容所有尺寸的屏幕，隨著手持設備（手機）屏幕尺寸繁多，也有很好的兼容性；而且開發一次，pc版和觸屏版，手機版融合為一；
響應式Web設計的缺點：對前端工程師要求比較高，它的屏幕兼容要求前端工程師對各種瀏覽器差異性了解比較多，對於大數據展示的門戶站點，如果用同一頁面，即時瀏覽器不崩潰，在手機上一個頁面，很難滑到最底部，帶來操作是十分不方便的，觸屏版和手機版對優質信息展示不足。
綜合優缺點：響應式Web設計在企業站點，微型或者小站還是可以用的，對於大中型站點不合適（尤其大信息量展示的）。
『捌』 如何將web頁面改成響應式
第一步：檢測網頁響應式
瀏覽器打開調試模式，打開響應式設計模式，在預覽區域拖動大小范圍，如果頁面元素隨大小變化而自適應，則頁面是響應式頁面，反之，頁面是固定非響應式頁面。如圖：
第二步：編輯網頁源文件
用Dreamweaver打開頁面源文件，查看代碼樣式及文件結構，（Web頁面的視覺效果由CSS樣式表文件控制）。如圖：
第三步：植入響應式代碼
在CSS樣式表中插入以下代碼：
@media screen and (min-width:200px) and (max-device-width:640px){
/*這里寫元素的樣式*/
}
代碼解釋：這句代碼是指定了在200像素~640像素之間的終端，顯示的效果，在其他終端不顯示。
第四步：橫屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:auto; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示（全屏拉伸縮放無滾動條），垂直方向用滾動條展示。如圖：
第五步：豎屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:auto;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示（全屏拉伸縮放無滾動條），垂直方向用滾動條展示。如圖：
第六步：全屏響應式設計
在CSS中插入以下代碼
@media screen and (min-width:200px) and (max-device-width:640px){
.box{ width:100%;height:100%; margin:0 auto; background:#FFFFFF;}
}
控制元素在終端的橫向展示（全屏拉伸縮放無滾動條），垂直方向用滾動條展示。如圖：
7
第七步：加工檢測
響應式設計完成之後，用不同的終端全部檢測一遍，有不合格的地方繼續修改，這是程序員必須知道的也不能忽視的。
『玖』 如何將web頁面改成響應式
1.檢測網頁響應式 2.編輯網頁源文件3植入響應式代碼4.橫屏響應式設計5.豎屏響應式設計
6.全屏響應式設計7.加工檢測，如果嫌麻煩的話，直接用nicebox做
『拾』 怎麼用css製作一個響應式布局的導航欄
在html5中實現響應式導航欄的方法有很多種，如何利用純CSS來現實這一功能，在這里小編就通過實例來和大家講解，純CSS實現的HTML5響應式導航欄的方法和技巧。
目前響應試web頁面已經逐漸開始盛行，除了將頁面的內容以及布局結構實現響應試以外，剩下的重點就是實現導航欄的響應試，當然方法有很多，不過最 近我發現了一個新的無需使用Javascript就能輕松實現響應試導航欄的技術，它採用的是簡潔的html5標簽結構來實現的應式導航欄，導航欄能夠被 輕松的控制在左側，中部，已經右側。當滑鼠經過導航欄時就會平滑拉菜單，不僅如此該響應式導航欄在手機屏幕和ie瀏覽器中也同樣能夠正常運行。
這樣的你需要使用到css樣式
你可以去了解下
Media Queries 響應媒體查詢
你可以多去參考一些比較前沿的網站
比如 ipbun.cn 這樣網站的響應式做的不錯