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

What are the basic points for attention of html and css? I believe many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

1 reduce the use of meaningless tags

A simple example:

For this top structure,

Error: general column > Center > left + (right > ul > li*9 > a)

Correct: general column > Center > left + (ul > li*9 > a)

For the part on the right, there is no need to use a div to wrap ul, obviously a ul can achieve why to use extra div tags for nesting. So in the writing process can obviously be solved with a tag, do not use meaningless multi-layer nesting of tags.

2 about naming

Before learning java, because English is not good, like to use Pinyin name, this is not good, although I know from the beginning of learning, but do not pay much attention to it. Under the reminder of the people around me, especially when I feel the inconvenience of using Pinyin, I should correct it and pay more attention to naming in the future. It doesn't matter if you are not good at English, isn't there youdao and du Niang?

Then there is the naming when the tags are nested. Generally speaking, the naming problem of tags at the same level is not very big, you only need to use one word. But when nesting occurs, you need to use "-" to connect, otherwise it's easy to confuse which tag is which. For example, the top column above can be named with top, the right part can be called top-right, and top-right-detail-link may be abbreviated to top-r-d-link if it is too long, or even abbreviated to trd-link if it is too long, note that it is too long to abbreviate, short words in order to ensure that the meaning of the abbreviation, and the last word in order to understand it is best not to abbreviate.

3 the use of special symbols

The drop-down arrow above is made using the diamond symbol ◇, using two tags for nested writing

◇

The s tag uses position to control the location of the part that needs to be displayed, and the I tag controls the size of the window while hiding the overflow.

CSS Code copies content to the clipboard

I {

Width: 15px

Height: 8px

Position: relative

Overflow: hidden

}

I s {

Font: 400 14px/14px consolas

Position: absolute

Top:-6px

}

The above is a common practice, as a rookie, without considering compatibility, feel that the use of a label can be solved, for characters to use line height to control the vertical position, with width and height to limit the display area.

XML/HTML Code copies content to the clipboard

test

I {

Display: inline-block

Height: 50px

Width: 100px

Overflow: hidden

Font: 400 100px/0px SimSun

}

◇

This is the effect:

At present, it has only tested the effect under Google and Firefox, there is no problem, what is wrong, please point out.

4 distance between adjacent intra-line block elements

If the above navigation is converted to an inline block element, there will be a distance of several pixels between the two adjacent elements, which may not be visible, but as you can see when you zoom in, the only way to solve this problem is to use floats.

5 concatenation of numeric values:

There are some attribute values in css that can be concatenated. Such as padding, border-radius. The former is upper, right, lower and left, while the latter is upper left, upper right, lower right and lower left. They are all arranged clockwise, but with different starting points. If you think of the four directions as a, b, c, d. So when the following two consecutive values are written, they represent: ac and bd;3 represent a, bd, and c, needless to say, represent a, b, c, d.

6 clear float

There are four ways to clear floats, the most common of which is the use of pseudo elements.

CSS Code copies content to the clipboard

.clearfix: before, .clearfix: after {

Content: ""

Display: table

}

.clearfix: after {

Clear: both

}

.clearfix {

* zoom: 1; / * IE/7/6*/ / * compatible with writing under IE6 * /

}

7 set height

The above mentioned floating suddenly thought about the problem of plate height, generally speaking, try not to use a fixed height to write a plate to death, do not write to death! Don't write death! Don't write death! Say the important things three times. How to make a response if you write it dead?

Margin,padding of 8 elements

The horizontal direction (left and right) of all elements margin and padding works, and only the vertical direction of the inline element (up and down) does not support it. It is important to note that padding expands the border of the element, but does not squeeze the element away from its original vertical position.

9 the use of relative positioning and absolute positioning

There are four kinds of positioning: absolute positioning, relative positioning, fixed positioning, static positioning. For the latter two kinds of positioning, there is nothing to say, that is, the first two kinds of positioning, it should be noted that the relative positioning will occupy the position of the original document flow, while the absolute positioning will not occupy the original document flow position. Therefore, when you need to use positioning, you need to analyze the actual situation according to the specific situation, and consider whether to use relative positioning or absolute positioning. Take a chestnut:

CSS Code copies content to the clipboard

* {margin: 0; padding: 0; color: # fff; font-size: 20px;}

.nav {height: 30px; background-color: pink; border-bottom: 4px solid red;}

.w {width: 100px; margin: 0100px; position: relative; height: 30px; z-index: 1;}

.nav-list {height: 30px; background-color: red;}

.left {width: 100%; height: 400px; background-color: peru; position: absolute;}

.b {margin-left: 210px; width: 100px; height: 100px; background-color: lightblue; position: relative;}

XML/HTML Code copies content to the clipboard

List

List

List

List

List

Left

B

List belongs to the upper part, left is the bottom advertising, b is the content of the lower section, if you completely use relative positioning and absolute positioning to solve the problem, then left should use absolute in order not to affect the lower plate, so that the list beyond the upper part will be covered, so to set a certain level to the parent box of list, it is reasonable to use relative to occupy the upper part. Because he still belongs to the upper part. In this case, you need to set relative for b as well, and set the left margin in order not to be obscured.

10 use positioning to center elements

The horizontal center of block-level elements can be solved by using margin:0 auto; to use positioning: set left (top) to 50% after positioning, and then use margin-left to pull back half of your position.

CSS Code copies content to the clipboard

Height: 20px

Width: 50px

Position: absolute

Left: 50%

Margin-left:-25px

11 background and picture

Often asked when to use img to insert a picture and when to use a background. To put it simply, I think the icons in most websites use backgrounds, specifically when it comes to the use of img images for a product.

After reading the above, have you mastered the basic points for attention of html and css? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.