其他分享
首页 > 其他分享> > css续集3

css续集3

作者：互联网

1.background属性

1.1background-image

"默认平铺整个页面"

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        body{
            background-image: url("1.jpg");
        }
        </style>
    </head>
<body>
    <div class="box1">
    </div>
</body>
</html>

css续集3

1.2background-repeat:

css续集3

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        body{
            background-image: url("1.jpg");
            background-repeat: no-repeat;
        }
        </style>
    </head>
<body>
    <div class="box1">
    </div>
</body>
</html>

css续集3
css续集3

1.3给元素设置padding,padding区域也会平铺背景图片

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        body{
            background-image: url("1.jpg");
            background-repeat: repeat-x;
            padding: 100px 100px;
        }
        </style>
    </head>
<body>
    <div class="box1">
    </div>
</body>
</html>

css续集3

1.4repeat应用-背景图片

"对于对称的图片，可以使用repeat效果，用作背景图片"
<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
        body{
            background-image: url("./images/timg2.jpeg");
        }
        </style>
    </head>
<body>
    <div class="box1">
    </div>
</body>
</html>

css续集3

1.5background-position

background-position: -100px -100px;
正值 第一个值表示往右偏移 第二个值表示往下移 
负值则相反

除了设置像素值，还有下面的设置方法
水平方向属性值还有三种选择 left center right
垂直方向属性值还有三种选择 top center bottom

1.5.1background-position应用1-雪碧图技术-在一张大图中剪切出小图形

CSS 雪碧图应用原理：
只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？

其实就是 截取 大图一部分显示，而这部分就是一个小图标。

使用雪碧图的好处：
1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便

不足：

1）CSS雪碧的最大问题是内存使用
2）拼图维护比较麻烦
3）使CSS的编写变得困难
4）CSS 雪碧调用的图片不能被打印

css续集3

<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box1{
                /*48px是一个小图形的宽和高*/
                width: 48px;
                height: 48px;
                background-image: url("./images/1.png");
                background-repeat: no-repeat;
                /*这个528px就是该小图片顶部距离整张图片顶部的距离,可以使用ps来查看该距离*/
                background-position: 0px -528px;
            }
            .box2{
                width: 48px;
                height: 48px;
                background-image: url(./images/1.png);
                background-repeat: no-repeat;
                background-position: 0 -440px;
            }
        </style>
    </head>
<body>
    <div class="box1">
    </div>
    <div class="box2">
    </div>
</body>
</html>

css续集3

1.5.2background-position应用2-通天banner-背景图形水平居中

一般我们电脑的屏幕都是1439.但是设计师给我们的banner图都会比这个大，那么我们可以制作通天banner。
/*通天banner*/
background-image: url("./images/banner.jpg");
background-repeat: no-repeat;
/*顶部水平居中*/
background-position: top center;

/*综合属性设置*/
background:  url('./images/banner.jpg')  no-repeat   center top;
<!DOCTYPE HTML>
<html>
    <head lang='en'>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>学城</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .box1{
                height: 812px;
                padding-top: 100px;
                background-image: url("./images/banner.jpg");
                background-repeat: no-repeat;
                /*通天banner*/
                background-position: top center;
            }
            .box2{
                width: 960px;
                height: 36px;
                border-radius: 5px;
                overflow: hidden;
                background-color: purple;
                margin: 0px auto;
            }
            ul{
                /*取消ul的样式*/
                list-style: none;
            }
            a{
                /*去除a标签的下划线*/
                text-decoration: none;
                /*一共6个，所以每个设置960/6=160px*/
                width: 160px;
                /*与父元素的高度一样*/
                height: 36px;
                /*与height相同，可让字体垂直居中*/
                line-height: 36px;
                font-size: 20px;
                color: white;
                /*文字水平居中*/
                text-align: center;
                float: left;
            }
            a:hover{
                /*鼠标悬浮时，背景色红色*/
                background-color: red;
            }

        </style>
    </head>
<body>
    <div class="box1">
        <div class="box2">
            <ul>
                <li><a href="ww">导航</a></li>
                <li><a href="ww">导航</a></li>
                <li><a href="ww">导航</a></li>
                <li><a href="ww">导航</a></li>
                <li><a href="ww">导航</a></li>
                <li><a href="ww">导航</a></li>

            </ul>
        </div>

    </div>
</body>
</html>

css续集3

1.6background-attachment: fixed;

"固定背景，滚动页面时，背景不动，上面的内容会滚动"
/*单独设置*/
background-attachment: fixed;

/*综合属性设置*/
background: url(./images/timg2.jpeg) no-repeat 0 0  fixed;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 1200px;
            height: 2000px;
            border: 1px solid red;
            background: url(./images/timg2.jpeg) no-repeat 0 0  fixed;
            /*固定 背景 滚动页面时，背景不动，上面的内容会滚动*/
            /*background-attachment: fixed;*/
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>
        <p>文字</p>

    </div>

</body>
</html>

css续集3

2.定位

定位有三种：

1.相对定位 
2.绝对定位 
3.固定定位

2.1相对定位

相对定位:相对于自己原来的位置定位

现象和使用：
1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right

特性：
1.不脱标
2.形影分离
3.老家留坑
所以说相对定位 在页面中没有什么太大的作用。影响我们页面的布局。我们不要使用相对定位来做压盖效果

用途：
1.微调元素位置
2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。

2.1.1验证相对定位特性

特性：
1.不脱标
2.形影分离
3.老家留坑
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 50px;
            height: 50px;

        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
            position: relative;
            top: 30px;
            left: 20px;
        }
        .box3{
            background-color: blue;
        }

    </style>
</head>
<body>

    <!-- 相对定位三大特性： 1.不脱标  2.形影分离  3.老家留坑 :占着茅房不拉屎，恶心人 。 所以说 相对定位 在页面中没有什么太大的作用。影响我们页面的布局。但是我们不要使用相对定位来做压盖效果-->

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>

</body>
</html>

css续集3

2.1.2相对定位应用一：微调

css续集3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .input_text{
            font-size: 30px;

        }
        .input_button{
            position: relative;
            /*微调之后*/
            top:3px;
        }
    </style>
</head>
<body>
    <div class=" box box1">
        <input class="input_text" type="text">
        <input class="input_button" type="button" value="按钮">
    </div>

</body>
</html>

css续集3

标签：文字,续集,url,padding,repeat,background,position,css
来源： https://blog.51cto.com/10983441/2403957