學習日記
最近一直被“生活資訊網”這個專案困擾著，幾個頁面做了快一個禮拜了！😭幾度懷疑自己之前學移動端的制作時是不是沒帶腦子學…
我先來給你倒倒苦水哈！
一開始在制作這個導航欄就先給了我一個下馬威，此話怎講呢？就是說我做那個樣式花了我兩天😢具體這個樣式是個什么樣呢？我下面會放一個gif動態圖展示出來，
還有！！!對于應用Bootstrap（柵格系統）這個回應式布局從一開始接觸到現在使用我都還在叫錯它的名字…什么柵格化系統、洗掉系統…不僅學的沒到位，名字也喊不對😅
還有還有！！！學的解決方法多了選擇恐懼癥的我就開始害怕了…這個用起來布局很方便，那個代碼打起來能簡單些…反正諸如此類的問題就讓我糾結了好久害生活不易潘潘嘆氣…😢
哦！對了！還有！在布局完后基本展現出效果后，里面許多引數也是要不停的調整，一會兒這個圖示掉下來了，一會兒這個圖示不見了，一會兒那個圖示被影響了…反正就是不停在和它玩躲貓貓…
哦哦！還有一個！就是這腦子呀總是把以前學的搞忘，就還需要花時間往前復習一哈…
這書讀的我真的一個頭兩個大！啊啊啊啊啊啊~~~
問題描述：
導航欄在不同視窗下有不同的樣式呈現：
我算是明白了，越是花里胡哨越是好看的東西背后絕對沒有看到的這么簡單
一開始我第一反應就是利用Bootstrap來制作！額，首先就是給一個container大容器盒子，
但是我發現一個問題，里面的子盒子會在螢屏擠壓下會改變樣式動來動去的不按我的要求來💢
原因分析：
首先要弄明白Bootstrap時柵格化系統原理：它將版心分成12份，然后當螢屏壓縮了就會一行放不下變成兩行，
解決方法：
解決方法：需要用媒體查詢或者在Html下面寫你想要的樣式，不想要的樣式在（大屏、中屏、小屏…）中隱藏hidden-lg、hidden-md、hidden-sm
導航欄框架代碼如下：
/*<div class="container">不需要container 這樣才能占滿整個視窗*/
<div class="box">
//左邊的logo
<div class="col-md-3 box-1">1</div>
//中間的一列導航欄
<div class="col-md-7 box-1">2</div>
//右邊的圖示
<div class="col-md-2 box-1">2</div>
</div>
/*</div>*/
方法延伸：
對于這種適應不同視窗的方法（統稱為回應式布局）flex、流式布局（百分比）、max-width來表示、Bootstrap柵格化系統，
像這種（三張圖）平分版心的就可以用flex來完成：
用一個大盒子裝三給小盒子
父盒子給一個display：flex；
子盒子給一個flex：1；
問題描述：
在使用Bootstrap中已分成兩列，然后左邊一列下有兩個盒子
效果如下：
解決方案：
我們需要在container盒子里裝兩個盒子
<div class="container">
<div class="box">
<div class="col-md-4 box-1">左邊列
<div class=" box-son1">
</div>
<div class=" box-son2">
</div>
</div>
<div class="col-md-8 box-1">右邊列</div>
</div>
</div>
一些些學習心得：
經歷了這個專案的學習修改程序并且將知識點的整合我越來越有耐心了呢！網站頁面在最后的呈現也許還是不夠完美，我覺得從我自己的角度來說已經有了一定成長！
大熊老師也說過“我們現在的階段就是可以掌握知識點的80%，這個程序就好像盲人摸象，”我們從0到100的成長程序，有時候不要和自己鬧太大別扭，所以我覺得自己還是挺棒的?
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/355373.html
標籤：其他