前端HTML之頁面結構


前端工作一年了,期間由於工作需要,也做了一些產品的設計,因為自己的目標就是做編程,所以婉拒了與產品相關的一些任務,打算主要把精力放到編程這方面.

PS:2015年1月進軍編程行業。

廢話不多講,這一年頁面改版了N次,以至於設計師都撂挑子了,,,頁面做多了,經驗自然就有了。

背景(前端小白,迫於生計放棄之前銷售工作,計算機專業)

 

 

前端的最基本要求,實現設計師所出的效果圖,也就是樣子跟設計圖一樣就可以。

這個要求容易實現,需要費點心思,花點時間,期初切圖會慢一點,往后就越來越快了,,

 

 

前端的進階一,頁面是很講究布局結構的。

      一次偶然的機會,跟同事討論前端頁面,他打開了拉勾網的頁面,想做頁面其中的一部分,我通過谷歌瀏覽器F12審查了一下頁面代碼,發現這頁面結構跟我的頁面結構也似乎如出一轍,頁面是很講究布局結構的,也就是說,接到頁面之后,不是急於去寫代碼,而是先把布局結構在心里設計好,傳統的結構無非就兩種,上下結構,左右結構,只是上邊與下邊,左邊與右邊的寬度與高度不一樣罷了。

 

 

前端頁面切圖的誤區,元素高度,浮動,定位。

     首先來說一下高度,所有元素的高度,尤其是父元素,也就是最外層包含的容器,這些高度都是由其子元素撐開的。什么意思呢,通俗點說就是,心有多大,舞台就有多大,心就是子元素,舞台就是父元素,子元素能撐多寬,多高,父元素自然就實現了設計圖上的效果。

    然后再來說一下浮動,不了解浮動為何要清除的剛入門的同學,會在子元素浮動后,父元素,塌陷失去高度,會手動定義高度,因此便覺得浮動不清除也沒多大影響,這其實也跟第一個問題也有關系,他還不清除頁面元素的高度是靠子元素撐起來的。

    最后說一下定位,定位就是需要一個參考值,在當前元素絕對定位時,若父元素沒有使用相對定位,其參考的元素為窗口,也可以說是body元素,否則參考的就是最近的使用了相對定位的父元素。還有一種定位是,固定定位,就是固定在頁面的某個位置,

    


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com