前些日子無聊的時候學了下前端，說實話沒有美感前端和搬磚沒有區別，唯一值得一提的就是他的佈局方法。我的這個方法用於寫死網頁，不含各種框架的自適應性功能，而且主要想記錄一下思想。 寫前端不同於演算法優化，演算法中經常是能少一個數組就少一個數組，而前端只要保證不亂，多套幾個div沒有任何關係，也沒人會深究你浪 ...
前些日子無聊的時候學了下前端，說實話沒有美感前端和搬磚沒有區別，唯一值得一提的就是他的佈局方法。我的這個方法用於寫死網頁，不含各種框架的自適應性功能，而且主要想記錄一下思想。
寫前端不同於演算法優化，演算法中經常是能少一個數組就少一個數組，而前端只要保證不亂，多套幾個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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
