css layout and background text properties

1. Layout method

1. Standard/Static Flow

Default layout, displayed top-to-bottom by code writing order and label type, left-to-right

2. Floating Layout

Primarily used to set the horizontal arrangement of block elements

1) Attribute: float

2) Value: left or right can be chosen to set the element to float left or right. Example: float:left/right;

3) Features:

  • Element setting floats detach from their original position, dock to the left or right on the edge of other elements, and no longer occupy a place in the document
  • Floating elements have the characteristics of block elements and can be adjusted manually
  • "Text wrapping": floating elements block the position of normal elements, cannot block the display of normal content, content is displayed around floating elements

4) Frequently asked questions: All child elements are set to float, resulting in zero parent element height, affecting parent element background color and background picture display, affecting page layout

5) Solution:

  • For elements with fixed content, if the child elements are floating, the parent element can be given a fixed height (example: navigation bar)
  • Add an empty block element at the end of the parent element.Set clear:both; clear floating
  • Set overflow:hidden for parent element; resolution height is 0
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #box{
 8             width:500px;
 9             height:500px;
10             margin:0 auto;
11             background:orange;
12 
13 
14         }
15         #d1,#d2,#d3{
16             width:200px;
17             height:200px;
18         }
19         #d1{
20 
21             background:red;
22             float:right;
23 
24         }
25         #d2{
26             height:300px;
27             background:green;
28             float:right;
29         }
30         #d3{
31             background:blue;
32             float:right;
33         }
34         span{
35             float:right;
36             width:200px;
37             height:200px;
38             background:pink;
39             <!--clear:both;-->
40 
41         }
42     </style>
43 </head>
44 <body>
45     <div id="box">box
46         <div id="d1">d1</div>
47         <div id="d2">d2</div>
48         <div id="d3">d3</div>
49         <span>span1</span>
50 
51     </div>
52     <!--Elements that are detached from the document stream are not in the station in the document,Height can be manually widened-->
53     <span>span2</span>
54 </body>
55 </html>
Floating Layout Demo 1

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width:200px;
 9             height:200px;
10             background:red;
11             float:left;
12             margin-right:30px;
13         }
14         h1{
15             background:green;
16 
17         }
18         input{
19         /*Normal elements locate in the document stream, floating elements locate in the upper layer*/
20             float:left;
21         }
22     </style>
23 </head>
24 <body>
25     <div></div>
26     <span>Inline elements</span>
27     <input type="text">
28     <h1>Floating elements can only obscure the position of elements, but do not affect content display</h1>
29 </body>
30 </html>
Floating Layout Demo 2

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #nav{
 8             width:900px;
 9             height:24px;
10             background:gray;
11         }
12         .left{
13             width:300px;
14             float:left;
15             background:green;
16         }
17         .right{
18             float:right;
19             background:red;
20             width:300px;
21         }
22         ul{
23             margin:0;
24             passing:0;
25             /*Remove list symbols*/
26             list-style:none;
27         }
28         li{
29             float:left;
30             margin-right:50px;
31         }
32         #main{
33             margin-top:50px;
34             width:900px;
35             /*Resolve the problem of floating child elements causing parent elements to tell 0*/
36             /*Solution 1:height:400px;*/
37             /*Solution 2: overflow:hidden;*/
38             overflow:hidden;
39             background:pink;
40         }
41         .item1{
42             width:580px;
43             height:400px;
44             background:gray;
45             float:left;
46         }
47         .item2,.item3{
48             width:300px;
49             height:190px;
50             background:gray;
51             float:right;
52         }
53         .item2{
54             margin-bottom:20px;
55         }
56         #i1,#i2{
57             width:200px;
58             height:200px;
59             background:red;
60         }
61         #i1{
62             background:green;
63             float:left;
64         }
65         #i2{
66             /*Make normal elements in the document unaffected by previous floating elements*/
67             /*clear:left/right/both*/
68             clear:left;
69         }
70         .clear{
71             clear:both;
72         }
73     </style>
74 </head>
75 <body>
76     <div id="nav">
77         <div class="left">
78             <ul>
79                 <li id="d1">home page</li>
80                 <li id="d2">logistics</li>
81                 <li id="d3">Customer</li>
82             </ul>
83         </div>
84         <div class="right">Right Navigation</div>
85     </div>
86     <div id="main">
87         <div class="item1">1</div>
88         <div class="item2">2</div>
89         <div class="item3">3</div>
90         <div class="clear">1</div>
91     </div>
92     <div>
93         Contact us
94         <div id="i1">1</div>
95         <div id="i2">2</div>
96     </div>
97 </body>
98 </html>
Floating Layout Demo 3

3. Positioning layout

Adjust the display position of the element with the offset attribute

1) Attribute: position

2) Value: relative/absolute/fixed Example: postion:relative/absolute/fixed

3) Offset property: Setting the positioning element can use the offset property to adjust the position of the distance reference object

top From top of Reference
Right from the right side of the reference
Bottom: from the bottom of the reference
left

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #banner{
 8             width:300px;
 9             height:250px;
10             /*Relative positioning*/
11             position:relative;
12         }
13         #d1{
14             color:#fff;
15             /*Absolute positioning*/
16             position:absolute;
17             height:30px;
18             right:0px;
19             /*Calculate the offset (250*50%) based on the value of the corresponding direction of the reference object*/
20             top:50%;
21             margin-top:-15px;
22         }
23         #d2{
24             color:#fff;
25             /*Absolute positioning*/
26             position:absolute;
27             height:30px;
28             /*Calculate the offset (250*50%) based on the value of the corresponding direction of the reference object*/
29             top:50%;
30             margin-top:-15px;
31         }
32         #fixed_{
33             position:absolute;
34             width:150px;
35             top:230px;
36             color:#fff;
37         }
38     </style>
39 </head>
40 <body>
41     <div id="banner">
42         <img src="northStar.jpg" class="c1" alt="">
43         <a href="" id="d1">Next</a>
44         <img src="timg.gif" class="c2" alt="">
45         <a href="" id="d2">Previous</a>
46     </div>
47     <div id="fixed_">
48         Fixed positioning
49     </div>
50 </body>
51 </html>
Fixed Position Demo

4) Classification

relative positioning of relatives (original placeholder)

Set relative positioning of elements to offset from their original position in the document without breaking away from the document stream

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #d1,#d2{
 8             width:200px;
 9             height:200px;
10             background:red;
11             margin:0 auto;
12         }
13         #d1{
14             background:green;
15             /*Relative positioning allows positioned elements to set offset properties and adjust their display position*/
16             position:relative;
17             /*
18             top:100px;
19             left:-100px;
20             */
21             bottom:-100px;
22             right:100px;
23         }
24     </style>
25 </head>
26 <body>
27     <div id="d1"></div>
28     <div id="d2"></div>
29 </body>
30 </html>
Relative Positioning Demo

absolute positioning (original position does not occupy space)

1. Absolutely positioned elements are offset from their nearest positioned ancestor elements, and if not, from the reference window
2. Absolutely positioned elements will flow away and do not occupy a place in the document. You can manually set the width and height using absolute positioning:

Parent-Child Absolute: Parent element set relative positioning, child element absolute positioning, refer to positioned parent element offset.

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #box{
 8             width:500px;
 9             margin:0 auto;
10             background:orange;
11             position:relative;
12         }
13         #d1,#d2{
14             width:200px;
15             height:200px;
16             background:red;
17 
18         }
19         #d1{
20             background:green;
21             /*Absolute positioning*/
22             position:absolute;
23             top:0;
24             left:0;
25 
26         }
27         body{
28             /*Set to Locate Element*/
29             position:relative;
30 
31         }
32     </style>
33 </head>
34 
35 <body>
36     <div id="box">
37         <div id="d1"></div>
38         <div id="d2"></div>
39     </div>
40 </body>
41 </html>
Absolute Positioning Demo

Fixed fixed positioning (no placeholder)

1. Locate by referencing the window and scroll without following the page
2. Get out of the document stream

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #main{
 8             height:1500px;
 9             background:pink;
10         }
11         #chat{
12             width:300px;
13             height:300px;
14             background:orange;
15             /*Fixed positioning: Off document stream, reference window offset;
16             Scroll without following the page*/
17             position:fixed;
18             right:0;
19             bottom:0;
20         }
21     </style>
22 </head>
23 <body>
24     <div id="main"></div>
25     <div id="chat">Thousands of years of legend, it is worth your own, register it, and send the slaughter dragon knife.</div>
26 </body>
27 </html>
Fixed Position Demo

5) Stacking order

The z-index attribute can be used to adjust the display position of positioned elements when they are stacked. The higher the value, the higher the element is:
Attribute: z-index
Value: Unitless values, the larger the number, the higher the value
Stack:
1. The positioned element stacks with the normal element in the document, always on top of the positioned element
2. Stacks occur for both located elements, in the order in which the HTML code is written, with the latter coming first

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             width:200px;
 9             height:200px;
10             background:red;
11         }
12         #d1{
13             background:green;
14             position:relative;
15             /*Only positioning elements can be positioned using the offset property*/
16             /*
17             position:relative;
18             top:100px;
19             left:100px;
20             */
21             z-index:1
22         }
23         #d2{
24             /*Always position element on top*/
25             position:relative;
26             left:100px;
27             bottom:-100px;
28 
29         }
30         #d2:hover{
31             /*Adjust stacking order, property: z-index
32             Take a value as a unitless integer, the larger the value, the higher the value
33             Only positioning elements can use the z-index attribute to adjust order*/
34             z-index:2;
35         }
36 
37     </style>
38 </head>
39 <body>
40     <!--The normal element stacks with the positioned element, and the positioned element is always displayed on top-->
41     <!--Stacked for the same positioning element, according to the writing order of the label, with the latter on top-->
42     <div id="d2"></div>
43     <div id="d1"></div>
44     <h1>
45         Implement web pages:
46         Above is the navigation bar (contains several navigation items, including drop-down menus)
47         Below is the rotation map area (including pictures, picture index, left and right buttons)
48     </h1>
49 </body>
50 </html>
z-index example

2. Background Properties

1. Background color

  background-color: red;

2. Background picture correlation

1) Set background picture: background-image: URL ("path");

Set up background pictures, specify picture paths, and quote if Chinese or spaces appear in the path

2) Set up the repetition of background pictures

Default background pictures are displayed from the top left corner of the element. If the picture size does not match the element size, the following will occur:

1. If the element size is larger than the picture size, it will automatically repeat tiling until the entire element is covered

2. If the element size is smaller than the picture size, the picture is displayed from the top left corner of the element by default, and the extra part is not visible

Value:

      background-repeat:repeat/repeat-x/repeat-y/no-repeat

3) Set the display position of the background picture: default display is in the upper left corner of the element background-position:x y;

- Value method:

1. Pixel value: Set the starting coordinate of the background picture in the element coordinate system

2. Azimuth value

Note: If only one orientation value is set, the other defaults to center

3.Percentage: Similar to the azimuth value, the display coordinates of the background picture are calculated based on the percentage.

- Calculation method:

* X= (Element Width-Background Picture Width) * x%

Longitudinal coordinates = (elemental height-background picture height) * y%

Special values:

0% 0% * Upper left corner

100% 100% Lower Right

50% 50% centered display

Smart Map Technology: In order to reduce network requests, you can stitch all the small icons together on one picture and get all the network requests at once; with background-position ing, you can adjust the position of the background picture to display different icons

4) Set the size of background picture: background-size:width height;

Value method:

1. Pixel value

1.500px 500px; also specify width and height

2.500px; Specify width, highly adaptive

2.Percentage: Percentage is calculated with reference to the size of the element

1.50% 50%; calculate the width and height of the picture separately based on the element width and height

2.50%; Scale pictures equally by element width and height

3. Short Background Properties: background:color url("") repeat position;

Note:

1. If the above attribute values need to be set at the same time, write in the appropriate order

2. background-size settings separately

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div,h1{
 8             width:100px;
 9             height:100px;
10             margin:200px auto;
11             background-color:pink;
12             background-image:url(northStar.jpg);
13 
14             /*y Axis Repeat*/
15             background-repeat:repeat-y;
16             /*x Axis Repeat*/
17             background-repeat:repeat-x;
18             /*Do not repeat*/
19             background-repeat:no-repeat;
20             /*background-position:-100px -100px;*/
21             background-position:100% 100%;
22         }
23         div:hover{
24             background-position:-160px -40px;
25         }
26         h1{
27             width:500px;
28             height:500px;
29             margin:0 auto;
30             /*
31             background-size Special value:
32             cover: Overlay stretches the picture equal to large enough to completely cover the element beyond which it is invisible (the smallest margin is as large as the element block)
33             contain:Contains stretching pictures to fit exactly within the element (maximum margin not exceeding the element block)
34             */
35             background-size:cover;
36         }
37         h2{
38             width:500px;
39             height:500px;
40             background:cyan url(northStar.jpg) no-repeat center;
41             font: 400 36px "Song Style";
42         }
43     </style>
44 </head>
45 <body>
46     <h2>Font Style Display</h2>
47     <h1></h1>
48     <div></div>
49 </body>
50 </html>
Background Properties Demo

3. Text Attributes

1. Font correlation

1) Set font size: font-size:20px;

2) Set the font thickness

Value:

3) Set Italic font-style:italic;

4) Set font name: font-family:Arial,'bold';

Value:
1. Multiple font names can be specified as alternate fonts, separated by commas
2. If the font name is in Chinese or if a space appears in the name, quotation marks must be used
Example: font-family:Arial;
font-family:'bold','Microsoft YaHei', Arial;

5) Short font attributes: font: style weight size family;

Be careful:
1. Write strictly in sequence if all four attribute values must be set
2. size family is required

2. Text Styles

1) Text color: color:red;

2) Text decoration line: text-decoration:none;

Value:

3) Horizontal alignment of text content: text-align:center;

Value:

4) Line height: line-height:30px;

Use: Text is always vertically centered in the current line, and the vertical position of text in the element can be adjusted by line height

Special: line-height s can calculate line heights by using a unitless number that represents a multiple of the current font size

5) font attribute abbreviation 2:font: size/line-height family;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{
 8             font-size:32px;
 9             font-weight:bold;
10             /*font-style:italic;*/
11             font-family:"Song Style","Bold";
12             color:blue;
13             text-decoration:none;
14             width:200px;
15             background:orange;
16             height:200px;
17             /*Centered*/
18             text-align:justify;
19             /*Same as text height (centered effect)*/
20             /*Calculate line height based on font size*/
21             line-height:2;
22         }
23         span{
24                                 /*Row Height*/
25             font:italic 700 32px/2 "Bold";
26             background:red;
27 
28         }
29     </style>
30 </head>
31 <body>
32     <h1>python</h1>
33     <p>hello python hello python hello python hello python hello python hello python</p>
34     <span>Life is short</span>
35 </body>
36 </html>
Text Attribute Demo

Tags: Python Attribute network

Posted on Fri, 12 Jul 2019 13:46:30 -0400 by davidb