This is my own normal construction station at the time, encountered some small skills and important knowledge points, share to everyone
1. Border of the box 3 elements: Box actual performance
2.padding color is the background color, and is outward expansion
3. Use margin auto to complete the center of the homepage
4. Upper and lower adjacent common elements (some div set floating, that is not ordinary elements), the upper and lower margins, not simply add, but take the larger margin values, this phenomenon is called
margin overlap
5. Box model is block (DIV) layout, span is the inline selection of text with
6.text-indent:20px; indent 20 pixels ********
Text-decoration:line-through; (strikethrough)
leteter-spacing:20px (distance between words)
Line-height: (Row height)
font-family: (font) ' Simhei ' (boldface)
Font Control tips: The order of the points
Font:italic bold 23px/46px "Simhei";
Style Weight size Height family
Style weight size line high font
Sans-serif sans Serif, seirf lined (new Arial)
7. Set the background image
Background-image:url (small.jpg)
Background-repeat:repeat-x/y/no-repeat;
background-attachment:fixed (fixed); The browser is pinned to one location, sliding as the page slides
8.CSS Selector: ID selector class selector tag selector (such as P tag, div tag) derivation selector (the hierarchy between elements to declare pseudo-class selectors wildcard selection
Manager
4 ways to introduce 9.CSS
1) external link to a CSS file, which we indicated in the HTML header section:
<link href= "Css/my.css" rel= "stylesheet" type= "Text/css"/>
2) head directly written css:<style type= "Text/css" > div{margin:0;padding:0;border:1px solid red;} </style>
3) When you add multiple CSS files: <style type= "text/css" > @import url (my.css) <style>
4) directly in the HTML tag to write the CSS control of this tag, such as: <div style= "border:1px solid red;" > Test Information </div>
The second one can declare the third class float with float
10. Insert Picture 34
Search engine, picture of the text description
11. Remove Li small black spot list-style-type:none;
After initializing the CSS, write Li, and use the background image +padding, to complete the effect of Li Small icon, and to achieve the compatibility of each browser 36
12. Add 3 anchor points within the page and create 3 links
<a href= "31.anchor.html#p1" >P1 Anchor Point </a>
<a href= "31.anchor.html#p2" >P2 Anchor Point </a>
<a href= "31.anchor.html#p3" >P3 Anchor Point </a>
<a name= "P1" ></a>
<p>p1</p>
<a name= "P2" ></a>
<p>p2</p>
<a name= "P3" ></a>
<p>p3</p>
13.CSS allows us to set individual CSS features for the 4 states of a sticky note, called CSS pseudo-class
A:link{color:gray;}
A:visited{color:orange;}
A:hover{color:purple;}
A:active{color:black;}
Note: The order is LVHA
Active generally does not have to write
A:link General Jane writes a:
Character entities in HTML development, there are some characters that are not intended to be written directly,
such as ><"¥©
> < "RMB trademark
14.CSS draw fillet border-radius:15px; (RADIUS)
px:width:300px;
heigth:300px;
border:1px solid red;
border-radius:150px;
(a circle with a radius of 150px)
15overflow Overflow Handling:
Overflow:visible;/auto;/hidden;/scroll;
16 form:
When the user registers, the online registration and so on occasions, needs to put the user's information, fills in and submits, this is to use the form to collect the user's information
<form action= "http://www.baidu.com" method= "POST" > Insert the following fill information here </form>
User name: <input type= "text" name= "Usename"/>
Password: <input type= "password" name= "password"/>
Gender: Male: <input type= "Radio" name= "Gender" value= "male"/>
Female: <input type= "Radio" name= "Gender" value= "female"/>
Hobbies: Basketball <input type= "checkbox" name= "Hobby" value= "basketball"/>
Football <input type= "checkbox" name= "hobby" value= "soccer"/>
Billiards <input type= "checkbox" name= "hobby" value= "billiards"/>
Volleyball <input type= "checkbox" name= "hobby" value= "Volleyball"/>
Education: <select name= "Xueli" >
<option value= "Please select" > Please select </option>
<option value= "University" > University </option>
<option value= "High School" > High School </option>
<option value= "Junior High School" > Junior High School </option>
Upload avatar: <input type= "file" name= "Pic"/>
17. Block-level elements: is a block, like a paragraph, the default occupies a line appears;
18. Inline elements: Also called inline elements, as the name implies, can only be placed in the line, like a word, will not cause before and after the line, play an auxiliary role.
19. General block-level elements such as paragraph <p>, title
Elements such as: Table cell <input>, Hyperlink <a>, Image , <span> ..... The significant feature of block-level vegan is that each block-level element is displayed starting with a new line
, and the subsequent non-vegetarian also needs to be displayed on a separate line.
20. The same elements, such as Li, under different browsers, show a slightly different effect, because different browsers margin,border,font-size each element
And so slightly different, if you want to eliminate this situation, we force the CSS to make all the elements of the same property values, so that the browser display is consistent, reducing the incompatibility
This process is called CSS initialization.
HTML front-end development of 20 points of knowledge (personal build station summed up)