Second, CSS and CSS3 beautify the page
1. Introduction to the CSS
1.1 What is THE CSS?
CSS refers to Cascading Style Sheets
Styles define how to display and control HTML elements to beautify HTML pages.
Styles are usually stored in stylesheets to address the separation of content and presentation
External stylesheets (CSS files) can greatly improve productivity
Multiple style definitions can be layered on top of one another, and the latter can override the former
1.2 Cascading sequence of styles
In general, all styles are stacked in a new virtual style sheet according to the following rules, with the number 4 having the highest priority.
- 1. Default Settings of the browser
- 2. External style sheets
- 3. Internal stylesheets (inside the tag)
- 4. Inline styles (inside HTML elements)
Therefore, inline styles (inside HTML elements) have the highest priority, meaning that they will take precedence over style declarations in the AA tag, in an external style sheet, or (by default) in the browser.
2. CSS basic syntax
2.1 introduction
Format: selector {property: value; Attribute: value; Attribute: value; . }
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> < span style> < span style> < span style> font-size: 30px; } li{color:green; font-size: 15px; line-height: 30px; } </style> </head> <body> <! -- CSS Style basics syntax example --> < H3 > What is CSS? </ H3 > <ul> < Li >CSS refers to Cascading Style Sheets </li> <li> styles that define how to display and control HTML elements to beauify HTML web pages. </li> <li> Styles are usually stored in style sheets, also to solve the problem of separating content from presentation. </li> <li> External style sheets (CSS files) can greatly improve productivity. The latter can override the former style </li> </ul> </body> </ HTML >Copy the code
2.2 annotations
Format: /*… * /
3. How to use the CSS
3.1 How do I Insert a Style Sheet
There are three ways to insert a stylesheet:
- External Style Sheets
- Internal Style Sheet
- Inline style
3.2 External Import Mode (External Link In)
1) (recommended) import a CSS file using the tag in the head tag, and implement the CSS style Settings in this page
<link href=" stylesheet" type="text/ CSS "rel="stylesheet"/>Copy the code2) You can also use import to import CSS files in the style tag.
<style type="text/css">
@import "style.css";
</style>
Copy the codeFeatures: Applies to the entire site
Priority: When styles conflict, the proximity rule applies, which values the CSS property closest to the content being decorated.
Use overlay if there are no style conflicts
For example,
2020-10-30 10/100 qq_41528502 HTML <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > <! < font style ="stylesheet" href="./ CSS /my.css"> </head> <body> <h1> There are three ways to insert stylesheets :</h4> <ul> External style sheet </li> <li> Internal style sheet </li> <li> Inline style </li> </ul> </body> </html>Copy the code
3.3 Internal Mode (Embedded Style)
Use…. in the head tag Tag to set CSS styles
<style type="text/css"> .... </style> <! -- Features: applies to the entire current page -->Copy the codeFor example,
Check the element
3.4 Inline Mode (Inline Style)
Use the style attribute in the HTML tag to set the CSS style
< p style=” max-width: 100%; clear: both; min-height: 1em; Attribute: value; …” > Modified content </ HTML tag >
<p style="color:blue; </p> <! -- Feature: Applies only to this label. -->Copy the code3.5 Summary of the three style sheets
4. CSS common selectors
4.1 CSS2 Selector (Important)
[ID selector]->[class selector]->[HTML selector]->[HTML attribute]
You can also modify the priority rule in the following ways:
1) HTML selectors (tag selectors)
Using HTML tags as selectors (using HTML tags as selectors’ names)
- Such as p {… } All p tags in web pages use this style
- h2{…. } All H2 tags in web pages use this style
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> /*1, < span style> < span style> } </style> </head> <body> <h1> </h1> < H3 > What is CSS? </ H3 > <ul> < Li >CSS refers to Cascading Style Sheets </li> <li> styles that define how to display and control HTML elements to beauify HTML web pages. </li> <li> Styles are usually stored in style sheets, also to solve the problem of separating content from presentation. </li> <li> External style sheets (CSS files) can greatly improve productivity. The latter can override the former style </li> </ul> </body> </ HTML >Copy the code
2) Class class selector (use dot. A selector to define a custom name (class name)
Definition: a.
- Class name {style…. } anonymous class
- Other selector names. Class name {style…. }
Use:
- < HTML tag class=” class name “>… > < / HTML tags
- .mc{color:blue; } /* All classes with a class value of MC use this style */
- p.ps{color:green; } /* Only p tags with class values of ps will use this style */
Note:
- Class selectors can be reused in web pages
3) Id selector
Definition: #id name {style….. }
Use: < HTML tag id=”id name “>… > < / HTML tags
Note: THE ID selector is used only once in a web page (generally, an ID only appears in one place)
4) Associative selectors (including selectors)
Format: selectors 1 selectors 2 selectors 3… {style… }
table a{.... H1 p{color:red} /* Only p tags in h1 tags use this style */Copy the code
(Separated by Spaces)
Is equivalent to
Also like
5) Combinatorial selectors (groups of selectors)
Format: selectors 1, 2, 3… {style… }
h3,h4,h5{color:green; } /* This style is used for h3, H4, and H5Copy the code
6) pseudo-class selector (pseudo-element) selector
Format: Label name: pseudo-class name {style…. }
a:link {color: #FF0000; / / a:visited {color: #00FF00; color: #00FF00; color: #00FF00; Hover {color: #FF00FF; color: #FF00FF; Text-indent: underline} / / a:active {color: #0000FF; Text-indent: underline} /* Indent: underline */Copy the code
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> < span style> < span style> < span style> Cc {color:hotpink} /* H1 header tags with class attributes of cc use this style */ h1. } .dd{background-color:#ddd; } #hid{font :40px;} #hid{font :40px; } #sid{color:greenyellow}. Sc {color:green; background-color:#ddd; } span{color:red ! important; font-size:22px; } /*4. The association selector (including the selector) */ /* The li label under the OL label uses this style */ OL Li {color: lightSeagreen} /*5. */ h1,h2,h3,h4,h5,h6{backland-color: linen; font-family:Arial, Helvetica, sans-serif; } /*6. A :link {color: #FF0000; / / a:visited {color: #00FF00; color: #00FF00; color: #00FF00; Hover {color: #FF00FF; color: #FF00FF; Text-indent: underline} / / a:active {color: #0000FF; </style> </head> <body> <h1 class="cc"> </h1> <h3 id="hid"> </ H3 > <ul> <li>CSS refers to Cascading Style Sheets </ Li > <li class=" CC "> styles that define how to display and control HTML elements to beaux HTML web pages. </li> <li> Styles are usually stored in style sheets, also to solve the problem of separating content from presentation. </li> <li class="cc DD "> External style sheets (CSS files) can greatly improve work efficiency. The latter can override the former style </li> </ul> < SPAN class=" SC "id="sid"> Common selectors for CSS </span> < H4 > There are three ways to insert style sheets :</h4> < OL > <li> External style Sheet)</li> <li>< li> Inline style </li> </ol> <ul> <li><a href=" A.html? Id = 1111 "> CSS syntax examples < / a > < / li > < li > < a href =" b.h HTML "> CSS styles use < / a > < / li > < / ul > < / body > < / HTML >Copy the codeCSS relationships and property selectors
5.1 Relationship selectors
Div >p selects all p elements that are children of the div element
Div +p selects the p element immediately after the div element
Div ~p selects all siblings of the div element p
<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, "> <title>CSS selector instance </title> <style> /*ul li{color:red; */ ul > li{color:blue; } div+p{color:red; */ div~p{color:red; } < / style > < / head > < body > < h1 > relationship selector < / h1 > < ul > < li > list level (1 < / li > < li > list level (2 < / li > < ol > < li > secondary component list 1 < / li > < li > list of secondary component 2 < / li > < / ol > < / ul > < div > aaaaaa < / div > < p > QQQQQQQQQQ < / p > < p > QQQQQQQQQQ < / p > < div > BBBBBB < / div > < p > QQQQQQQQQQ < / p > <p>qqqqqqqqqq</p> <p>qqqqqqqqqq</p> </body> </html>Copy the codeThe blank space to separate
> to separate
+ space
To separate
5.2 Property selector
[attribute] Selects the element with the attribute attribute.
[attribute=value] Selects the element with the attribute attribute whose value is equal to value.
[attribute~=value] Selects a list of words with attribute attributes separated by space, and one of the elements is equal to value.
[attribute | = value] choose to have att attributes and attribute values for starting with val and connector E elements of “-” delimited string.
[attibute^=value] Matches the E element that has the attribute attribute and the value starts with valule
[attribute$=value] Matches E elements with attribute attributes whose values end in value
[attribute*=value] Matches E elements that have the attribute attribute and the value contains value
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> /* li[title]{color:red; color:red; }*/ /*li[title="bb"]{color:red; }*/ * li[class~="aa"]{color:red; } * / / * contains a class attribute value (in - separated) begin with aa of li li tags using this style * / / * [class | = "aa"] {color: red; } * / / * class attribute value is a substring beginning b * / / * li [class ^ = "b"] {background - color: # DDD; }*/ /*class $="dd"]{background-color:# DDD; }*/ /*li[class*="bb"]{background-color:# DDD; } * / < / style > < / head > < body > < h1 > CSS attribute selectors in the < / h1 > < ul > < li class = "aa and bb" title = "HTML" > 1. HTML selector < / li > < li "Class =" bb - cc > 2. Class class selector < / li > < li class = "cc dd" title = "id" > 3. The id selector < / li > < li class = "bb - dd > 4. Associative selector </li> <li class="aa bb" title="bb">5. Group selector </li> <li class="bb aa">6. Pseudo-class selector </li> </ul> </body> </ HTML >Copy the codeattribute
attribute=value
attribute~=value
attribute|=value
attibute^=value
attribute$=value
attribute*=value
CSS pseudo-class selector
6.1 Structural pseudo-class selectors
::first-letter Sets the style of the first character in the object.
::first-line Sets the style of the first line within the object.
:before Sets what happens before the object (according to the logical structure of the object tree).
:after Sets what happens after the object (according to the logical structure of the object tree).
:lang(language) Matches E elements that use a special language.
:element1~element2:
:first-of-type Matches the first sibling of the same type
:last-of-type Matches the last sibling element of the type
:only of type Matches the only sibling element of the same type
:only-child Matches the only child element of the parent element
*:nth-child(n) matches the NTH child of the parent element
:nth-last-child(n) matches the penultimate sibling element of the same type
*:first-child matches the first child of the parent element
* :last-child matches the last child of the parent element
:root Matches the element at the root of the document. In HTML, the root element is always HTML
:empty matches elements that do not have any children, including text nodes
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Initial - scale = 1.0 "> < title > Document < / title > < style > / * p.c c: first - letter {color: blue; font-size:30px; }*/ /*p.cc:first-line{color:red; } h1::before{content:"Hello "; } h1::after{content:" selector "; } ul li:first-child{color:red; } ul li:last-child{color:red; } ul p:first-of-type{color:blue; } ul li:nth-child(4){background-color:#ddd; } p:not(.cc){background-color: powderblue; } h1:hover{color:red; font-size:30px; }*/ </style> </head> <body> <h1>CSS selector: false class/false element </h1> <p class="cc"> Students who sit in the office for a long time should pay more attention to exercise. Today, the sun is shining and the sky is clear, which is perfect for outdoor activities, such as outing, hiking and so on. Students who sit in the office for a long time should pay more attention to exercise. Today, the sun is shining and the sky is clear, which is perfect for outdoor activities, such as outing, hiking and so on. Students who sit in the office for a long time should pay more attention to exercise. </p> <ul class="demo"> <li>1.aaaaaaa</li> <li>2.aaaaaaa</li> <p>bbbbbbbb</p> <li>3.aaaaaaa</li> <li>4.aaaaaaa</li> <p>bbbbbbbb</p> <li>5.aaaaaaa</li> <li>6.aaaaaaa</li> </ul> </body> </html>Copy the codeUnadorned effect
First-letter sets the style of the first character in the object
::first-line Sets the style of the first line within the object
Before sets what happens before the object (according to the logical structure of the object tree)
First-child matches the first child of the parent element
First-of-type matches the first sibling element of the same type
6.2 * State pseudo-class selector
:link Sets the style of hyperlink A before it is accessed.
:visited Sets the style of hyperlink A when its link address has been visited
:active Sets the style of the element when activated by the user (the event that occurs between mouse click and release)
*:hover sets the style of the element when it hovers
*:focus sets the style of the element when it gets focus
:target matches the E element pointed to by the related URL
:enabled Matches the elements in the available state on the user interface
:disabled Matches elements in the disabled state on the user interface
: Checked Matches selected elements in the user interface
:not(selector) Matches elements that do not contain a selector
::selection Sets the style of the object when it is selected
Hover sets the style of the element when it hovers
Mouse over title one
6.3 Other pseudo-class selectors
E: not (s) : {attribute}
Matches all elements E that do not match the simple selector S
p:not(.bg) {background-color:#00FF00; }
7. Dimensions and units of the CSS
7.1 size
7.2 color
1) briefly
2) Color properties
A. HSL color:
Various colors can be obtained by changing the three color channels of hue (H), saturation (S) and brightness (L) and superimposing them on each other.
Background – color: an HSL (240100%, 50%); Color: white.
B. HSLA color:
Hue (H), saturation (S), brightness (L), transparency (A);
Background – color: hsla (0100%, 50%, 0.2);
* C. RGB color:
Red (R), green (G), blue (B) three color channel changes
Background – color: rgba (200100, 0);
background-color: rgba(100%,10%,0%);
background-color: #1c89c4; //RGB Hexadecimal representation of the three values
D. RGBA color:
Red (R), Green (G), Blue (B), Transparency (A)
Background – color: rgba (0,0,0,0.5);
*e. Image transparency Settings
Img. Opacity {opacity: 0.25; }
Compatible with IE8 filter: alpha (opacity = 100);
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, Word-wrap: break-word! Important; "> <title>Document</title> <style> div.cc{width:400px; height:400px; / * background - color: RGB (28137196); */ /*background-color:rgb(100%,0%,0%); */ /*background-color:#1c89c4; * / background - color: rgba (28137196,0.5); } < / style > < / head > < body > < h1 > CSS attributes: commonly used size and unit < / h1 > < h3 > color units: < / h3 > < ul > < li > name of color words: such as: Red/blue < / li > < li > RGB values (RGB (0, 255), for example) : [RGB (0, 0) to RGB (255255255)] < / li > < li > RGB percentage (RGB (100%, 0%, 0%), for example) < / li > <li> hexadecimal number (e.g. #ff0000):[#000000~#FFFFFF]</li> </ul> <div class="cc"> #2ac #ddd #dddddd </div> </body> </html>Copy the code8. CSS font and text properties
8.1 Font Properties: font
The font: shorthand
*font-size: font size: 20px, 60% based on the percentage of the parent object
*font-family: 宋体, Arial
Font-style: normal; Italic font. Oblique fonts
*font-weight: font bold
Font – Variant: small-caps A small uppercase font
Text is stretched relative to the normal width of the font displayed by the browser (most browsers do not support this).
What font can be tested using the escape() encoding function in JS
8.2 Text Attributes
Text-indent: first line indent: text-indent:2em;
Text-overflow: Whether text overflows with ellipsis flags (…) . Clip | ellipsis (display omit tag)
*text-align: left center right
Text – transform: the object of the text in the case: capitalize (initials) | uppercase capital | lowercase lowercase
* Text-decoration: none, underline, line-through
Text decoration line: The location of the text decoration line
*text-shadow: Whether the text is shaded or blurred. You can move it left and right, up and down, and set the blur and color. The idea is to create another set of identical words that overlap to create a sense of shadow
Vertical-align: the vertical alignment of text (default: baseline, top, middle, bottom)
Direction: indicates the direction of text flow. ltr | rtl
white-space:nowrap; /* Forces all text to be displayed on the same line */
*letter-spacing: The spacing between words or letters
Word-spacing: word spacing
*line-height: line height It is generally adjusted in accordance with multiple
*color: font color
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> h1{color:blue; text-shadow:0px 0px 6px blue; } h3{ color:red; } h3:hover{ text-shadow:0px 0px 3px red; } div. C1 {width:480px; /* font-size: 20px; Font-family: "Microsoft YaHei", "Heiti SC", Tahoma, Arial; /* font style: italic; /* italic */ font weight:bold; /* font-size: 10.0pt; } /* The following font modifier is equivalent to the above */ div.c2{width: 480px; Font: Bold ITALic 20px/1.5 "Microsoft YaHei", "Heiti SC", Tahoma, Arial; } div.dcc{ width: 480px; The font: 14 px / 1.5 "Microsoft YaHei", "arial". color: #333; text-indent:2em; /* Indent the first line of each paragraph by 2 characters */ letter-spacing: 1px; / / img{float: left; margin:10px; } div.c3{ width:480px; height:50px; background-color: thistle; text-align:center; /* Word-break: break-all; /* Line height 50px, and the content will automatically center */ text-decoration: line-through; /* delete line */} span. Ss {font-size:40px; vertical-align: middle; } </style> </head> <body> <h1> </h1> <div class="c1"> inner style is to place style sheets inside the HEAD tag of HTML, each style sheet is given a name, Used to identify a style. Use the class attribute to introduce a defined style name in an HTML element. Internal styles have a lower priority than inline styles but a higher priority than external styles. The following HTML document is an example of an internal style. </div> <div class="c2"> Inner styles place style sheets inside the HEAD tag of HTML, each style sheet given a name that identifies a style. Use the class attribute to introduce a defined style name in an HTML element. Internal styles have a lower priority than inline styles but a higher priority than external styles. The following HTML document is an example of an internal style. </div> <h3> Three ways to apply CSS styles to HTML elements </h3> <div class=" DCC "> <img SRC ="./images/ meinv083.jpg "width="180"/> <p> Inline styles are introduced into the style sheet using the style attribute of an HTML element. Inline styles take precedence and override internal or external styles introduced by the element. The following HTML document is an example of inline styles. </p> <p> Inner styles place style sheets inside the HEAD tag of HTML, each style sheet given a name that identifies a style. Use the class attribute to introduce a defined style name in an HTML element. Internal styles have a lower priority than inline styles but a higher priority than external styles. The following HTML document is an example of an internal style. </p> <p> External styles write the style sheet to an external file with the extension CSS. The style sheet is written the same as the internal style. An external style file can be linked to a web document through the HTML's Link tag, and after the style sheet file is linked to a web document, the HTML element can be introduced into the style sheet in the style file through the class attribute. External styles have the lowest priority. </p> </div> <hr/> <div class=" C3 "> The external style is to write the style sheet to an external file </div> <br/>< span class=" SS "> The external style </ SPAN > is to write the style sheet to an external file <br/><br/><br/><br/><br/><br/><br/> </body> </html>Copy the code9. CSS background properties
9.1 Background Property Background
Background: shorthand
*background-color: background color
*background-image: background image
*background-repeat: Whether and how to repeat? (Default repeat, repeat-x, repeat-y)
* Background-position: position (top, center, bottom, right)
Background-attachment: whether to fix the background,
- Scroll: default value. The background image is scrolling with the object content
- Fixed: The background image is fixed
Css3 attributes:
*background-size: background size, such as background-size:100px 140px;
Multi-layer background:
background:url(test1.jpg) no-repeat scroll 10px 20px, url(test2.jpg) no-repeat scroll 50px 60px, url(test3.jpg) no-repeat scroll 90px 100px; background-origin:content-box,content-box,content-box; background-clip:padding-box,padding-box,padding-box; background-size:50px 60px,50px 60px,50px 60px; Copy the code
The example code is as follows, and the image in images can be set by itself
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, < span style> < span style> < span style> url(./images/Meinv083.jpg); background-attachment: fixed; } */ div{ width:400px; height:300px; border:1px solid #ddd; margin:10px; float:left; } div.c1{ /* background-color:cadetblue; background-image: url("./images/1.gif"); background-repeat: no-repeat; background-position: bottom right; */ /* Equivalent to the above short: background image 1.gif, center, left, right, not tile, background color */ background: url(. } div.c2{ background-image:url(./images/Meinv083.jpg); background-repeat: no-repeat; background-position: -100px -320px; } div.c3{/* Effect the same as above */ background: URL (./images/ meinv083.jpg) -100px-320px no-repeat; } div.c4{ background:url(./images/repeat.png) 0px 0px repeat-x; } /* Clasp navigation bar */ div.c5{background:url(./images/repeat. PNG) 0px -92px repeat-x; height:40px; } /* Button small icon */ div.c6{background: url(./images/v_icon.png) -110px-115px no-repeat; width:30px; height:30px; } */ div. C7,div. C8,div. C9 {width:30px; height:28px; border: none; background: url(./images/step.gif) 0px 0px no-repeat; } div.c8{background-position: -31px 0px; } div.c9{background-position: -62px 0px; } div.c7:hover{background-position: 0px -28px; }} div. C8 :hover{background-position: -31px-28px; } div.c9:hover{background-position: -62px -28px; } div.c10{ background: url(./images/Meinv039.jpg) no-repeat; background-size:100%; } /* gradient */ div. C11 {background-image: repeating-Linear-gradient (to right,#f00,# FFF); } </style> </head> <body> <h1> background</h1> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> <div class="c5"></div> <div class="c6"></div> <div class="c7"></div> <div class="c8"></div> <div class="c9"></div> <div class="c10"></div> <div class="c11"></div> <div class="c12"></div> <div class="c13"></div> </body> </html>Copy the codeWhich realizes the function of mouse movement feedback:
The original image as follows
When the mouse moves up, the position of the picture changes to the picture below
10. CSS border properties
10.1 Box Model
Border: width style color;
border-color;
border-style; Bounding styles: solid implementation, dotted line, dotted line, dashed line
border-width:
border-left-color;
border-left-style;
border-left-width:
.
The style of the CSS 3
Border-radius: rounded corner processing
Box-shadow: Sets or retrieves object shadows
The sample code
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> <title>Document</title> <style> div {width:300px; height:300px; float:left; margin:10px; } div.c1 { /* border-width:4px; border-style: solid; border-color: red; */ border:4px solid red; /* Specify the red solid line border of 4px thickness */} div.c2 {/* Separate border Settings */ border-top:4px dotted blue; /* dashed line */ border-left:4px dashed orange; /* dotted line */ border-bottom:4px solid red; /* solid line */ border-right: 4px double green; Div. C3 {border:4px solid green; /*border-radius:20px; /* Four rounded corners with radius of 20px */ *border-radius:20px 30px; /* Top left and bottom right radius 20px, top right and bottom left radius 30 */ *border-radius:20px 30px 40px; /* Border -radius:10px 20px 30px 40px; /* border-radius:10px 20px 30px 40px; /* top left 10 top right 20 Bottom right 30 Bottom left 40 Radius */} /* Border: 4px solid red; border-top-left-radius:20px; border-top-right-radius:40px; border-bottom-left-radius:60px; border-bottom-right-radius:80px; } div.c5 { border: 4px solid red; border-radius:50%; */} div. C6 {border:2px solid RGB (0,0,255); border-radius:5px; Box-shadow: 0px 0px 4px 4px rgba(0,0,255,0.5); } div. C7 {border:2px solid RGB (0,0,255); border-radius:5px; } div. C7 :hover{box-shadow: 0px 0px 4px 4px rgba(0,0,255,0.5); } </style> </head> <body> <h1> Border border attribute < / h1 > < div class = "c1" > < / div > < div class = "c2" > < / div > < div class = "c3" > < / div > < div class = "c4" > < / div > < div class="c5"></div> <div class="c6"></div> <div class="c7"></div> <div class="c8"></div> </body> </html>Copy the code
The chapters are summarized here (the better we understand you guys ~ 3 ~), the better we understand you guys.
Have a question welcome to ask, everyone together in learning Java on the road to play strange upgrade! (O ゜ – ゜▽゜)