java工程師走向前端學習心路歷程（二）

qingliang_hu發表於2012-02-29
Java工程師前端

no.3、溫故而知新——HTML佈局篇

 第一篇中寫了一些java工程師需要兼顧做前端開發需要準備的工具、知識庫，並且分享了一個例項。這也是我在學習過程中親身經歷的一些東西，希望對大家有用！前期需要準備的或許遠遠不止這些，根據個人水平而定，如果對css一竅不通那麼需要補習這方面的知識。瞭解一些也需要加強，個人認為w3cschool：http://www.w3school.com.cn/是個不錯的學習場所，裡面有很多語法方面的介紹和例項，並且可以線上編輯執行，馬上看到效果。
       當然做前端需要做的第一件事還是佈局，在前一篇也有些分享，下面再做些更為詳細的分享~~~
心路歷程（一）中的myIndex.html裡面的佈局事實上是目前佈局的一個經典模式，裡面的內容可以改造為實際應用中能用到的佈局，比如想做阿里巴巴美容護膚頻道的首頁佈局 （http://page.china.alibaba.com/shtml/household/beauty.html）

1、這一塊就屬於頭部（放在header層）




2、這一塊就屬於尾部（放在footer層）




3、中間的一片都屬於內容（當然放在content層）


———————————————————————我是分割線—————————————————————————


分層相對是比較簡單的，只要從大局上分三層，一般不會有什麼問題，有些主頁面佈局會比較特殊，這裡暫不做介紹。
既然已經分好header、content、footer三層，就要把大致的html寫好：
<!-- 頭部 -->
     <div id="header">
        ......
     </div>     
<!-- 內容 -->
     <div id="content">
         ......    
     </div>     
<!-- 底部 -->
     <div id="footer">
        ......
     </div>

1.1 header中的佈局

header中又有三層：
第一層為公司logo+搜尋欄；
第二層為導航欄；
第三層為“您目前所在的位置”+“支付寶交易、保障金交易”。
那麼頭部可以加入如下程式碼：
<!-- 頭部 -->
<div id="header">
    <!--logo和search-->
    <div id="masthead-v4" class="w952 fd-clr">
         <div class="ali-logo-v4">...</div>      
         <div class="ali-search-v4">....</div>
    </div>
    <!-- 導航欄 -->
    <div class="ali-nav">...</div>
    <!-- 您當前所在位置 -->
    <div class="ali-crumbs w952">...</div>
</div>

1.2  content中的佈局

     <!-- 內容 -->
     <div id="content" class="w952">
	     <div class="layout-p32a24" id="agencyjoin-markup-1st">
		      <div class="grid-5"></div>
		      <div class="grid-13"></div>
		      <div class="grid-6 grid-fexed"></div>			  
	     </div>
		 <div class="layout-p32a24" id="agencyjoin-markup-2nd">
		      <div class="grid-24"></div>
		      <div class="grid-5"></div>
  		      <div class="grid-13"></div>
		      <div class="grid-6 grid-fexed"></div>			  
		 </div>
		 <div class="layout-p32a24" id="agencyjoin-markup-3rd">
		      <div class="grid-24"></div>
		      <div class="grid-5"></div>
  		      <div class="grid-13"></div>
		      <div class="grid-6 grid-fexed"></div>			  
		 </div>
   		     <!--..............................
			 ...省略相同佈局的第4、5層...
			 ..............................-->
		 <div class="layout-p32a24" id="agencyjoin-markup-6rd">
		      <div class="grid-24"></div>
		      <div class="grid-24"></div>		  
		 </div>
     </div>

1.3  footer中的佈局

<!-- 底部 -->
     <div id="footer">
        <div class="layout">
            <div class="grid-24">
		 <h4>阿里巴巴版權所有@alibaba.com</h4>
	    </div>
	</div>
     </div>

以上部分都是從大的角度看佈局，一塊巨大的畫布框架已經搭好，好比我們java開發中基本的框架弄好了。具體業務功能點之類的再分工合作，一塊塊的做！千萬不要急！


相關文章