python全栈开发 * background 定位 z-index * 180813

时间 2019-11-19
标签 python 开发 background 定位 index 栏目 Python 繁體版
原文原文链接
I   back-ground    一.颜色的表示:    1.单词    2.rgb表示法        rgb:红色  绿色 蓝色 三原色            光学显示器每一个像素都是由三原色的发光原件组成的，靠明亮度不一样调成不一样的颜色的。            用逗号隔开，r、g、b的值，每一个值的取值范围0~255，一共256个值。        (1).255 说明是纯色.        (2)黑色：            background-color: rgb(0,0,0);            光学显示器，每一个元件都不发光，黑色的        (3)白色：            background-color: rgb(255,255,255);        (4)颜色能够叠加，好比黄色就是红色和绿色的叠加：            background-color: rgb(255,255,0);    3.十六进制表示法    二.background-color属性表示背景颜色    三.background-img:表示设置该元素的背景图片(那么发现默认的背景图片，水平方向和垂直方向都平铺)    四.background-repeat:表示设置该元素平铺的方式    (一).属性值    1.repeat                    默认。背景图像将在垂直方向和水平方向重复。        (1)background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置        (2)属性值:            值  描述            top left            top center            top right            center left            center center            center right            bottom left            bottom center            bottom right        注意:若是您仅规定了一个关键词，那么第二个值将是"center"。默认值：0 0；这两个值必须挨在一块儿。        ***:若是是正值调整背景图片的位置;        ***:若是是负值在一张大图上抠小图.    2.repeat-x                  背景图像将在水平方向重复    3.repeat-y                  背景图像将在垂直方向重复    4.no-repeat                 背景图像将仅显示一次    5.inherit                   规定应该从父元素继承 background-repeat 属性的设置    (二).精灵图技术;    1.CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，        而后利用css的背景定位来显示须要显示的图片部分    2.CSS 雪碧图应用原理：        只有一张大的合并图， 每一个小图标节点如何显示单独的小图标呢？        其实就是 截取 大图一部分显示，而这部分就是一个小图标。    3.使用雪碧图的好处:        (1)、利用CSS Sprites能很好地减小网页的http请求，从而大大的提升页面的性能，这也是CSS Sprites最大的优势，也是其被普遍传播和应用的主要缘由；        (2)、CSS Sprites能减小图片的字节，曾经比较过屡次3张图片合并成1张图片的字节老是小于这3张图片的字节总和。        (3)、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就能够了，不须要对每个小元素进行命名，从而提升了网页的制做效率。        (4)、更换风格方便，只须要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就能够改变。维护起来更加方便    4.不足：        1）CSS雪碧的最大问题是内存使用        2）拼图维护比较麻烦        3）使CSS的编写变得困难        4）CSS 雪碧调用的图片不能被打印    5.咱们可使用background综合属性制做通天banner，什么是通天banner呢，就是通常咱们电脑的屏幕都是1439.可是设计师给我        们的banner图都会比这个大，       那么咱们能够此属性来制做通天banner。        background:  red  url('./images/banner.jpg')  no-repeat   center top;    示例:    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Title</title>        <style>            *{                padding:0;                margin:0;            }            .cont{                width:100%;                height:1000px;            }            .广告{                width:200px;                height:200px;                background-image:url(https://img.alicdn.com/tfs/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png);                background-repeat:no-repeat;                border:1px solid black;                background-position:0 -200px;                background-attachment:fixed;            }        </style>    </head>    <body>        <div class="cont">            <div class="广告">            </div>        </div>    </body>     五.background-attachment     设置fixed以后，该属性固定背景图片不随浏览器的滚动而滚动 II   Iconfont(字体图标) 示例:         <!DOCTYPE html>        <html lang="en">        <head>            <meta charset="UTF-8">            <title>Title</title>            <style>                @font-face {font-family: 'iconfont';            src: url('iconfont.eot');            src: url('iconfont.eot?#iefix') format('embedded-opentype'),            url('iconfont.woff') format('woff'),            url('iconfont.ttf') format('truetype'),            url('iconfont.svg#iconfont') format('svg');        }                .iconfont{            font-family:"iconfont" !important;            font-size:16px;font-style:normal;            -webkit-font-smoothing: antialiased;            -webkit-text-stroke-width: 0.2px;            -moz-osx-font-smoothing: grayscale;}            </style>        </head>        <body>            <i class="iconfont">&#xe629;</i>        </body>        </html>III     定位定位有三种： 相对定位 绝对定位 固定定位一.相对定位:1.定义:相对于本身原来的位置定位2.现象:    (1).若是对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。    (2).设置相对定位以后，咱们才可使用四个方向的属性： top、bottom、left、right3.特性:    1.不脱标    2.形影分离    3.老家留坑（占着茅房不拉屎，恶心人）4.用途:    1.微调元素位置    2.作绝对定位的参考（父相子绝）绝对定位会说到此内容。5.参考点;    本身原来的位置作参考点。6.示例:微调元素    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title></title>        <style>            a{                position: relative;                top: -5px;            }            input{                font-size: 30px            }        </style>    </head>    <body>        <a href="#">百度一下</a>        <!-- <img src="../day49/images/2.jpg" alt=""> -->        <input type="text">    </body>    </html>二.绝对定位;1.特性:(1).脱标(2).作遮盖效果，提成了层级。设置绝对定位以后，不区分行内元素和块级元素，都能设置宽高2.参考点;    (1)单独一个绝对定位的盒子        *  当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置        ** 当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置    (2)以父辈盒子做为参考点    *父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不必定是爸爸，它也能够是爷爷，曾爷爷。    **果父亲设置了定位，那么以父亲为参考点。那么若是父亲没有设置定位，那么以父辈元素设置定位的为参考点    ***不单单是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点3.做用.    页面布局4.绝对定位的盒子居中    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Title</title>        <style>            *{                padding:0;                margin:0;            }            .father{                width:100%;                height:1000px;                background-color: wheat;                position:relative;                top:30px;                border:1px solid black;            }            .child1{                width:200px;                height:200px;                background-color:blue;                position:absolute;                top:50px;                left:50%;                margin-left:-100px;            }        </style>    </head>    <body>        <div class="father">            <div class="child1"></div>            <!--<div class="child2"></div>-->        </div>    </body>    </html>注意:/*设置绝对定位以后，margin:0 auto;不起任何做用，若是想让绝对定位的盒子居中。当作公式记下来 设置子元素绝对定位，而后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/20  }三.固定定位;固定当前的元素不会随着页面滚动而滚动1.特性:    (1).脱标    (2).遮盖，提高层级    (3).固定不变2.参考点:    (1).设置固定定位，用top描述。那么是以浏览器的左上角为参考点    (2).若是用bottom描述，那么是以浏览器的左下角为参考点3.做用:    (1).返回顶部栏    (2).固定导航栏    (3).小广告示例:    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Title</title>        <style >            .box1{               width:200px;                height:200px;                background-color:pink;                position:fixed;                bottom:50px;                right:5px;            }                .box2{               width:500px;                height:1000px;                background-color:yellow;            }        </style>    </head>    <body>        <div class="box1"></div>        <div class="box2"></div>    </body>    </html>四.z-index特性:1.z-index 值表示谁压着谁，数值大的压盖住数值小的2.只有定位了的元素，才能有z-index,也就是说，无论相对定位，绝对定位，固定定位，均可以使用z-index，而浮动元素不能使用z-index3.z-index值没有单位，就是一个正整数，默认的z-index值为0若是你们都没有z-index值，或者z-index值同样，那么谁写在HTML后面，    谁在上面压着别人，定位了元素，永远压住没有定位的元素。4.从父现象：父亲怂了，儿子再牛逼也没用示例:<!DOCTYPE html><html lang="en"><head>   <meta charset="UTF-8">   <title>Document</title>   <style>      .tianliang{         width: 300px;         height: 300px;         background-color: green;         position: relative;         z-index: 2;         border-radius: 50%;      }      .lin{         width: 300px;         height: 300px;         background-color: yellow;         position: relative;         z-index: 3;      }      .sendie{         width: 100px;         height: 100px;         background-color: red;         position: absolute;         top: 280px;         left: 350px;         z-index: 2;      }      .timi{         width: 100px;         height: 100px;         background-color: black;         position: absolute;         top: -50px;         left: 350px;      }   </style></head><body>   <div class="tianliang">      <div class="sendie"></div>   </div>   <div class="lin">      <div class="timi"></div>   </div></body></html>