Home > Developer > Web Develop
Html exercises (5) and html exercises
This exercise shows the positioning and relative positioning of data;
Here is the positioning of html:
1. static positioning
This is the default method. For static, left and right do not take effect.
2. relative positioning (relative positioning)
The element frame deviates from the position of its stream (positioned by left and top). The element remains in the shape before positioning and its original space is retained. From this perspective, it seems that this element is still in the Document Stream/standard stream.
Note: The reference point of relative is its original location.
3. absolute positioning (absolute positioning)
It is equivalent to disallowing an element from its original position and giving up its own space, and the subsequent elements will occupy the space.
Note: absolute positioning is relative to the non-standard stream box closest to you.
4. fixed Positioning
The element box is similar to setting position to absolute, but its contained block is the window itself.
Code:
HTML file (test5.html ):
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN">
<Html>
<Head>
<Title> author: ye Binzhou </title> <! --
/* Absolute and relative positioning of exercises */
--> <Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "this is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<Link rel = "stylesheet" type = "text/css" href = "./test5.css">
</Head>
<Body>
<H1> exercise html positioning, including absolute positioning and relative positioning <Div class = "class1">
Relative positioning
<Div class = "style1"> This is the first square </div>
<Div class = "style1" id = "style2"> This is the second square </div>
<Div class = "style1"> the third square </div>
<Div class = "style1"> This is the fourth square </div>
</Div>
<Div class = "class1">
Absolute Positioning
<Div class = "style1"> This is the fifth square </div>
<Div class = "style1" id = "style3"> This is the sixth square </div>
<Div class = "style1"> the seventh square </div>
<Div class = "style1"> This is the eighth square </div>
</Div>
</Body>
</Html>
Cssfile (test5.css ):
. Style1 {
Width: 100px;
Height: 70px;
Background-color: red;
Margin-top: 12px;
Margin-left: 3px;
Float: left;
}
Body {
Width: 800px;
Height: 500px;
Border: 2px solid blue;
Background-color: green;
}
# Style2 {
/* Use relative positioning */
Position: relative;
Left: 110px;
Top: 90px;
}
Div. class1 {
Width: 700px;
Height: 200px;
Border: 1px solid gray;
}
# Style3 {
/* Use absolute positioning */
Position: absolute;
Left: 400px;
Top: 300px;
}
Running:
1046: The type cannot be found, or it is not the compile time: Ic
Html5 test page
HTML5 test page, IE9 Microsoft test website summary: www.win7en.com/strive/304.htmlcurrently the most comprehensive
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
