美文网首页
元素层级、背景、表格

元素层级、背景、表格

作者: 你猜_e00d | 来源:发表于2018-08-13 18:16 被阅读0次

元素层级

想要设置元素层级必须要开启定位(上一章有定位的描述)

z-index:1

后面的数字是设置层级的数字越大层级越高,但是父类的元素设在高的层级也盖不住子元素。

设置透明度

opcity:()后面的括号填数字0-1之间 0是完全透明 ,0.5是半透明,1是完全不透明。
但是IE6及以下浏览器有独有的滤镜
filte alpha (opcity=50)
0-100之间 0是完全透明,50是半透明, 100是不透明。

背景

在制作网页的时候我们有时候可能觉得背景太单调怎么办呢?
我们可以用background-image:url()来添加我们想要的背景图案 url括号里面写的是你图片的路径(路径一定要写对哦不然就不会出现你想要的图片了)

但是我们在添加图片的时候会发现很多问题比如你的图片显示不全



又或者是图片太多



第一张图片可能是你设置的高度或宽度和你图片的高度或宽度不匹配
第二张图片可以设置background-repeat:no-repeat

这样你的图片就会变成一个



还可以设置background-repeat:repeat-x
可以铺横排

同样设置 repeat-y 可以铺竖排

图片的定位

图片的定位可以使用 background-position:来定位
后面的定为需要设两个值如果只设一个值的话,第二个值默认为center,只能设一个垂直方向和一个水平方向的值
例如 left top 左上 left center 左中

图片的绝对定位

图片的绝对定位就是固定在页面上不会随着滚动条的滚动而滚动。

background-attachment:fixed

如何制作一个表格

制作表格用在HTML中,使用table标签来创建一个表在table标签中使用tr来表示表格中的一行,有几行就有几对tr在tr中需要使用td来创建一个单元格,有几个单元格就有几个td

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="1" width="40%" align="center">
        <tr>
            <td>A1</td>
            <td>A2</td>
            <td>A3</td>
            <td>A4</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B2</td>
            <td>B3</td>
            <td rowspan="2">B4</td>
        </tr>
        <tr>
            <td>C1</td>
            <td>C2</td>
            <td>C3</td>
        </tr>
        <tr>
            <td>D1</td>
            <td>D2</td>
            <td colspan="2">D3</td>
        </tr>
    </table>
</body>
</html>

相关文章

  • 元素层级 背景 表格

    元素的层级 z-index 父元素层级在高,也不会盖住它的子元素 对于没有开启定位的元素不能使用z-index 如...

  • 元素层级、背景、表格

    元素层级 想要设置元素层级必须要开启定位(上一章有定位的描述) 后面的数字是设置层级的数字越大层级越高,但是父类的...

  • 元素的层级,背景透明,背景固定,表格,长表格

    元素的层级(只有开启定位) 语法:z-index 数值越高,层级越高,在网页的最上层, 没有开启定位的元素不可以使...

  • 前端六

    1.元素的层级 运行结果: 2.简写背景属性 运行结果: 3.表格 运行结果: 4.表格 运行结果: 5.长表格 ...

  • 元素层级和背景

    元素的层级 z-index 设立层级 没有开启,是不能使用z-index 子元素层级再高也永远盖不住父元素 元素的...

  • HTML 日常了解6

    固定定位 元素的层级 背景 背景偏移与定位 背景固定

  • 元素的层级与表格

    z-index 用来设置元素的层级(整数) 必须开启定位 opacity 设置透明度 0透明 0.5半透明 ...

  • 前端笔记(6)

    代码:1.元素的层级 2.按钮的练习 3.导航条 4.简写背景属性 5.给表格添加样式 6.背景偏移与定位 7.背...

  • 元素背景、表单、表格

    元素背景:background-color属性用来为元素设置背景颜色。需要指定一个颜色值,当指定了一个颜色以后,整...

  • 前端 元素的层级 背景

    background-colorbackground-color属性用来为元素设置背 景颜色。需要指定一个颜色值,...

网友评论

      本文标题:元素层级、背景、表格

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