Home > Developer > Web Develop
1.html templates
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Templates </title>
<body>
</body>
2.DOCTYPE declaration placed in HTML file header
Latest HTML5 with <! DOCTYPE html> Statement
How to introduce 3.CSS
A. Introduction of <style></style> directly under HTML
B. Write directly within the Div, such as <div style= "background=red;" ></div>
C. Write a CSS file (the file does not have to write style), in the HTML header reference;
<link rel= "stylesheet" href= "./my.css" > (./indicated in the root directory)
D. Introduced in the CSS file; @import url (.. /STAR.CSS); (must be written at the beginning of the CSS file)
4.ID selector: id= "ID name", denoted by # +id name {} in the style
The ID name begins with an English letter; The ID name is unique
Class selector: class= "class name", in style. + class Name {} indicates
Tag name selector <class selector <id selector < inline style
Layout properties for 5.div position properties
a.position:static; indicates that Div has no position attribute cannot be positioned with top, left, etc.
B.position:relative, relative positioning; means Div is positioned with top, left, right, bottom
When positioning a parent Div, the parent div is used with his previous attribute Div
C.position:absolute absolute positioning, can use top, left, etc. to accurately move the div to the position you want
Can overwrite the Div, like the top layer of the layers, positioning based on the parent attribute of the Div positioning, no
The parent div of the same attribute is positioned relative to the body (note: 1. If the parent div is not a absolute property
Does not affect the positioning of the sub-div; 2. If the div is not positioned with top, it will be placed by default relative to the
The high position of the last Div)
D.position:fixed, relative to the fixed position of the window, similar to absolute, when the window is scrolled, the DIV does not
As the window Scrolls
Basic style of 6.css:
width:100px; width 100 pixels
height:100px;
Blue background color
Background-image:url ("Picture path"); background image
Background-repeat:repeat | No-repeat | Repeat-x | Repeat-y how to repeat a background image
Tiling/Uneven paving/tiling to x-axis/tile to Y-axis
Background-position: The first value (x-axis position) The second value (the position of the y-axis);
Background's compound notation:
Background:color image position repeat;
Example: background:red URL ("img/1.jpg") 30px 100px no-repeat;
background-attachment:fixed; background map fixed without scrolling;
Background-size: The first value (the scale of the x-axis) The second value (the scale of the y-axis);
7.border border
border-width:50px; border width
border-top-width; border Top width border-right-width: width of border right
Border-bottom-width: Border Bottom width border-left-width: Border left width
Border-style:solid; border Style: Solid line
border-color:blue; border color: Blue
Border's compound notation:
Border:border-width Border-style Border-color;
Border-top:border-top-width Border-top-style Border-top-color;
border-radius:10px; border rounded to 10 pixels
8.padding Inner margin
Padding-top: Upper inner margin
Padding-right: Right inner margin
Padding-bottom: Lower inner margin
Padding-left: Left inner margin
Padding's compound notation:
padding:10px 20px; The first value of the two values represents the upper and lower second values representing the left and right
padding:10px 20px 40px; The first value of three values represents the second value on behalf of the left and right of the third to represent the next
padding:10px 20px 30px 40px; four values represent upper right lower left
9.margin outer margin
Margin-top; upper margin
Margin-right; right margin
Margin-bottom; lower margin
Margin-left; left margin
The compound notation of margin is similar to padding;
Note: Nesting of tags determines parent-child relationships
A. The margin-top of the first child penetrates the parent in a particular case
Workaround: 1, add border to Parent
2, to the parents add Overflow:hidden;
3, do not use Margin-top, with the parent padding-top instead of
B. The margin-top and Margin-bottom of fraternal relations will overlap
10. Text settings (The following can inherit text styles)
Font-size text size (usually even)
font-size:16px; font is 16 pixels
font-family text Font
font-family: "SimSun"; font is Arial
Color text
Color:rgb (255,0,0); font is red
Line-height Text line Height
Text-align text alignment (left center right)
Text-indent First line indent (em indent character or specific value)
Font-weight text (normal bold bolder 100-900)
Font-style text italic (normal italic oblique)
Text-decoration text decoration (none underline overline Line-through)
Letter-spacing Letter spacing (Specific number px)
word-spacing word spacing (in spaces as an analytic unit)
11. Common Composite Properties
Background:background-color Background-image
Background-position Background-repeat
Border:border-width Border-style Border-color
Padding:padding-top padding-right Padding-bottom Padding-left
Margin
Font:font-style font-weight font-size/line-height font-family;
12. Common Labels
Title label notation:<title></title> double tag semantics: page title weight max
div tag notation:<div></div> double tag semantics: meaningless
H tag h1~h6 notation:H tag Default style: Font-size font-weight margin h1 weight max H2
P label notation:<p></p> semantics: Paragraph default style: margin P tag does not include the tag of the block element in the nested
UL label notation:<ul></ul> semantics: unordered list Default style: Margin Padding-left list-style-type
Li tag notation:<li></li> semantics: List item default style: List-style-type
OL label Notation <ol></ol> semantics: Ordered list Default style: Margin Padding-left list-style-type
Ul,ol and Li are the first level of the combination label Ul,ol must be Li Li's parent must be UL or OL
DL label Dictionary label Syntax:<dl></dl> semantics: Custom list Default style: None
<dt></dt> semantics: List title default style: None
<dd></dd> semantics: List description default style: Margin-left
Properties of the Block attribute tag: 1, the default is the width of the parent 100%
2. Support all CSS styles
3. Exclusive Line
Tags for inline properties:
Inline tag Features:
1, the same attribute label row in the same row
2, the content open width
3, does not support the wide height, does not support the upper and lower padding and margin (support left and right),
4. The size of the resolved spacing of code wrapping depends on the size of the parent's font-size
Span label notation:<span></span> semantics: meaningless
Strong label notation:<strong></strong> semantics emphasizes default style: Font-weight weight is higher
EM tag notation:<em></em> semantics emphasizes default styles: Font-style weights are higher
A tag notation: <a href= "web address required to connect" target= "How to open Web page" ></a> Semantics: Hyperlinks
Default style: Color text-decoration cursor
Target= "_self" (default) The current page opens target= "_blank" new window opens
HREF attribute: 1, if you want to connect a URL, you must add http://
2. #代表连接到当前页
Inline Block Tags:
Inline Block Attribute properties:
1, the same attribute label row in the same row
2, the content open width
3. Support for all CSS styles
4. Code wrapping is resolved, and the size of the spacing depends on the size of the parent's font-size
Note: The image path address must be correct, the ALT attribute must be written
IMG Tag notation: Single label Semantics: Picture
Default style: Default border in low-version browser
13. Conversion of label types
Display as none: Display:none;
Block attribute Display:block;
Inline properties:
Inline: display:inline;
Inline block: display:inline-block;
14. Floating Styles and features
Characteristics of float:
1, floating elements in the same row
2, floating element content open width
3. Floating elements support all CSS styles
4, floating elements out of the document flow
5, floating element promotion level half level (property cover content overflow, can do text wrapping div effect)
Attention:
1, overflow overflow will recalculate the space of the element
Hidden overflow Hidden
Scroll bar appears for auto overflow
Scroll scroll bar appears
2, the center of the element
margin:0 Auto;
3. Pseudo-Class of elements
Pseudo-Class: is the special property of some elements of CSS
: Hover Mouse Stop
: After after element content is inserted
Floating: is to make the elements out of the document flow, arranged in a certain way, encountered adjacent floating elements or the boundaries of the parent to stop
Common methods and advantages and disadvantages of 15.BFC
BFC is the problem of floating elements moving out of the document stream.
1, parent also floating
Disadvantages: the margin:0 auto;
2, to the parents add display:inline-block;
Disadvantage: the margin:0 auto; will fail (if you need to center the element to the parent home text-align:center)
3, to the parent height
Cons: Poor extensibility
4. BR Label
Writing <br/> function: line Wrapping
5. Clear
No other floating elements are allowed in one direction of the clear element
Left right both recommended none
4th, 5 kinds: Do not conform to the rules of the structure, style, behavior of the three separate principles
6, pseudo-class clear floating
: after{
Content: "";d isplay:block;clear:both;
}
Current mainstream methods, recommended to use.
16. Positioning characteristics
Position: Set an element in a certain way to a certain location on the page
Position
Relative positioning relative
Positioning for your own location
Absolute positioning Absolute
Locate the origin of the parent that has the location, and if the parent is not positioned, the parent will be found
There is no location, if any, for the parent's parent's origin location, and so on, if there is no location,
Positioning for document
Warm tip: Absolute positioning even if there is no initial value, also must set the value (such as: left:0px;top:0px;)
Fixed positioning
Positioning for the page window
Warm tip: IE6 does not support fixed positioning
Offset: Left, top, right, bottom
Note: Left top has higher priority than right bottom
Three positioning characteristics
Relative positioning relative
1. Does not affect the characteristics of the element itself
2. Do not leave elements out of the document flow
3. Promotion level
4. Unable to trigger BFC
5. Positioning yourself for yourself
Absolute positioning Absolute
1. The element is completely out of the document flow
2. Content completely open width and height
3. Enable elements to support all CSS styles
4. Promotion level
Z-index: numerical value; the higher the position level setting, the higher the level
5. Absolute positioning to be used in conjunction with relative positioning
6. If there is a target parent, an offset is found for the anchor parent, and there is no location parent offset for document
7. If the absolute positioning of the child has a float, you can omit the clear floating operation
Fixed positioning
1. Incompatible IE6
2. Positioning the window
3. If the fixed positioning of the child has floating, you can omit the clear floating operation
17. Deriving selectors
is a combination of the ID selector class selector tag name selector
ID Selector 10000
Class Selector 100
Tag name Selector 1
Example: #box span{} =10000+1 The higher the value, the higher the priority
18. Compatibility
The page may appear different in different browsers.
1, under the IE6, the child's width will support the parent set width
Warm tip: The box model must be accurate, otherwise IE may display different
2, in the IE6, the element floats, if the width needs to be open, you need to add floating elements to the inside of the block elements can be
3, in the IE6, elements to the same floating row in the same row, you need to add floating element
Example: If a right element floats, the left element uses margin in the same row, and between the two elements creates a 3-pixel gap
4, pay attention to the nesting rules of the tag;:<p> <div></div> </p> page Default results in 2 p tags
5, under IE6, the height of the element if less than 19px, will be treated as 19px
Workaround: Ovreflow:hidden;
6, under the IE6, does not support the 1px siding style; example: border:1px dotted red;
Workaround: Cut the background tile
7, under IE6, most of the compatibility is due to the Haslayout property of the triggering problem, as far as possible to trigger the Haslayout attribute can be reduced
A lot of compatibility problems under IE;
When the parent has a border, the margin of the child element is invalidated
WORKAROUND: Trigger The parent's Haslayout property
8, IE6 under the bilateral distance of the bug
Under IE6, when a block element has a value that floats with a horizontal margin, the value of the horizontal margin expands by two times
Workaround: Turn block elements into inline elements
9. Set Margin-left the first element on the left side of a row has a bilateral distance
Set Margin-right the first element on the right side of a row has a bilateral margin
Workaround: Convert to inline elements
10, under the ie6,7, Li itself does not float, Li inside the content is floating, Li will produce a gap
WORKAROUND: 1. Add float to Li 2. Add Vertical-align:top to Li;
In the IE6, the minimum height of the bug and the gap between the Li, when the vertical-align is not good to make
Workaround: Add float to Li
11, when the sum of the elements of a line of children and the width of the parent is more than 3px, or the child element is not satisfied with the line
The margin-bottom of the child elements of the last line will be invalidated.
12. Text overflow bug under IE6
The width of the child element and the width of the parent if the difference is less than 3px, the two floating elements have a comment or an inline element in the middle,
There will be text overflow, more inline elements, more overflow
WORKAROUND: Wrap the annotations or inline elements with a div.
13, under the IE6, when the floating element and the absolute positioning element is a sibling relationship, the absolute positioning will fail
Workaround: Do not allow floating elements and absolute positioning elements to be siblings, wrap a tag with div or other tags
14, in IE6, 7, the child element has relative positioning, the parent overflow the child element
Workaround: Also add relative positioning to the parent
15, under IE6, if the absolute positioning of the parent's width is odd, the child element of the right and bottom values will have a 1px deviation
16, under IE6, when set body height, div Set fixed positioning is, pull page scroll bar div is not fixed
Workaround: Use JS
17, IE6, 7, 8 to set the transparency opacity invalid
Workaround: Set transparency should write two lines of code: opacity:0.5; Filter:alpha (OPACITY=50);
18, in IE6, 7, the input type of the form label control up and down there will be a gap of 1px.
Processing method: Add float to input
19, in the IE6, the use of transparent pictures on the page does not show the transparency effect
Workaround: JS
20, the contents of the comments in the Internet Explorer through the conditional Comment statement can be recognized
Example:<!--[if IE]
I am IE
<! [endif]-->
21, CSS hack:
\9 IE10 before the IE browser parsing code example: background:yellow\9;
+ or * Indicates a browser example that includes IE7 before IE7: +background:black;
_ Represents a browser example that includes IE6 before IE6: _background:pink:
Html common tags, CSS base style, CSS floating and clear, browser compatible
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
