Benefits:
1. It is easy to be searched by search engines.
2. The page is simple for viewing.
3. easy to control.
Basic Framework:
<Html>
<Head>
.....
</Head>
<Body> </body>
<Html>
Common Layout knowledge:
Differences between different browsers
Display differences, usually left blank on the left and right.
Generally, the width is 900-1024, that is, the display resolution defines the width, so that no horizontal scroll bar appears.
There should be a complete idea to define the layout.
The body has an external margin by default.
Margin: margin
Padding: padding
DIV center:
Margin-left: auto;
Margin-right: auto; // the left and right sides are automatically placed, and the center is centered. (IE won't)
Solution: center all in the body: text-align: center; but in this case, all the inner spaces in the div are centered. You only need to define text-align in the div: left.
Selector:
# Id Selector
. Class selector
The DIV label is a block label, and the block label will automatically wrap.
Gap Between DIV
Use div to separate and adjust div width and height to separate (the minimum height specified by IE is 18 pixels, solution: overflow: hidden; of div ;).
Association Selector
# Id # anothers
The association priority is the highest.
Clear floating block
That is, the stream is separated from the document: float: left; clear: both;
Use both class and id in div
<Div id = "aa" class = "bb"> test </div>
# Aa {width: 300px; height: 50px; background-color: Red ;}
. Bb {width: 100px; height: 300px; background-color: blue ;}
It cannot be used at the same time.
# Aa. bb {xxx}
Differences between different browsers:
The difference between IE and FF is that,
The minimum height specified by IE is 18 pixels.
IE will automatically adjust the height, FF will not, specify the height is high. (Solution: do not specify the height of the DIV containing it)
H1 is different
The list of IE and FF is displayed differently.
Border IE = content + border FF = border calculation (write two widths)
Pay attention to the difference in Resolution !!!
At least 1024. It is best to use the absolute width, so that no matter what resolution will be deformed.
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
