個人前端佈局方法

前些日子無聊的時候學了下前端，說實話沒有美感前端和搬磚沒有區別，惟一值得一提的就是他的佈局方法。個人這個方法用於寫死網頁，不含各類框架的自適應性功能，並且主要想記錄一下思想。

    寫前端不一樣於算法優化，算法中常常是能少一個數組就少一個數組，而前端只要保證不亂，多套幾個div沒有任何關係，也沒人會深究你浪費了幾個div。因此基本上是每個模塊都套一個div，兄弟也好後代也好，有意義就套，只要本身不嫌麻煩就行。並且始終秉持一個思想，先佈局後寫內容，寫每一塊思路都要清晰，多寫幾遍誰都會熟練，再多總結把用的多的組件封裝一下，不用動腦兩三個小時出一套前端不成問題。

    佈局思想方面，彈性盒子佈局會減掉許多麻煩，主要是因爲他的排列以及居中方式能夠代替各類邊距和浮動設置。手機端只需適應各類手機屏幕便可，因此稍微關注一下電腦端便可。分辨率最窄1024px，最寬1920px，寫出的網頁要想適應全部屏幕，最好的方法就是內容部分給一個最小寬度，而後兩邊留白，其實這也是當下淘寶等網頁採用的方法。具體來講，就是總體內容外面包一個div，寬度通常1000左右，而後使用margin:0 auto;水平居中，固然也能夠再作些媒體查詢。

    對於總體佈局，我這裏封裝了兩種寬度，百分比式寬(fluidwidth)和固定長度式寬(containerwidth)。百分比式寬電腦端總體佈局基本不用，只用於部分佈局；移動端總體部分佈局都用，但要防止有東西擠下來。固定長度式寬電腦、移動端都用於總體佈局。

    對於div內部，我這裏使用了center-all、justify、align等三種居中方式，能不用邊距對齊就不用。至於div之間的排列，橫向的有latitude-spacearound、spacebetween，縱向的有longitude，足以應付絕大多數排列。

    而網頁中模塊之間，我使用外邊距來隔開。還有，每次寫網頁，佈局時通常都給個底色，我這裏是第一層底色用紅黃綠藍，第二層用粉棕。

    寫完靜態網頁後，剩下的就是動態網頁了。用的最多的輪播圖用swiper最好，其他我只寫過一些原生js，js水很深再加上我也沒興趣作個前端工程師沒有往深走，因此也就很少敘述了。。

 

下面奉上個人佈局框架：

/*------------------------公共樣式表----------------------------*/
* {
margin: 0px;
padding: 0px;
border: 0px;
}
a {
text-decoration: none;
}
p {
text-indent: 16px;
font-size: 15px;
color: #333333;
}
.center-all {
display: flex;
justify-content: center;
align-items: center;
}
.center-align {
display: flex;
align-items: center;
}
.center-justify {
display: flex;
justify-content: center;
}
.latitude-spacearound {
display: flex;
align-items: center;
justify-content: space-around;
}
.latitude-spacebetween {
display: flex;
align-items: center;
justify-content: space-between;
}
.longitude {
display: flex;
flex-direction: column;
}
.fixedwidth {
width: 1349px;
margin: 0 auto;
padding: 0 6%;
box-sizing: border-box;
}
/*百分比式佈局欄*/
.fluidwidth {
width: 100%;
box-sizing: border-box;
}
首先很感謝前些日子帶過個人zzw同窗，讓我無聊的日子看起來不那麼無聊。老實說bootstrap4其實也學的差很少了，理論上寫一個出來也沒什麼問題，但是我實在沒有寫一個出來的動力。。這幾個月想了不少，並不是程序上的問題，而是關於本身爲何敲碼，以及人生方面的問題。不作個前端的話，那我寫bootstrap4好像除了浪費大腦內存，沒什麼別的卵用了，若是真要寫個前端，現學也不成問題。相比之下，我想作一些本身喜歡的、擅長的、對本身而言有意義的事。。

 

很是抱歉。。
---------------------
做者：Flynn_curry
來源：CSDN
原文：https://blog.csdn.net/Flynn_curry/article/details/93312235
版權聲明：本文爲博主原創文章，轉載請附上博文連接！