今天让我们来做一个高度自适应的三行两列宽度固定布局
在html的基础上,添加CSS样式使得html中的文本按照我们想要的方式显示在不同位置。我们可以用盒模型整体控制,也可以使用框架,这两者的效果是一样。
使用盒模型的话,在进行布局时,就要把整个页面看作是一个大盒子,里面的内容看做是一个个的小盒子,这样在编辑代码时,按照自己分的盒子进行排版,大盒子套小盒子,会比较清晰的完成目的。比如博客的主页,可以明显的看出整个页面里有一个一个的盒子,下面我把它大致分为四个盒子,第一个盒子就是以整个页面为内容的大盒子在这个大盒子里,共有三个盒子,他们从上到下并排排列,顶部的盒子是放置博客loge和主要选择按钮的地方,中间的盒子内容最多,所以我在这个盒子里再分出了两个小盒子,左边一个、右边一个,还有最底部一个盒子。首先在<body>里面用<div>把分好的盒子定义好,如下:
<body>
<div id="bigBox">/*大盒子*/ 可以看出大盒子是整体,顶部中间底部的盒子是并列包含在大盒子里,左右边的盒子是包含在
<div id="bigBox">......</div>/*顶部的盒子*/ 中间的盒子里的。id是给每个盒子命名,为了方便CSS改变盒子的样式。