布局种类：
1、table布局（网页的兴起，1995）
2、Flash布局（自由的黄金时代，1996）
3、div+css（CSS的诞生，1998）
4、栅格与响应式（移动端的兴起，2007与2010）
当前WEB前端开发使用DIV+CSS的布局方式会比较多也比较常用吧，网页布局看起来貌似简单，但是它需要综合使用很多HTML+CSS的知识，总的来说知识量是不小。如果想系统化的了解HTML+CSS方面的知识，建议你选择一本比较不错的HTML5相关书籍（主要看知识逻辑、知识的表达方式，比如《HTML5布局之路》）进行学习，让自己的知识更扎实一些，不然学的零零散散的。
Tips：学习好HTML+CSS有利于后面学习JavaScript，毕竟需要它们两者结合在一起才可以实现出可交互的前端页面。
这叫厂形布局吗？？用框架是比较简单的，但是不灵活。用div+css+js就可以搞定，左边一个大层放标题，右边一个大层放每个标题对应的内容（两个大层都设置浮动属性：float:left），每个内容用一个小层装着，设置第一个小层的display属性为block其它小层都设置为none通过js控制，当点击左边标题，右边对应小层的display属性改变为block其它的都为none就可以实现了。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0padding:0}
body{ text-align:center}
#wrapper{ width:1002pxmargin:autooverflow:autoheight:600px}
#header{ border:1px solid blackheight:100px}
#left{ float:leftwidth:200pxborder:1px solid blackheight:496px}
#right{ float:rightwidth:798pxborder:1px solid blackheight:496px}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：夏雨云
微信扫一扫
支付宝扫一扫
评论列表（0条）