1. Use the same navigation code on different pages
Many pages have navigation menus, and when you enter a page, the corresponding item on the menu should be dimmed while the other pages are lit up. Generally to achieve this effect, you need to write programs or specifically for each page design, now rely on CSS to achieve this effect.
First, use CSS classes in your navigation code:
<ul> <li><a href= "#" class= "Home" > Home </a></li> <li><a href= "#" class= "about" > About Us </a></li> <li><a href= "#" class= "Contacts" > Contact us </a></li> </ul>
The body of each page is then assigned an ID, with the same name as the class above. such as <body id= "Home" >.
Then design the CSS as follows:
#home. Home, #about. About, #contact. Contact {commands to highlighted navigation go here}Here, when the ID is set to home,. Home will work, that is, the row navigation bar set to home will show a special effect. The same is true for other pages.
What, isn't it easy?
2. Block and inline element comparison
All HTML elements are part of block and inline. The block element is characterized by:
Always start on a new line;
Height, row height and top and bottom margin can be controlled;
The width defaults to 100% of its container unless a width is set
<p>, <p>,
And the other elements are on one line;
Height, row height and top and bottom margin can not be changed;
Width is the width of the text or picture, and it cannot be changed.
<span>, <a>, <label>, <input>, , <strong> and <em> are examples of inline elements.
This feature of an element can be changed by using the code class= "inline" >display:inline or Display:block command. When do I need to change this attribute?
Let an inline element start from the new line;
Keep The block elements and other elements on one line;
Controls the width of the inline element (especially useful for navigation bars);
Controls the height of the inline element;
You can set the background color of a block element to the same width as the text without having to set a width.
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
