Python Full Stack development * Background Positioning Z-index * 180813

I Back-ground
A. The color of the expression:
1. Words
2.rgb notation
RGB: Red Green Blue Three colors
Optical display each pixel is composed of three primary colors of the luminous original, by the luminance of different colors.
Separated by commas, the values of R, G, and B, each value range 0~255, a total of 256 values.
(1). 255 description is solid color.
(2) Black:
Background-color:rgb (0,0,0);
Optical display, each element is not illuminated, black
(3) White:
Background-color:rgb (255,255,255);
(4) Color can be superimposed, such as yellow is the red and green overlay:
Background-color:rgb (255,255,0);
3.16 binary notation
Two. Background-color attribute indicates background color
Three. Background-img: Represents the background picture that sets the element (then the default background picture is found, both horizontal and vertical tiles)
Four. Background-repeat: Indicates how to set the element tiling
(i). Property values
1.repeat default. The background image repeats in both vertical and horizontal directions.
(1) Background-position: property sets the starting position of the background image. This property sets the position of the background original image (defined by background-image)
(2) attribute value:
Value Description
Top left
Top Center
Top Right
Center left
Center Center
Center Right
Bottom Left
Bottom Center
Bottom right
Note: If you specify only one keyword, then the second value will be "center". Default value: 0 0; The two values must be together.
: Adjust the position of the background image if it is positive;
: If a negative value is keyed on a large chart.
2.repeat-x background image will be repeated in horizontal direction
3.repeat-y background image will repeat in vertical direction
4.no-repeat background image will be displayed only once
5.INHERIT specifies that the setting of the Background-repeat property should be inherited from the parent element
(ii). Sprite diagram Technology;
1.CSS Sprite is CSS Sprite, also some call it CSS Wizard, is a kind of CSS image merging technology, this method is to combine small icons and background image on a picture,
Then use the background positioning of the CSS to display the part of the picture that needs to be displayed
2.CSS Sprite Diagram Application principle:
There is only one big merge chart, how do each small icon node show a separate small icon?
In fact, it is to intercept a large portion of the display, and this part is a small icon.
3. Benefits of using Sprite charts:
(1), the use of CSS sprites can be a good way to reduce the Web page HTTP requests, thereby greatly improve the performance of the page, which is the greatest advantage of CSS sprites, but also its widely spread and application of the main reason;
(2), CSS sprites can reduce the number of bytes of the picture, has compared the number of times 3 images merged into 1 images of the byte is always less than the sum of the bytes of the 3 pictures.
(3), to solve the problem of Web designers in the name of the picture, just a set of pictures named on it, do not need to name every small element, thus improving the production efficiency of the page.
(4), the replacement style is convenient, just need to change the color or style of the picture on one or fewer pictures, the whole page style can be changed. More convenient to maintain.
4. Insufficient:
1) The biggest problem with CSS sprite is memory usage
2) Puzzle Maintenance More trouble
3) Making CSS difficult to write
4) CSS Sprite call picture cannot be printed
5. We can use background comprehensive properties to create the banner, what is the banner, is generally our computer screen is 1439. But the designer gave me
The banner map will be bigger than this,
Then we can create the banner with this property.
background:red url ('./images/banner.jpg ') no-repeat Center top;
Example:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
. cont{
width:100%;
height:1000px;
}
Advertising
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>
<body>
<div class= "cont" >
<div class= "Ads" >

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

Five. Background-attachment
The fixed background picture does not scroll with the browser scrolling after setting the fixed

II iconfont (font icon)
Example:
<! DOCTYPE html>
<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>
<body>
<i class= "Iconfont" >& #xe629;</i>

</body>
III positioning
Three types of positioning: relative positioning absolute positioning fixed positioning
I. Relative positioning:
1. Definition: Positioning relative to their original position
2. Phenomenon:
(1). If only relative positioning is set for the current element, then what is the difference between a box with a standard flow.
(2). After setting the relative positioning, we can use the properties in four directions: top, bottom, left, right
3. Features:
1. No off-label
2. Will act separation
3. Stay in the pit (outhouse not to poop, disgusting people)
4. Use:
1. Fine-Tune element position
2. Absolute positioning of the reference (parent Shangzi) Absolute positioning will speak of this content.
5. Reference point;
Their original position to do reference points.
6. Example: fine-tuning elements
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
a{
position:relative;
Top: -5px;
}
input{
font-size:30px
}
</style>
<body>

<a href= "#" > Baidu </a>
<!--
<input type= "Text" >
</body>
Two. Absolute positioning;
1. Features:
(1). Off-label
(2). To cover the effect, the Commission of the level. When you set absolute positioning, you can set the width height without distinguishing between inline and block-level elements.
2. Reference point;
(1) A single, absolutely positioned box
* When I use the Top property description, the position is adjusted in the upper left corner of the page (as distinguished from the top left corner of the browser) as the reference point.
* * When I use the bottom attribute description. is to adjust the position by the lower left corner of the first screen page as the reference point.
(2) Take the Father's box as the reference point
* Parent elements set relative positioning, child elements set absolute positioning, then will be the parents of the upper left corner of the element as a reference point, the father is not necessarily father, it can also be grandpa, Grandpa.
* * Father set the location, then the father as a reference point. So if the father does not set the positioning, then the parent element set positioning as the reference point
Not only the Father Shangzi, the father absolutely son, the father of the son is absolutely, all is the Father element as the reference point
3. function.
Page layout
4. Center the box with absolute positioning
<! DOCTYPE html>
<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>
<body>
<div class= "Father" >
<div class= "Child1" ></div>
<!--<div class= "Child2" ></div>-->
</div>
</body>
Attention:
/* After setting absolute positioning, margin:0 auto; no effect, if you want to center the absolutely positioned box. As a formula note to set the child element absolute positioning, and then left:50%; Margin-left is equal to half the width of the element, achieving absolute positioning of the box center */
20}
Three. Fixed positioning;
Fixed the current element does not scroll as the page scrolls
1. Features:
(1). Off-label
(2). Cover, Raise the level
(3). Fixed unchanged
2. Reference point:
(1). Set fixed positioning, described with top. So the top left corner of the browser is the reference point.
(2). If you describe it with bottom, it is the reference point in the lower left corner of the browser
3. Function:
(1). Return to the top bar
(2). Fixed navigation bar
(3). Small ads
Example:
<! DOCTYPE html>
<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>
<body>
<div class= "Box1" ></div>
<div class= "Box2" ></div>
</body>
Four. Z-index
Characteristics:
The 1.z-index value indicates who is pressing, the numerical value of the large gland is small
2. Only the positioned elements can be z-index, that is, regardless of the relative positioning, absolute positioning, fixed positioning, are able to use z-index, and floating elements cannot use Z-index
3.z-index value has no unit, is a positive integer, the default Z-index value is 0 if everyone has no z-index value, or Z-index value, then who writes behind the HTML,
Who presses someone on top, positions the element, and forever presses the element with no positioning.
4. From the parent phenomenon: Father's counsel, son no matter how useless
Example:
<! DOCTYPE html>
<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>
<body>
<div class= "Tianliang" >
<div class= "Sendie" ></div>
</div>
<div class= "Lin" >
<div class= "Timi" ></div>
</div>
</body>
Python Full Stack development * Background Positioning Z-index * 180813