網頁設計 版面分割排版2

網頁設計 版面分割排版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 -- >

中澤

訂閱： 張貼留言 (Atom)