美文网首页
2019-03-28第八天

2019-03-28第八天

作者: 您的名称已被使用 | 来源:发表于2019-03-28 19:03 被阅读0次

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

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

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

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

    2、使用background-image来设置背景图片

    语法:background-image:url(相对路径);

    - 如果背景图片大于元素,默认会显示图片的左上角

    - 如果背景图片和元素一样大,则会将背景图片全部显示

    - 如果背景图片小于元素大小,则会默认将背景图片平铺以充满元素

    可以同时为一个元素指定背景颜色和背景图片,这样背景颜色将会作为背景图片的底色

    一般情况下设置背景图片时都会同时指定一个背景颜色

    */

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

    /*

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

    可选值:

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

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

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

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

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

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

    可选值:

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

    top left 左上

    bottom right 右下

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

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

    第一个值是水平偏移量

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

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

    第二个是垂直偏移量

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

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

    4、当背景图片的background-attachment设置为fixed时,

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

    5、做完功能以后,发现在第一次切换图片时,会发现图片有一个非常快的闪烁,这个闪烁会造成一次不佳的用户体验

    产生问题的原因:

    背景图片是以外部资源的形式加载进网页的,浏览器每加载一个外部资源就需要单独的发送一次请求

    但是我们的外部资源并不是同时加载,浏览器会在资源被使用时才去加载资源

    我们这个练习,一上来浏览器只会加载link.png

    由于hover和active的状态没有马上触发,所以hover.png和active.png并不是立即加载的

    当hover被触发时,浏览器才去加载hover.png

    当active被触发时,浏览器才去加载active.png

    由于加载图片需要一定的时间,所以在加载和显示过程会有一段时间,背景图片无法显示,导致出现闪烁的情况

    为了解决该问题,可以将三个图片整合为一张图片,这样可以同时将三张图片一起加载,就不会出现闪烁的问题了

    然后再通过background-position来切换要显示的图片的位置,这种技术叫做图片整合技术(CSS-Sprite)

    优点:

    1 将多个图片整合为一张图片里,浏览器只需要发送一次请求,可以同时加载多个图片,提高访问效率,提高了用户体验。

    2 将多个图片整合为一张图片,减小了图片的总大小,提高请求的速度,增加了用户体验

    6、background

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

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

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

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

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

    thead 表头

    tbody 表格主体

    tfoot 表格底部

    这三个标签的作用,就来区分表格的不同的部分,他们都是table的子标签,都需要直接写到table中,tr需要写在这些标签当中

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

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

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

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

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

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

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

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

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

    相关文章

      网友评论

          本文标题:2019-03-28第八天

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