美文网首页
表格 长表格 布局

表格 长表格 布局

作者: 冷暖自知_2237 | 来源:发表于2019-03-28 19:35 被阅读0次

     固定定位

    固定定位的元素会被锁定在屏幕的某个位置上,当 访问者滚动网页时,固定元素会在屏幕上保持不动。

    当将position属性设置为fixed时,则开启了元素的 固定定位。

    当开启了固定定位以后,可以使用top、right、

    bottom、left四个属性对元素进行定位。

    固定定位的其他特性和绝对定位类似。

    z-index

    当元素开启定位以后就可以设置z-index这 个属性。

    这个属性可以提升定位元素所在的层级。

    z-index可以指定一个整数作为参数,值越 大元素显示的优先级越高,也就是z-index 值较大的元素会显示在网页的最上层。

     background-image

    background-image可以为元素指定背景 图片。

    和background-color类似,这不过这里使 用的是一个图片作为背景。

    需要一个url地址作为参数,url地址需要指 向一个外部图片的路径

    例如:

    background-image: url(1.jpg)

     background-repeat

    background-repeat用于控制背景图片的 重复方式。

    如果只设置背景图片默认背景图片将会使 用平铺的方式,可以通过该属性进行修改。

    可选值:

    repeat:默认值,图片左右上下平铺

    no-repeat:只显示图片一次,不会平铺

    repeat-x:沿x轴水平平铺一张图片

    repeat-y:沿y轴水平平铺一张图片

     background-position

    background-position用来精确控制背景 图片在元素中的位置。

    可以通过三种方式来确定图片在水平方向 和垂直方向的起点。

    关键字:top right bottom left center

    百分比

    数值

     background-attachment

    background-attachment用来设置背景图 片是否随页面滚动。

    可选值:

    scroll:随页面滚动

    fixed:不随页面滚动

     background

    background是背景的简写属性,通过这个 属性可以一次性设置多个样式,而且样式 的顺序没有要求。

    例如:

    background: green url(1.jpg) no-repeat center center fixed;

     CSS Sprite

    CSS Sprites是一种网页图片应用处理方式。

    通过这种方式我们可以将网页中的零星图 片集中放到一张大图上。

    这样一来,一次请求便可以同时加载多张 图片,大大提高了图片的加载效率

     表格

    在Web的历史中,HTML的表格发挥了极大的作用。最 初创建表格就是为了以表格的形式显示数据,后来表格 变成了一个极受欢迎的布局工具。

    但是有了CSS以后,CSS在布局网页方面实际上会更出 色,所以现在我们使用表格的作用只有一个,就是用来 表示格式化的数据。

    HTML中的表格可以很复杂,但是通常情况下我们不需 要创建过于复杂的表格。

    table、tr、th、td

    使用table标签创建一个表格。

    tr表示表格中的一行。

    tr中可以编写一个或多个th或td。

    th表示表头。

    td表示表格中的一个单元格。

    caption、thead、tbody、tfoot

    caption表示表格的标题。

    thead表示表格的头部。

    tbody表示表格的主体。

    tfoot表示表格的底部。

    合并单元格

    合并单元格指将两个或两个以上的单元格 合并为一个单元格。

    合并单元格可以通过在th或td中设置属性 来完成。

    横向合并

    colspan

    纵向合并

    rowspan

     表格

    在HTML中,使用table标签来创建一个表格

    在table标签中使用tr来表示表格中的一行,有几行就有几对tr

    在tr中需要使用td来创建一个单元格,有几个单元格就有几个td

    colspan横向的合并单元格

    caption表示表格的标题。

    thead表示表格的头部。

    tbody表示表格的主体。

    tfoot表示表格的底部。

    rowspan纵向合并

    text-align:设置文本的水平对齐。

    vertical-align:设置文本的垂直对齐。

    可选值:top、baseline、middle、bottom

    border-spacing:边框间距

    border-collapse:合并边框

    collapse:合并边框

    separate:不合并边框

    padding可以设置内容和表格边框的距离

    长表格

    有一些情况下表格是非常的长的,这时就需要将表格分为三个部分,表头,表格的主体,表格底部

    在HTML中为我们提供了三个标签:

    thead 表头

    tbody 表格主体

    tfoot 表格底部

    这三个标签的作用,就来区分表格的不同的部分,

    他们都是table的子标签,都需要直接写到table中,tr需要写在这些标签当中

    thead中的内容,永远会显示在表格的头部

    tfoot中的内容,永远都会显示表格的底部

    tbody中的内容,永远都会显示表格的中间

    如果表格中没有写tbody,浏览器会自动在表格中添加tbody

    并且将所有的tr都放到tbody中,所以注意tr并不是table的子元素,而是tbody的子元素

    通过table > tr 无法选中行 需要通过tbody > tr

    以前表格更多的情况实际上是用来对页面进行布局的,但是这种方式早已被CSS所淘汰了

    表格的列数由td最多的那行决定

    表格是可以嵌套,可以在td中在放置一个表格

    相关文章

      网友评论

          本文标题:表格 长表格 布局

          本文链接:https://www.haomeiwen.com/subject/eowcbqtx.html