Home > Developer > Web Develop
Html-layout on the left and right --- ShinePans, html ---- shinepans
The file contains main.html top.html left.html childhood.html moonsong.html herethesea.html
Main layout effects:
Code:
Main.html
<Frameset rows = "30%, *"> <! -- Above --> <frame src = "top.html" scrolling = "no"> <frameset cols = "20%, *"> <! -- The following section contains the left and right parts --> <frame src = "left.html" noresize frameborder = "1"/scrolling = "no"> <frame src = "right.html" name = "myframe" noresize frameborder = "1"/> </frameset>
<meta http-equiv="content-type" content="text/html;charset=UTF-8"/><body><table align="center" boder="0px" width="100%" height="200px" background="topJpg.jpg" cellspacing="0px" cellspading="0px"><tr></tr></table></body>
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8 "/> <body bgcolor =" lightblue "> <center> </center> <! -- Target after clicking --> <ul> <li> <a href = "herethesea.html" target = "myframe"> the most important decision </a> </li> <li> <a href = "childhood.html" target = "myframe"> Xiasha </a> </li> <a href = "moonsong.html" target = "myframe"> and semi-evening songs </a> </li> </ul> </body>
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/> <body bgcolor = "silver"> Lyrics </body>
1. Natural layout.
The layout without any modification is automatically left-aligned.
2. Flow Layout
Float: left.
3. Positioning Layout
Relative positioning and absolute positioning are relative to parent div labels.
Relative ------ take the original position of this element as the reference point
Absolute -- use the origin (upper left corner) of the parent div label as the reference point.
Because the outer layer is position: relative, if the inner layer is absolute, the upper left corner of the outer layer is aligned with the displacement reference. Of course, the outer layer only writes position: relative, and the left and top values, which indicates to use the left and top alignment with reference to the origin position where the element should have been originally located.
Another case is that there is only a position: absolute; the outer layer does not have a position: relative. What kind of point will it look for reference? The principle at this time is: if a parent element contains relative, the reference origin is a parent element. If there is no position: relative, the reference origin is body. If the position: absolute outer layer does not have relative, there is no difference between the two la S.
Of course, the last case is: position: absolute; position: relative in it. What will happen? According to the original principle, absolute will refer to the body as the layout origin, and relative will refer to the position where he should have been in the layout origin. At this time, it is actually referring to the layout origin in the upper left corner of the outer layer.
Others depend on the actual situation.
Html layout
<Style type = "text/css">
Html {margin: 0; overflow: hidden; _ padding: 80px 0px 30px 0; _ border: 0 ;}
Body {margin: 0; height: 100%; border: 0 ;}
# Header {position: absolute; top: 0; left: 0; width: 100%; height: 80px; border-bottom: solid 1px # AE85E1; background-color: # EFEFEF ;}
# Footer {position: absolute;/* Public */bottom: 0; left: 0; width: 100%; height: 30px; border-top: solid 1px # AE85E1; background-color: # EFEFEF ;}
# Left_content {width: 200px; position: absolute; top: 80px; bottom: 30px; left: 0px; background-color: #006 ;}
# Center_content {width: 10px; position: absolute; top: 80px; bottom: 30px; left: 200px; background-color: # F00 ;}
# Reight_content {position: absolute; top: 80px; bottom: 30px; left: 210px; right: 0px; background-color: #960}
</Style>
.
<Div id = "header"> upper fixed part </div>
<Div id = "comernt"> intermediate part
<Div id = "left_content"> </div>
<Div id = "center_content"> </div>
<Div id = "reight_content"> <p> </div>
</Div>
<Div id = "footer"> lower fixed part </div>
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
