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

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


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

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

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

今天是南大软院大神养成计划实施的第九天,今天学习的主要内容是DOM探索之基础详解篇的剩余两章内容,最后两章内容主要讲解的是“如何判断节点元素类型”和“继承层次和嵌套规则”。 先讲讲“如何判断节点元素...

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

今天学习的是Servlet路径跳转。 1: 使用相对地址(小例子) : 这里面用的是相对路径访问HelloServlet。 这里面的servlet是工程的包名,HelloServlet是类名,这里注意...

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

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

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

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

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

今天是南大软院大神养成计划实施的第二天,在这一天中,我学习了HTML+CSS基础教程,由于上过网页工程实训,所以对于这章内容,我更多是查漏补缺,看看自己哪里不会,然后补充知识,毕竟实训时间只有4天,讲...

南大软院大神养成计划——第一天学习心得

今天是南大软院大神养成计划开始的第一天,在参加这次活动之前,我犹豫了很久到底要不要参加此次计划,因为我对成为一名web前端开发不是很感兴趣,我更感兴趣的是嵌入式开发,但是后面经过室友的鼓励,我还是选择...

南大软院大神养成计划--第二天学习CSS的基础归纳

总算学完了基础,虽然以前学过,但还是认真看完了每一章,加深了各个基本元素的认知程度。 以前做网页作业总喜欢建立一个div标签在css里设置div{display:block; position:abs...

南大软院大神养成计划--第四天单/复选框与文字对齐问题

大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复...

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

今天是南大软院大神养成计划实施的第十六天,今天继续学习jQuery基础。 一.过滤性选择器 该类型的选择器是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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