第四课 table详解与基本布局(重点)

发布时间:2017年03月09日 11点47分01秒
博客类别:JavaWeb基础
阅读(276)   评论(0)   喜欢(2)
  • 分享到: QQ空间 更多
  • 1.jpg

    1.预热

    从最近两次收上来的作业来看,大体上我还是比较满意的,还是那句话,有问题要赶紧问,不要拖。从这一节开始,我们就开始正式进入一些实用的环节了,css样式多如牛毛,我不可能一个一个去讲,那样好像背字典一样,我相信你们也不喜欢这样的授课方式。所以,我会在实战中慢慢和你讲解,然后,你记住一些重要的css属性就可以了。关键是,你要学会去查资料,最好的查资料方法,不是那种去W3C School上,一页一页看过去,那样的话不知道要看到什么时候,而是应该去看一些网页的源码,看看他们的网页是怎么做起来的,用了哪些css属性?这里面,肯定有很多css属性你连见都没见过,我的建议是,先大概去猜一下,然后用浏览器的F12调试功能去倒腾倒腾。不需要你对每一个css属性都了如指掌,你只要大概理解意思,然后掌握一些基本的css属性就可以了。普通的网页能自己画出来,复杂的网页能从别的地方拷贝过来,并且看懂,就可以了。




    那么今天呢,我带大家用table来做一个简单的demo,通过一个具体的例子,来看一下table怎么用?首先,打开Eclipse,新建一个HTML页面。




    blob.png




    blob.png




    首先,我们要在body区域弄出个空间来,专门存放这个table。之前我们都是直接在body上面弄的,而事实上,在实际开发中是不会这么做的。好的,我们来一个div元素,加一个class叫做wrap,wrap表示包裹,我们需要一个div来包裹table。




    blob.png




    接着,在head元素上挂载一个style元素,专门用来设置样式表。接着,给wrap设置一点点样式。




    blob.png




    效果:




    blob.png




    如何让这个div元素居中呢?是不是只要让它左右两边的margin自适应就OK了呀?OK,我们加上:




    blob.png




    blob.png




    哇,是不是有了,太棒了。现在我做一个事情,看好,我把wrap变成span元素,会怎样?




    blob.png




    看效果哈:




    blob.png




    卧槽,画风突变,这是什么情况?对了,span是什么元素啊,是不是行内元素啊。我们给一个行内元素设置宽度和高度是没有效果的。所以就变成了这样,那么,怎么办呢,我们需要把span强制转换成块级元素,是不是就好了呀?




    blob.png




    效果:




    blob.png




    2.编写工具类样式文件 tool.css

    在刚才的例子中,我们把一个div元素或者span元素都相对于父元素居中显示了,我现在请问一下大家,在实际开发中,让一个元素相对于父元素居中显示,这样的需求是不是很常见呀?




    那有没有什么办法,让我们下次再遇到这个需求的时候,直接用起来就行了呢?答案肯定是有的,我们可以封装一个通用的工具类,然后把一些经常要用到的样式放进去,就OK了。现在我们来编写一个tool.css工具类。




    blob.png




    blob.png




    引入这个css:




    blob.png




    然后,在span元素上绑定对应的class:




    blob.png




    这样就OK啦。




    3.终于开始画table了

    现在,我们开始画一个table,比如来一个一行三列的table:




    blob.png




    为了看出效果,我们需要另外给这个table元素,tr和td元素设置样式:




    blob.png




    刷新页面:




    blob.png




    就这样,一个简单的table就画好咯~




    4.合并单元格

    既然学table,肯定会遇到一个问题,那就是怎样合并单元格呢?




    比如,我希望在第二列和第三列下面增加一行,怎么办?很简单,我只需要在后面再写一个tr,里面有两个td:




    blob.png




    这个tr希望和它平级:




    blob.png




    blob.png




    可惜效果不对,这一行被挤下来了,原因很简单,因为第一列没有占据两行,所以如果我们硬是在后面添加一行,就会被挤下来。解决方法,是在第一列的td元素上,绑定一个rowspan属性,设置为2:




    blob.png




    blob.png




    这样就可以了吧,这就是所谓的行合并,那么怎样列合并呢?




    blob.png




    如图,我在</tr>下面重新写了一个tr,这表示重起一行,然后,挂载一个td元素,并且绑定colspan属性,这个属性的含义就是列合并。




    blob.png




    各位,再看一下之前的这个例子,是不是一共有三列啊,那么我就colspan=3,表示合并三列,效果:




    blob.png




    还有个问题,这个table没有默认占满父容器,那么我就得手动设置它的width为100%:




    blob.png




    blob.png




    这样是不是就好了呀?




    5.画一张请假单?

    接下来我们加快一点进度,来做一个请假单吧。我们把颜色调成黑色。




    blob.png




    再添几行:




    blob.png




    blob.png




    把文字填进去:




    blob.png




    最后是班主任审批:




    blob.png




    效果:




    blob.png




    这样就有一个问题,对于领导批示,宽度应该比较窄才会比较好看,可是现在的话明显太宽了,有没有什么办法呢?第一个想到的,肯定是给它设置宽度:




    blob.png




    刷新页面:




    blob.png




    哎呀,无效,这又是什么原因呢?原来,现在我们每一行是三列,第一列就只能这么宽,除非我们给它多加一列。




    blob.png




    这表示给第一行第一列设置列合并为2,那么每一行就有了4列。一共有几列是以第一行为准的。这样一来,下面这几个地方也要跟着改:




    blob.png




    blob.png




    blob.png




    最后,手动调一个高度出来:




    blob.png




    接着,就好像撘房子一样,房子搭好了,就可以把一些辅助工具撤销掉了,比如border。




    blob.png




    今天没有作业,但是希望大家要好好地跟着教程把这一节练习一下,为后面做铺垫,我不敢写太多,请先把今天讲的这些内容消化一下。table以后还要继续讲的。


    上一篇:第四课 table详解与基本布局(重点)

    下一篇:第五课 关于浮动和清除浮动的解说,以及两个大坑不要踩