Home > Developer > Web Develop
These days started in the study of CSS, the main reason for the study is the work needs, recently found that if the front-end only JavaScript is very difficult to perfect, of course, understand the style and HTML to a certain extent can let us a step closer.
CSS is relatively simple, because the individual good at writing code, so very little research, accidentally found that if the interface to bring themselves the great benefits, I began to learn CSS.
CSS three major selectors: ID selector, class selector element selector, art generally only with class selector. So I only use class selectors here. (Note: ID is generally used for programmers to write scripts,
In the programming process as far as possible in the code through the class to get the element object, the corresponding ID selector should also be used as little as possible in the style, the name of the ID is generally categorized by programmers.
Simple page:
<body>
<div Id="Left" Class= "left Widhei" >1</DIV>
<div id= "right" class=>2</DIV>
span class= "tag" ><div id= "Down" class= "down Widhei" >< Span class= "PLN" >3</DIV>
</body>
It is generally necessary to remove the margin of the label at the beginning of the layout, and I wonder why the designer will design the border:
Body {color: #000; background: #fff; margin:0;padding:0;} This can be understood as the initialization of the page
The default label layout in HTML is a linear layout, from top to bottom, for example:
<style Type="Text/css">
Body{Color: #000; background: #fff; margin:0;padding:0;}
.Left{Background: #606060;}
. Right{ Background: #123456; left:70px;top : 0px;}
. Down{background: #321321; left:100px;top : -40px;}
. Widhei{width:40px;< Span class= "PLN" >height:40px}
</STYLE>
</HEAD>
Down Widhei, where styles can be superimposed to a large extent to reduce the redundancy of the code. The above effects are as follows:
How do we lay out the individual div according to our own ideas? Here we need to use layout, layout has relative position: relative, and absolute position: absolute two ways,
Relative layout is relative to the previous Div layout, the absolute layout is for the whole body, below we will end the effect of relative layout:
. right{ background:#123456; left:60px;top:10px;position:relative;}
. Down {background:#321321; left:120px;position:relative;}
Effects such as:
You can see that relative layout is relative to the previous element, and if we modify the top element in the style it will be more obvious.
If we lay out all the div horizontally by relative position, then we just need to modify the top property:
. right{ background:#123456; left:60px;top:-40px;position:relative;}
. down{background:#321321; left:120px;position:relative;top:-80px}
Effect:
About absolute position, need to change only is position:absolute also need to change above top, in absolute position top and left,right etc are more than 0. (from a personal summary)
. right{ background:#123456; left:60px;top:-20px;position:absolute;}
. down{background:#321321; left:120px;position:absolute;top:-30px}
The result of this modification is that only one div is displayed because the portion of top less than 0 is hidden, such as:
If the top is familiar with the removal, then what will happen, the HTML page layout by default is relative layout, that is, the result is the top property of the latter two div is relative to div1, because the
Two div is defined as relative so their top default is 40, which is relative to Div1. Effect
If you change top to 0 then the three div will have the same effect as 3.png, which is similar to being forcibly placed in that position.
Finally, add the use of float: float translation into a floating layer, do not occupy the page space, many ads are used in the floating layer, but also facilitate information push in the background.
.left{ Background:# 606060;}
. Right{ Background: #123456; float:left; Top:0;position:absolute}
. Down{background: #321321; float:left;top : 0;position:absolute}
.{width:40px;< Span class= "PLN" >height:40px}
If you modify the style as shown above, the last div will be overwritten with all the preceding Div, or the floating layer can be positioned by the left property, then the floating layer will not be affected by the body.
Of course, to do a good job of a web interface to change a very strong sense of aesthetics, which I am very difficult to do.
Let's write a case about float:
.left{ Background:# 606060;float:right;top:0;}
. Right{ Background: #123456; left:0px; Position:absolute}
. Down{background: #321321; left:60px; Position:absolute}
. Widhei{width:40px;< Span class= "PLN" >height:40px}
This will see DIV1 appear on the right side of the page, with the other two div at its corresponding location.
It's really easy to learn a lot about CSS, but it's not easy to do a page that looks good, and then encourage
Turn: Http://blog.163.com/[email protected]/blog/static/170171558201392201158263/
Learning and use cases (relative), absolute (absolute) locations, and float in HTML (RPM)
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
