背景设置与表格

2018-08-13  本文已影响0人  YU不忘初心

1z-index

开启定位以后。z-index:1;数越大层级越高。 层级z轴。
父元素层级比子元素高,但是父元素也不会盖住子元素。

.box1{
            width: 200px;
            height: 200px;
            position: relative;
            z-index: 2;
        
        }

opacity设置背景透明度。0(完全透明)-1(完全不透明)取值 ie8以下浏览器不支持。filter()滤镜:olpha(透明度)(opacity=0.5)

2背景

1.图片小于界面大小,默认平铺。
可以同时设置背景颜色图片。color默认背景颜色。
渐变平铺设置。(不设置x方向平铺,下方也会被拉长)
background-repeat
repeat:默认值,图片左右上下平铺
no-repeat:只显示图片一次,不会平铺
repeat-x:沿x轴水平平铺一张图片
repeat-y:沿y轴水平平铺一张图片

2背景偏移与定位
background-position写一个值另一个值默认center

3.背景固定
一般是设置给body
设置给div div滚动没背景就会没。
background-attachment用来设置背景图 片是否随页面滚动。
可选值:
scroll:随页面滚动
fixed:不随页面滚动

加载 内粗发请求,出现闪屏
雪碧图,多个图片在一张图片里,请求一次,kb减少(颜色表减少,放图片的颜色)

4.简写背景属性
background: green url(1.jpg) no-repeat center center fixed;

表格的基本设置

使用table标签创建一个表格。
tr表示表格中的一行。
tr中可以编写一个或多个th或td。
th表示表头。
td表示表格中的一个单元格。

caption表示表格的标题。
thead表示表格的头部。
tbody表示表格的主体。
tfoot表示表格的底部。

合并单元格
横向合并
colspan
纵向合并
rowspan

表格样式
text-align:设置文本的水平对齐。
vertical-align:设置文本的垂直对齐。
可选值:top、baseline、middle、bottom
border-spacing:边框间距
border-collapse:合并边框
collapse:合并边框
separate:不合并边框

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xuebi</title>
    <style type="text/css">
        .a{
            width: 119px;
            height: 43px;   
        }
            
        .a1{
            display: block;
            width: 119px;
            height: 44px;
            background-image: url(img/雪碧图.png);
            background-repeat: no-repeat;
            /*background-position: 39px -35px;*/
        }

        .a1:hover{
            width: 115px;
            height: 31px;
            background-position: -9px -51px;
        }
        .a1:active{
            width: 83px;
            height: 26px;
            background-position: -9px -90px;
        }


        .b{
            width: 47px;
            height: 34px;
            
        }
        .b1{
            display: block;
            width: 47px;
            height: 34px;
            background-image: url(img/雪碧图.png);
            background-repeat: no-repeat;
            background-position: -8px -339px;
        }
        .b1:hover{
            
            background-position: -59px -339px;
        }
        .b1:active{
            
            background-position: -118px -337px;
        }

    </style>
</head>
<body>
    <div class="a"><a href="#" class="a1"></a></div>
    <div class="b"><a href="#" class="b1"></a></div>
</body>
</html>
11576306-145d399e899bbd6e.png
上一篇 下一篇

猜你喜欢

热点阅读