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

原创 2015年11月21日 17:45:05

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

                  在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里看看效果,当然不要忘了补充完成其他内容。



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

学习心得        今天学习了学以致用——综合技巧运用这一节内容,输入快捷键ctrl+N来打开编辑区,输入ctrl+shift+p开启命令模式,输入sshtml可以切换到html格式,输入ct...
  • z15179324968
  • z15179324968
  • 2015年11月22日 11:28
  • 62

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

今天是南大软院大神养成计划实施的第六天,每天写博客就是比较费时间和精力了,不过做任何事情都要坚持下来,我想起了当初一个社团发起的连续21天早起的活动,那次我也是每天都坚持6点半起来,结果到最后能坚持2...
  • qq_23418043
  • qq_23418043
  • 2015年11月21日 21:37
  • 197

【南大软院大神养成计划:第一天】种下21天,收获不一样的自己——前端养成启程!

在第一天的学习小节前,想先说一说自己的经历,所谓回顾历史,面向未来....     高考完,知道自己被南大软院录取时,心里被两股情绪塞满,那股红色的是欣喜,欣喜从初中就铸下学IT的理想的我终于可以做...
  • Sonshines
  • Sonshines
  • 2015年11月16日 20:52
  • 734

大神养成计划第二天 --南大软院大神养成计划

今天是大神养成计划第二天,看了慕课网的div+css页面布局,明白了一个网页都是有一个个的盒模型布局构成。所以我们做一个网页前,必须先对页面进行布局。我们可以把一个网页大致分为头部header,中间部...
  • u013175229
  • u013175229
  • 2015年11月17日 21:33
  • 610

南大软院大神养成计划第十一天

今天分享的代码是关于选择符的,简单写了两个,一个是if...else判断语句,另一个是switch语句,代码如下:       JavaScript function b...
  • jx370
  • jx370
  • 2015年11月26日 22:24
  • 198

南大软院大神养成计划——第七天

今天是南大软院大神养成计划实施的第七天。时间飞逝,转眼间一周就过去,这一周主要还是在复习以前的知识和查漏补缺。今天学习的知识大部分都是我以前没有接触到的新知识,所以学习速度比较慢,今天学习的内容主要是...
  • qq_23418043
  • qq_23418043
  • 2015年11月22日 18:40
  • 220

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

今天分享一段代码,效果如附图, 代码如下: /> 高度自适应的三行三列宽度固定布局 *{ margin:0; padding:0; font-size:14p...
  • jx370
  • jx370
  • 2015年11月24日 23:59
  • 211

伪类 --南大软院大神养成计划

css本身自带很多好看的特效,比如伪类,当鼠标放置时hover,当点击时active,点击后的visited。 first-child 伪类来选择元素的第一个子元素。lang 伪类使你有能力为不...
  • u013175229
  • u013175229
  • 2015年11月19日 10:52
  • 119

南大软院大神养成计划——第十二天

今天是南大软院大神养成计划实施的第十二天,今天学习的内容是DOM事件探秘部分的最后部分——事件类型。事件类型从来大类来分可以分为鼠标事件和键盘事件。 先说说鼠标事件,鼠标事件可以分为click,ov...
  • qq_23418043
  • qq_23418043
  • 2015年11月27日 10:58
  • 253

南大软院大神养成计划--day01

首先感谢南昌大学软件学院可以给我们这个一个机会来自己自主独立完成一些大学生本应该多做的事情:多学习,多总结。开卷有益,但最难的还是持之以恒,作为一个Web前端的初学者,希望可以通过此次比赛增长自己的业...
  • TimeSea
  • TimeSea
  • 2015年11月16日 22:16
  • 236
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:南大软院大神养成计划第六天
举报原因:
原因补充:

(最多只允许输入30个字)