初學CSS仿QQ郵箱首頁介面

weixin_33807284發表於2017-07-09
原文網址 : https://blog.csdn.net/weixin_33807284/article/details/88304740
CSS

最近跟著老師學習了做一個簡單的QQ郵箱的首頁介面，每個星期堅持打卡，希望學有所成。

6425627-75a63f6b5a78adf3.png

首先是將介面分成2個部分：header,center。center細分為conten和footer(這裡是為了防止在網頁小化的時候出現footer部分與底部出現間隙),header高度為64px,底部footer高度為36px;然後使用position進行定位。主要是講中間center部分的設定高度，設定高度使用position:absolute;將top:64px(62高度+2個1px的border邊框);bottom:0px;可以設定一個最小高度min-height;在content部分使用position:absolute;top:0px;(相對於center來設定top)，bottom:38px;其他的就這樣吧

程式碼:


6425627-d88599c1352a72eb.png
6425627-fdd09144540c1bc2.png
6425627-399e902f4961add8.png
6425627-a245f94f801901f6.png
6425627-0d2aef21d32342eb.png
6425627-5acb2df44a0b09e0.png
6425627-856c3375c3d3c5d7.png
6425627-fd53cdda76c6e11c.png

相關文章