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

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



“南大软院大神养成计划“_第六天的学习“

今天学习的内容是HTML+CSS基础课程,将HTML基础之前剩下的学完了。     使用下拉列表框,节省空间     1.主要的就是学会使用选项和selected="selected"。selec...

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

第三天 终于结束了 慕课HTML+CSS部分的HTML基本语句~~~ 今天 看完HTML以后 我需要冷静一下 回顾一下 嗯,就这样。 表单中的各种按钮~~~ 1st. 提交按钮 ...
  • YaKIcoo
  • YaKIcoo
  • 2015年11月18日 23:48
  • 176

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

Jsp生命周期 :其中jspService()方法处理客户端请求。Servlet常驻内存, Servlet类的对象称为一个servlet,当客户请求一个JSP页面时,Tomcat服务器自动生成Jav...
  • TimeSea
  • TimeSea
  • 2015年11月23日 22:15
  • 279

南大软院大神养成计划--HTML和CSS基础课程

初步了解HTML    准确来说今天是自主学习的第二天,选择了基础的课程html。在今天的学习过程中也感到了计算机语言的优美,个人感觉它还是非常有趣的。简要记录一些今天个人所学和所得。 认识Htm...

南大软院大神养成计划--网站

(1)在制作之前进行首页布局分析,弄清盒子之间的关系,分为顶部,LOGO区,导航区,大图广告区,之后一般分为3个区按功能规划,底部版权区。(2)页面头部制作,分析头部结构,分析盒子结构,根据功能设计样...
  • hiiiji
  • hiiiji
  • 2015年12月03日 21:20
  • 170

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

和很多人不一样,我在此之前是并没有过接触过任何web设计的编程语言的。可能就是因为这样,当今天看见imooc上的代码时,会有点不太适应。是的,我没想到过,居然可以在浏览器里写程序,这确是打破了我之前的...

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

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

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

今天开始学JavaScript (以下是归纳) JavaScript document.write() 输出内容(相当C语言里的printf) var 变量名 ...

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

                             练习的代码,贴上来,乱乱的 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit...
  • jx370
  • jx370
  • 2015年12月05日 17:46
  • 236

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

今天学习的是Servlet路径跳转。 1: 使用相对地址(小例子) : 这里面用的是相对路径访问HelloServlet。 这里面的servlet是工程的包名,HelloServlet是类名,这里注意...
  • TimeSea
  • TimeSea
  • 2015年12月02日 13:37
  • 210
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:南大软院大神养成计划第六天
举报原因:
原因补充:

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