網頁設計 版面分割排版2

星期六, 4月 07, 2018 0 留言 A+ a-



#container 容器:放網頁板型。

#wap 打包
#wrapper 打包

#header 頁首

#nav 導航

#content 內容

#footer 頁尾

排版12字口訣:由外而內,由上而下,由左而右。

依照口訣一步一步,會慢慢排出下面這個樣子。
<div id="container">
 <div id="header">
 </div><!-- end of the header -->
 <div id="nav">
 </div><!-- end of the nav -->
 <div id="content">
 </div><!-- end of the content -->
 <div id="footer">
 </div><!-- end of the footer -->
</div><!-- end of the container -->
巢狀結構永遠用成上下,比較好檢閱。

新增容器標籤

插入 Div 標籤→ID:container→新增 CSS 規則→方框→設定寬度→背景色

容器外框設定好寬度,就不要在 #header 和下面那幾個標籤,
再設定一次寬度了,因為他們都會自動變成外框設好的寬度。

置中

Margin →左和右調 Auto

備註

備註的寫法,備註可以打中文。
<! -- 在此輸入備註 -- >
放備註以方便維護網站。
<! -- end of #container -- >