html table绝对定位不出现滚动条,2018-12-27 绝对定位 固定定位 元素的层级 背景 电驴导航条 背景偏移与定位 按钮练习 简写背景属性 表格...

绝对定位

绝对定位指使元素相当于html元素或离他最近的祖先元素进行的定位

当position设置为absolute时，开启绝对定位

特点：

绝对定位会使元素完全脱离文本流

绝对定位的块元素的宽度会被其内容撑开

绝对定位会使行内元素变成块元素

固定定位

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

当position设置为fixed时开启固定定位

1、元素的层级:

如果定位元素的层级是一样，则下边的元素会盖住上边的

通过z-index属性可以用来设置元素的层级

可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越高，越优先显示

对于没有开启定位的元素不能使用z-index

2、设置图片背景:

background-image: url()

background-repeat用于设置背景图片的重复方式

可选值：

repeat，默认值，背景图片会双方向重复(平铺)

no-repeat，背景图片不会重复，有多大就显示多大

repeat-x， 背景图片沿水平方向重复

repeat-y，背景图片沿垂直方向重复

3、背景偏移和定位：

背景图片默认是贴着元素的左上角显示

通过background-position可以调整背景图片在元素中的位置

可选值：

该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置

top left 左上

bottom right 右下

如果只给出一个值，则第二个值默认是center

也可以直接指定两个偏移量

第一个值是水平偏移量

如果指定的是一个正值，则图片会向右移动指定的像素

如果指定的是一个负值，则图片会向左移动指定的像素

第二个是垂直偏移量

如果指定的是一个正值，则图片会向下移动指定的像素

如果指定的是一个负值，则图片会向上移动指定的像素

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

可选值：

scroll，默认值，背景图片随着窗口滚动

fixed，背景图片会固定在某一位置，不随页面滚动

不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素

4、背景定位：

当背景图片的background-attachment设置为fixed时，

背景图片的定位永远相对于浏览器的窗口

background-attachment: fixed;

5、雪碧图：

按钮练习

.btn:link{

/*将a转换为块元素*/

display: block;

/*设置宽高*/

width: 93px;

height: 29px;

/*设置背景图片*/

background-image: url(img/btn/btn2.png);

/*设置背景图片不重复*/

background-repeat: no-repeat;

}

.btn:hover{

/*当是hover状态时，希望图片可以向左移动*/

background-position: -93px 0px;

}

.btn:active{

/*当是active状态时，希望图片再向左移动*/

background-position: -186px 0px;

}

6、背景属性:

简写背景属性

body{

height: 5000px;

/*设置一个背景颜色*/

/*background-color: #bfa;*/

/*设置一个背景图片*/

/*background-image: url(img/3.png);*/

/*设置背景不重复*/

/*background-repeat: no-repeat;*/

/*设置背景图片的位置*/

/*background-position: center center;*/

/*设置背景图片不随滚动条滚动*/

/*background-attachment: fixed;*/

background-color: #bfa;

/*background

- 通过该属性可以同时设置所有背景相关的样式

- 没有顺序的要求，谁在前睡在后都行

- 也没有数量的要求，不写的样式就使用默认值

*/

background: #bfa url(img/3.png) center center no-repeat fixed;

}

7、表格：

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

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

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

rowspan用来设置纵向的合并单元格

colspan横向的合并单元格

html表格

table常用标签

1、table标签：声明一个表格

2、tr标签：定义表格中的一行

3、td和th标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格

table常用属性：

1、border 定义表格的边框

2、cellpadding 定义单元格内内容与边框的距离

3、cellspacing 定义单元格与单元格之间的距离

4、align 设置单元格中内容的水平对齐方式,设置值有：left | center | right

5、valign 设置单元格中内容的垂直对齐方式 top | middle | bottom

6、colspan 设置单元格水平合并

7、rowspan 设置单元格垂直合并

传统布局：

传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：

1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0

2、单元格里面嵌套表格

3、单元格中的元素和嵌套的表格用align和valign设置对齐方式

4、通过属性或者css样式设置单元格中元素的样式

传统布局目前应用：

1、快速制作用于演示的html页面

2、商业推广EDM制作(广告邮件