关闭

南大软院大神养成计划第六天

153人阅读 评论(0) 收藏 举报

                         今天让我们来做一个高度自适应的三行两列宽度固定布局

                  在html的基础上,添加CSS样式使得html中的文本按照我们想要的方式显示在不同位置。我们可以用盒模型整体控制,也可以使用框架,这两者的效果是一样。

           使用盒模型的话,在进行布局时,就要把整个页面看作是一个大盒子,里面的内容看做是一个个的小盒子,这样在编辑代码时,按照自己分的盒子进行排版,大盒子套小盒子,会比较清晰的完成目的。比如博客的主页,可以明显的看出整个页面里有一个一个的盒子,下面我把它大致分为四个盒子,第一个盒子就是以整个页面为内容的大盒子在这个大盒子里,共有三个盒子,他们从上到下并排排列,顶部的盒子是放置博客loge和主要选择按钮的地方,中间的盒子内容最多,所以我在这个盒子里再分出了两个小盒子,左边一个、右边一个,还有最底部一个盒子。首先在<body>里面用<div>把分好的盒子定义好,如下:

 <body>

<div id="bigBox">/*大盒子*/                                                                                可以看出大盒子是整体,顶部中间底部的盒子是并列包含在大盒子里,左右边的盒子是包含在

  <div id="bigBox">......</div>/*顶部的盒子*/                                                 中间的盒子里的。id是给每个盒子命名,为了方便CSS改变盒子的样式。

  <div id="containter">                                                                                           这里要提一句,良好的编写习惯可以帮助我们快速分清代码的内容,方便检查

           <div id="leftBox">......</div>/*中间左边的盒子*/                                 纠错。<div>里的内容就是每个盒子里的内容,由html编辑,这里不赘述。

           <div id="rightBox">......</div>/*中间右边的盒子*/                 

   </div>/*中间的盒子*/

  <div id="footer">......</div>/*底部的盒子*/

</div>

</body>

                                                        光这样是不够的,这样出来的页面不会按照我之前排的那样显示出来的,这些内容会混在一起,为了避免这种情况的出现,在</head><body>之间加上CSS的内容是必要的,首先,为了区分各个盒子,为他们加上颜色;其次,利用浮动解决页面混杂问题,在以上的页面中,顶部中间底部的盒子会由上至下显示出来,但左右两个盒子同时也是上下排列,我们可以把左边的盒子设置成向左浮动“float:left;”,右边的盒子向右浮动"flloat:right;",这样设置以后,左右两个盒子就并列排布了,可顶部盒子还在他们下面被覆盖着,因此对底部盒子进行清除浮动“clear:both;”;最后,针对出现的页面,对盒子之间的距离做一些变动,用margin,padding,top,bottom之类的属性。恩还有,大盒子的作用在于对所有内容的样式进行更改,所以他的存在是必要的。下面来看看代码:

</head>

<style type="text/css">

body{
   font-family:"楷体";
   font-size:20px;
}/*设置页面全局参数,这里的内容也可以在bigBox里设置*/
#bigBox{
   margin:0 auto;
   width:900px;/*之后每个盒子的宽度都不能超过这个宽度,为了页面不断延长下去,这里没有设置高度,让页面进行自适应*/
}/*设置大盒子(即页面容器)的宽度,并居中放置*/
#header{
   height:50px;
   width:900px;
   background:#6cf;
   margin-bottom:5px;  /*头部盒子的下边距*/
}/*设置页面头部信息区域*/
#containter{
   margin:5px;
}/*设置页面中部区域,中间盒子与周围盒子的边距*/
#leftBox{
   float:left;/*设置左边盒子向左浮动,因为是固定宽度,采用浮动方法可避免ie 3像素bug*/
   width:700px;/*左盒子没有设置高度,是因为当这部分里的内容增多时,方便盒子进行自适应,所以大盒子那里也不能对高度进行设置,否则会有溢出现象*/
   background:#cff;
}/*设置页面主内容区域*/
#rightBox{
   float:right;/*右边盒子向右浮动,这里也可以设置为向左浮动,在做三列布局时,中间部分的三个盒子就都设成向左浮动,然后用外边距来控制盒子间的距离*/
   width:200px;/*左边盒子占700,右边盒子占200,共900,是之前在大盒子设置的总的宽度,这样左右两个盒子是完全贴和的。要注意的是:当在这样的基础上为这两个盒子设置外边距时,要考虑到外边距的宽度是你设置的值的两倍,同时你就要缩减左右盒子的宽度了,不然盒子又会变成上下排布的了*/
   background:#9ff;
}/*设置侧边栏区域*/
#footer{
   clear:both;/*清除左右浮动,left就是只清除左浮动,right就是只清除右浮动,因为这里我左右浮动都设置了,所以用both都清除*/
   width:900px;
   height:50px;
   background:#6cf;
}/*设置页面底部区域*/

</style>

<body>

                            这就是这里所有的CSS代码了,可以拷贝到DW里看看效果,当然不要忘了补充完成其他内容。


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:3783次
    • 积分:254
    • 等级:
    • 排名:千里之外
    • 原创:22篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档