ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

css续集3

2019-06-02 20:55:12  阅读：200  来源： 互联网

标签：文字 续集 url padding repeat background position css


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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有