给大家带来Div CSS实例教程：页面制造办法
支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。做前端也有几年工夫了，不敢说能把他看地多透，可是多几少仍是有些本人的器材。就制造而言，我将一张页面分为四层：框架、结构、模块、列表和数据块。
1、框架
页面的框架基础上都是：“头”、“主体”、“尾”。可是关于一些页面如Tudou.com，因为结构的必要，还应在“头”的上面还要加个“菜单”。
2、结构（以下用#ID暗示页面元素）
#Head和#Foot里的就不说了，详细检察演示页面源码。
结构说的是将#Main里的内容分红几年夜块。我们看Tudou.com，#Main里典范的摆布布局，我们用#Layout_1，#Layout_2暗示。如图
3、模块
结构#Layout_1，#Layout_2里的块就是模块了，
按我的了解，模块最少要有一个ID，Class则要视页面计划，给必要重用的加上。
关于模块的ID称号，要取个成心义的名字，固然偷懒的能够用#Col_1，#Col_2，。。。
模块的Class称号用.cols_1，.cols_2，。。。
模块外部的以下图
4、列表和数据块
模块的主体是由列表构成的，而列内外则包括数据块。
按我的了解，页面上的信息实在就是分歧范例的列表。我们应将典范的列表体例提掏出来，放在公用款式里（public.css）。
以Tudou.com为例，必要界说到public.css里的列表最少要有以下三种：
1..list-v垂直列表体例(图片和笔墨成垂直分列)
2..list-h程度列表体例(图片和笔墨成程度分列)
3..list-t笔墨列表体例
数据块实际上是微格局的一个变响应用，给分歧的数据元素界说流动的布局。
Tudou.com必要界说的数据块有：
1..mVideo(视频)
2..mList(豆单)
3..mUser(用户)
好比.mVideo应当是如许的：
<divclass=“mVideo”>
<divclass=“p”><ahref=“”title=“”></span></div>
<divclass=“d_view”>人气：<span>222</span></div>
<divclass=“d_comment”>批评：<span>323</span></div>
<divclass=“d_favorite”>保藏：<span>32</span></div>
<divclass=“d_type”>范例：<span><ahref=“”title=“”> 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。
页:
[1]