頁面重構-讓我們的布局自適應


css重構之旅

>前言: 今年我大一,馬上就要大二了。從高三畢業暑假到大學的這一年馬上過去,馬上迎來大二生活.學習前端也有將近一年了。一昧去追求那些視覺的效果和相對高端和新穎的技術,反而忽略了最基礎的布局技巧。

回味

2017年3月,百格教育的手機端網站,是我接到的第一個公司外包的項目。我和組長合作完成,現在項目也已經順利完成,回想起來,自己也跟着組長學到了不少:

1)一個公告的列表(你應該提前考慮到,一則公告的字數一定有多有少的)多出的應該做處理,不然超出會排成兩行,使布局陷入混沌的狀態:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

 

如果是多行溢出部分顯示省略號:

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;

2)一個活動列表的內容(許多類似的情況),應該的可伸縮的。如果你一昧用margin撐起來的布局,就會使布局不具有伸縮性,內容多少都會被定死,情況一有變化,要多留下大片空白,要么導致了重疊,在此使布局陷入混沌狀態。

 


>自己多少有些愧疚,當時還沒有養成寫博客總結的習慣,而且居然忽視了這個問題三個月之久
轉而繼續了JavaScript中的oop學習。之后幾個陸陸續續的小項目,由於都是自己一個人做,而且和后台的人聯系不緊密,其實自己一直使用的都是固定布局。

 

正是如此:

一個人做項目和合作做項目的差別就已經顯示出來,一個人做項目你會忽視很多問題,你學到的東西一定是有限的。而如果你跟前輩合作,不管是和前端還是后台的前輩,你的問題很容易被發現;當發現問題你的第一情緒,應該是開心和喜悅,因為在解決問題和bug的過程中,是你進步最快的過程(我覺得沒有之一,一)

時隔三個月

時隔三個月,今天5月29號,這次我跟主任合作,我覺得我學到了很多很多,也意識到了自己的問題,
一昧去追求那些視覺的效果,反而忽略了最基礎的布局技巧(是我給自己這三個月的總結反思吧)
一昧用margin撐起來的布局,具有很差的伸縮性。


>記得,無論第一次帶我的家興學長也是現任主任;還是老主任,還是組長;一個人如果很很認真的指出你們沒有認識到的問題,你應該感激他們,你的進步和成果離不開一些人的指導,我相信每個人的研發生涯中,總有這么一些人,無論是前端,后台還是其他。

這次的項目不大,但是內容還是比較多的(今年我大一,對我來說一個能學到很多東西項目才是最好的項目,至於現在掙多少外快,都是次要的)

先提到一個經典的基礎布局-自適應高度(大家不要見笑)

 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="Generator"content="EditPlus®">
<meta name="Author"content="">
<meta name="Keywords"content="">
<meta name="Description"content="">
<style text="text/css">
/**
布局
*/
body {
  margin:0px;
}
#container {
  width:100%;
  margin:0 auto;
  border:1px solid 81cfa2 ;
}
#header {
  width:100%;
  float:left;
  clear:both;
  border:1px solid #81cfa2; 
}
#header_left {
  width:50%;
  border:1px solid #81cfa2 ;
  float:left;
}
#header_right {
  width:49%;
  border:1px #F00 solid;
  float:right;
}
#main {
  width:100%;
  float:left;
  clear:both;
  border:1px #F00 solid;
}
#main_content{
  width:100%;
  border:1px solid blue;
}

#footer {
  width:100%;
  float:left;
  clear:both;
  border:1px #F00 solid;
}
</style>

</head>
<body>
<div id="container">
  <div id="header">
    <div id="header_left">
    頭部左側
    </div>
    <div id="header_right">
    頭部右側
    </div>
  </div>
  <div id="main">
    <div id="main_content">
    主頁內容
    </div>
  </div>
  <div id="footer">底部(footer)</div>
</div>
</body>
</html>

重構布局

移動端重構頁面布局8大方法:http://www.divcss5.com/html5/h20001.shtml
昨天晚上讀了張鑫旭的CSS流體(自適應)布局下寬度分離原則頁面重構的三無准則獲益匪淺,對流體布局有了新的認識吧

流式布局就像在學校食堂排長隊打飯一樣,來一個就跟在后面,這樣使布局具有很強的伸縮性,
正如張鑫旭的文章介紹的無寬度原則,犧牲一層標簽,單獨設置寬度。
寬度,浮動,絕對定位都會阻礙容器流動性,而padding和border不會,
使用寬度分離的原則就不用擔心里面的內容(里面的內容需遵循“無寬度准則”)會因為寬度溢出撐開布局而造成錯位了

這個作品可以幫你仔細分析下幾種頁面重構布局的差異:

http://wow.techbrood.com/fiddle/fork?id=25477

總結

頁面重構的方法和技巧有很多,自己應該保持一個謙卑的心,在重構的道路路上走下去。

一千張,我還差好多好多;

 

上個月讀完格拉德威爾寫的異類,第一章講了一個效應叫做馬太效應,“一個人從出生比不是就是一無所有,從出生開始我們就擁有了一定的資助和稟賦,能在眾王面前站立人,好像完全憑借他的能力,事實上,總有潛在的優勢,非凡的機遇和傳統的文化令他們獲益”

但是很多人都沒有走完這一萬小時,遇到挫折、批評、誤解就輕言放棄。

推薦一篇異類的讀后感:
http://www.cnblogs.com/stoneniqiu/archive/2016/01/19/5143189.html


>如果有一天:你不再尋找愛情,只是去愛;你不再渴望成功,只是去做;你不再追求空泛的成長,只是開始修養自己的性情;你的人生一切,才真正開始。

 

后記--
因為我學習前端經驗還不夠,干貨不多,希望當做筆記和心情記錄下來。
以后、畢業或者就業后還可以回味那時寫的些許稚嫩的“博客”。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM