表格 长表格 布局

 固定定位

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

当将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中在放置一个表格

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,451评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,172评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,782评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,709评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,733评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,578评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,320评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,241评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,686评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,878评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,992评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,715评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,336评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,912评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,040评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,173评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,947评论 2 355

推荐阅读更多精彩内容