HTML元素定位




    元素的层级
    


    
<




    固定定位
    


    

固定定位

  • 固定定位的元素会被锁定在屏幕的某个位置上,当 访问者滚动网页时,固定元素会在屏幕上保持不动。
  • 当将position属性设置为fixed时,则开启了元素的 固定定位。
  • 当开启了固定定位以后,可以使用top、right、
    bottom、left四个属性对元素进行定位。
  • 固定定位的其他特性和绝对定位类似。

3





    表格
    


    
C2 C3 C4 C5
B2 B3 B4
D2 D3 D4
  • 合并单元格指将两个或两个以上的单元格 合并为一个单元格。
  • 合并单元格可以通过在th或td中设置属性 来完成。
  • 横向合并
    colspan
  • 纵向合并
    rowspan



    给表格添加样式
    


    
学号 姓名 性别 地址
1 悟空 花果山
2 猪八戒 高老庄
3 唐僧 东土大唐
1 悟空 花果山
2 猪八戒 高老庄
3 唐僧 东土大唐
1 悟空 花果山
2 猪八戒 高老庄
3 唐僧 东土大唐
1 悟空 花果山
2 猪八戒 高老庄
3 唐僧 东土大唐
1 悟空 花果山
2 猪八戒 高老庄
3 唐僧 东土大唐
  • 使用table标签创建一个表格。
  • tr表示表格中的一行。
  • tr中可以编写一个或多个th或td。
  • th表示表头。
  • td表示表格中的一个单元格

4




    背景
    


    



    背景
    


    
  • background-repeat用于控制背景图片的 重复方式。
  • 如果只设置背景图片默认背景图片将会使 用平铺的方式,可以通过该属性进行修改。
  • 可选值:
    repeat:默认值,图片左右上下平铺
    no-repeat:只显示图片一次,不会平铺
    repeat-x:沿x轴水平平铺一张图片
    repeat-y:沿y轴水平平铺一张图片

5





    背景偏移与定位
    


    
  • background-attachment用来设置背景图 片是否随页面滚动。
  • 可选值:
    scroll:随页面滚动
    fixed:不随页面滚动

6




    背景固定
    


    



7

表格
    


    
B2



    表格布局



    
  • 在Web的历史中,HTML的表格发挥了极大的作用。最 初创建表格就是为了以表格的形式显示数据,后来表格 变成了一个极受欢迎的布局工具。
  • 但是有了CSS以后,CSS在布局网页方面实际上会更出 色,所以现在我们使用表格的作用只有一个,就是用来 表示格式化的数据。
  • HTML中的表格可以很复杂,但是通常情况下我们不需 要创建过于复杂的表格。

8



    
        作业
        
        
    
    
        
新闻标题

9




    长表格



    
日期 收入 支出 合计
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
2018.03.01 5000 6000 2000
余额 100
  • caption表示表格的标题。
  • thead表示表格的头部。
  • tbody表示表格的主体。
  • tfoot表示表格的底部。

10




    按钮练习
    


    超链接


你可能感兴趣的:(HTML元素定位)