Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "what are the layout skills of the front end of web". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Today, when I was working on a page, I encountered the effect of centered arrow: because I wanted to achieve a large click area, I used padding-top:23%. But there is a problem in calculating 23%. It is found that the percentage of padding-top is calculated based on the width of the parent element rather than the height, isn't it strange? Which Daniel can explain.

two。 After adding a float and then adding margin, a layer must have double margins under ie6. -the solution is display:inline; (although I know, but forget every time).

3. The frame with fixed width on the left and adaptive on the right and adaptive in the middle of the left and right must be able to use it, and it will be used in many cases.

Demo1 (self-adapting on the left and right):

The code is as follows:

Two-column layout, width on the left, adaptive on the right

Html,body {height:100%; margin:0px; padding:0px;}

# header {width:100%; height:20px; background:#CCC;}

# footer {width:100%; height:20px; background:#CCC;}

# main {padding-left: 200px;}

# left {width:200px; height:200px; position:absolute; left:0; background:#FF0;}

# middle {width:100%; height:200px; background:#F00;}

Header

Left

Middle

Footer

Demo2 (left-right middle adaptation):

The code is as follows:

Two-column layout, width on the left, adaptive on the right

Html,body {height:100%; margin:0px; padding:0px;}

# header {width:100%; height:20px; background:#CCC;}

# footer {width:100%; height:20px; background:#CCC;}

# main {padding-left: 200px; padding-right: 200px;}

# left {width:200px; height:200px; position:absolute; left:0; background:#FF0;}

# right {width:200px; height:200px; position:absolute; right:0; background:#FF0; float:left;}

# middle {width:100%; height:200px; background:#F00; float:left;}

Header

Left

Middle

Right

Footer

4. When inserting a picture under ie6, using the img tag will have a few pixels of white space under img, which will cause you to be different from what you have done in the design draft (will be seen by the fire eye of the supervisor and then scolded)-the solution is to turn img into block-level elements; display:block

5. The way to make the text vertical within the block is: 1). Vertical-align:middle.2). Line-height:***;-the second is generally better than the first, and I don't know why.

6.A lvha for tags is not very common, but be sure to use: a:link {} a:visited {}; a:hover {} a:active {}

7. Text truncation without line wrapping seems to be very common (used every day these days): white-space:nowrap;overflow:hidden;text-overflow:ellipsis; (changing behavior: word-wrap:break-word;)

8. There are many ways to clear floats, three of which are mainly used these days: 1) clear:both;2) overflow:hidden;3). My mentor's favorite: # a:after {display:block;clear:both;visibility:hidden;height:0;content'.';}

9. Mouse gestures sometimes disappear under ie, and this has happened several times in the past two days. -the solution is corsor:pointer; (note that it cannot be specifically reminded by the hand-- instructor)

10. When defining a container with a height of only 2 pixels, there is a bug-- solution under ie6 to zero various properties, especially font-size:0;height:0;line-height:0.

11.max-width will not work under ie6-the solution is _ width:*; (encountered this problem last week)

12.bandwidth rules-this attribute has never been used before, until the day before yesterday when my supervisor looked at my code and reminded me that when a page was responsive, the subsequent width would overwrite its own width:100%;, so add 100% width.

13. It's very important to clear the float-for example, sometimes the container can't adapt to the height and you have to use it!

14. When you click on the text, you will also click on the check box or check box, such as the function of csdn: wrap the box with lable or use lable for "id".

15. DisplayRunner-disappears and does not occupy a position. Visibility:hidden;- occupies its place after it disappears.

This is the end of the content of "what are the layout skills of the front end of web"? thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.