java工程师走向前端学习心路历程（二）

最新推荐文章于 2024-10-06 20:16:20 发布

qingliang_hu

最新推荐文章于 2024-10-06 20:16:20 发布

阅读量911

点赞数 1

分类专栏： web css html 文章标签： java class div header 阿里巴巴前端开发

本文链接：https://blog.csdn.net/qingliang_hu/article/details/7305729

版权

web css html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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开发中基本的框架弄好了。具体业务功能点之类的再分工合作，一块块的做！千万不要急！