CSS tips

We still need to remember some classic CSS techniques, which can save us a lot of time. Below, I will recommend a few better CSS techniques for you:

1. Use the same navigation code on different pages

Many web pages have navigation menus. When entering a certain page, the corresponding item on the menu should turn gray, while other pages should light up. . Generally, to achieve this effect, you need to write a program or design specifically for each page. Now you can achieve this effect with CSS.

First, use the CSS class in the navigation code:

<ul> 
<li><a href="#" class="home">首页</a></li> 
<li><a href="#" class="about">关于我们</a></li> 
<li><a href="#" class="contact">联系我们</a></li> 
</ul>

Then specify the Body for each page separately An id with the same name as the above class. Such as 69aab999a64e75a9d5e7b7109fdc5db9.

Then design the CSS as follows:

#home .home, #about .about, #contact .contact 
{ 
commands for highlighted navigation go here 
}

##Here, when the id is set to home, .home will start The effect is that the row of navigation bars whose class is set to home will display special effects. The same goes for other pages.

How about it? Isn’t it very simple?

2. Comparison of Block and inline elements

All HTML elements belong to one of block and inline. The characteristics of the block element are:

always starts on a new line;

Height, line height and top and bottom margins can all be controlled;

The default width is 100% of its container unless a width is set

e388a4556c0f65e1904146cc1a846bee, e388a4556c0f65e1904146cc1a846bee, 4a249f0d628e2318394fd9b75b4636b1, ff9c23ada1bcecdd1a0fb5d5a0f18437, ff6d136ddc5fdfeffaf53ff6ee95f185 and 25edfb22a4f469ecb59f1190150159c6 are block elements example of. On the contrary, the characteristics of the inline element are:

and other elements are on the same line;

height, line height and top and bottom margins cannot be changed;

width is The width of its text or image cannot be changed.

45a2772a6b6107b401db3c9b82c049c2, 3499910bf9dac5ae3c52d5ede7383485, 2e1cf0710519d5598b1f0f14c36ba674, d5fd7aea971a85678ba271703566ebfd, a1f02c36ba31691bcfe87b2722de723b, 8e99a69fbe029cd4e2b854e244eab143 and 907fae80ddef53131f3292ee4f81644b are examples of inline elements.

Use code class="inline">display: inline or display: block command to change this feature of an element. When do you need to change this attribute?

Let an inline element start on a new line;

Keep the block element and other elements on one line;

Control the width of the inline element (especially useful for navigation bars);

Control the height of the inline element;

You can set a background color with the same width as the text for a block element without setting the width.

For more articles related to CSS techniques, please pay attention to the PHP Chinese website!