20,191,028 learning summary
(A) Markdown use
1. Title
# a header
## subheadings
### three titles
2. ordered list and unordered lists
front text with "-" or "+" to the unordered list, text by adding "1 "," 2 "," 3 "into an ordered list.
3. The reference
">" indicates that the referenced
4. Hyperlink
Hyperlink is represented by [] () with pictures! [] () Represents
(Ii) the HTML
the HTML Hyper Text Markup Language, is defined by a piece of content title, paragraphs or images, so that the content having the structure defined.
HTML CSS as the backbone for the cosmetic appearance
CSS: Cascading Style Sheets / Cascading Style Sheets
API: Application Programming Interface
W3C: World Wide Web Consortium
1.HTML term
Notes <--........--!>
<Element name> elements
<...> start tag
</ ...> closing tag
<a属性="属性值"> .......... </a> can add additional attribute information for the element
<header> is used to represent a certain area or page header
<nav> navigation
<aside> is used to indicate additional information related with the surrounding theme
<article> is used to indicate the presence of a separate article or other page content
<section> with representing an integral part of the theme
<footer> is used to indicate a footnote page or an area of
~ h6 represents an h1 title - the title six
span across multiple characters, characters can become different
a hyperlink
p paragraph , paragraph article
2. elements of the written format: <a href="目标"target="页面打开位置"> content </a>
3. List the type of
unordered list: a dot labeled
unordered list with <ul> tag, each list begins with <li> tags
ordered list: labeled with numbers
began <ol> tag, each list starts with < li> tag
custom list: item combination therewith comment
starts with <dl> tags, each custom list items <dt> begins, each custom list item starts with <dd>.
4. false nonce packets
lorem plus tab key
20,191,029 study concluded
CSS
CSS is the latest version: CSS3
(a) CSS style sheet
1. external style sheet
CSS in an external style sheet references <head> with <Link>
<Link rel = "stylesheet" href = "the main.css" >
../ return to the previous
2. internal stylesheet
CSS in <head> using <style> Waibuyangshibiao references
within row 3. stylesheet / inline style sheet (not substantially)
directly write pattern in the start tag
(Ii) CSS comments
written format: / * comment contents * /
VSCode with the comment: ctrl +?
(C) the CSS rule
h1 of {
Color: Red
text-align = left: Center;
}
entire rule set belongs, h1 is the selector,: left property: the right is the attribute value, which is a statement of the braces.
(Iv) the CSS selector
1. The selector element
tag angle brackets removed, the entire document to the effect that element.
2. Class selector
. Declaration block class name {}
3.ID selector
#id {name} declaration block
ID attribute value in each document can only be used once, unique.
Named hump with the principle of
small hump principle: the beginning of the second word capitalized (for general use)
a large hump principles: the first letter of all words in uppercase
Color units
· Color keyword {h1 of: Red;}
* the HEX hexadecimal notation by {h1 of Color #: #foo;}
· the RGB (Red Green Blue) rgb represented by a function h1 {color: rgb (255,0, 0);}
* the HSL value (UI design)
unit of length
-specific pixel size px absolute length will vary depending on the resolution of the device
-% relative length
* wildcard applied to all elements
4. descendant selector
parent collection set
The subset selector
superset> subset
6. pseudo class selector (not require control)
And 7. Set selector / combiner selector
Example: h1 of, H2, H3, H4, H5, H6 {
font-weight: Normal;
}
hover / into
h1 of: hover {
Color: Red;
}
(E) the weight selector
fitted id class element
ABCD
style. 1 0 0 0
ID. 1 0 0 0
Class 0010
element 0001
wildcard 0
! important top
! Important to write in the back of the property value
(Vi) the source sequence
when the weighting values are the same, in front of the latter will overwrite.
(Vii) inherited
an ancestral some style, class offspring will inherit. Text style class will have inherited.
(Viii) the debugger
if Firefox right to view elements.
How (IX) display elements
display: block (block element)
inline (inner line element)
inline-Block (row within the block)
none (hidden element without leaving physical space)
(Ten) box model
content: the content of the box
padding: padding area around the content within the
border: the outer border and the inner border margins content
margin: a border region of the outer margins clear
padding: padding value is a value, then four weeks are this value.
Padding a value of two values, such as 10px, 20px sequence around the vertical
padding value of three values, such as 10px, 20px, 30px on the order of about
padding a value of four values, such as 10px, 20px, 30px, left upper right lower order 40px
border: writing specifications Example: 10px solid color
(Xi) the normal stream
without the intervention of the CSS, block-level elements on a separate line, width and height can be set, inline elements displayed side by side, the width and height automatically.
(Xii) float
when the float element attribute value for the left and right floating elements
float: none not float
left to left direction
right up to right
20191030 study concluded
new statement (a):
1. Text Center: text-align = left: Center
2. remove underlined: text-Decoration: none
3. horizontal center: margin: Auto
4. subset of the floating lead to collapse of the parent can find high: overflow: hidden
5. The remove list entries (. or digital) life-style: none
(Ii) layout
design layout used
1..container
Container {
width: XX PX;
margin: Auto 0;
}
<body>
<div class = "Container">
...
</ div>
</ body>
2.header+container
header{
width:100%;
}
.container{
width:XXpx;
margin:0 auto;
}
<body>
<header></header>
<div class="container">
...
</div>
</body>
3. header+container+footer
header,footer{
width:100%;
}
.container{
width:XXpx;
margin:0 auto;
}
<body>
<header></header>
<div class="container">
...
</div>
<footer></footer>
</body>
(C) It is noted that the rules web production
1. Homepage index
2. Waibuyangshibiao with global.css
3. avoid redundancy code
The image or video separate folder img / images
(Ii) single text vertical center line height is approximately centered vertically = high line height = XXpx;
(C) reducing the picture interval
fond-size:0;
(D) a fluid layout
Features will not produce high collapse. Box Flexible = the Flex the display: Flex The justify-Content: Center laterally centered. align-items: center vertically. justify-content: ends aligned space-between, the spacing between the items are equal. justify-content: space-around at equal intervals on both sides of each item. Therefore, the gap between the project twice the size of the project and the interval of the border. flex-grow: 1/2/3 ..... distribution ratio of the remaining space.
Insert (E) to the element in the CSS background div { :; 500px height } / : url tiled position background color background / background: NO REPEAT-url ( "path"); Do not tile background: url ( "path") no-repeat center center; Agency intermediate background: url ( "path") no-repeat right top; upper right background: url ( "path") no-repeat 100px 50px; lateral vertical background-size: 30px width 30px high image scaling ( f) image binding: the sprite was dropped Sprite FIG CSS coordinates: to the right width for the next positive direction as a positive direction high .sprite { / given viewport / width: XXpx; height: XXpx; background: URL ( "path") XXpx XXpx; change of position }