Use HTML + CSS to write a flexible tab page

From: http://www.javaeye.com/topic/52036

Recently I have been studying CSS. I just made a flexible tab page in combination with the project and implemented it using pure HTML + CSS. I just want to summarize it.

First, let's take a look at the preview interface:
 
Sample HTML accessible: http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html

The following describes how to complete the preceding page.

1. Construct html
Building HTML is the most basic part of the process. A key principle for building HTML is "returning the original meaning of HTML tags ". So here, we should analyze the expected HTML structure reasonably, analyze it, and select the appropriate HTML Tag, instead of using non-standard table layout or layout with a large number of divs and classes. In fact, there is a misunderstanding that the Web standard is used for page programming through Div + CSS in all things. In fact, this is totally wrong, it is easy to cause divitus or classitis ).
Back to the topic, let's analyze the page style. We can divide the entire tab into two parts: level-1 menu and level-2 menu. They have similar features and are arranged horizontally. The unordered list in the HTML Tag reflects this logical relationship. Therefore, we use two Unordered Lists to represent the level-1 menu and level-2 menu. The Code is as follows:

 

HTML code

1. <Div class = "navg">
2. <Div id = "Attendance" class = "mainnavg">
3. <Ul>
4. <Li id = "attendancenavg"> <a href = "#"> attendance management </a> </LI>
5. <Li id = "teachnavg"> <a href = "#"> teaching management </a> </LI>
6. <Li id = "communicationnavg"> <a href = "#"> Home-School interconnection </a> </LI>
7. <Li id = "systemnavg"> <a href = "#"> system management </a> </LI>
8. </Ul>
9. </Div>
10. <Div id = "dailyattendance" class = "secondarynavg">
11. <Ul>
12. <Li id = "dailyattendancenavg"> <a href = "#"> day attendance </a> </LI>
13. <Li id = "leaveapprovenavg"> <a href = "#"> Leave for approval </a> </LI>
14. <Li id = "attendancestatisticsnavg"> <a href = "#"> attendance statistics </a> </LI>
15. <Li id = "attendancecollectnavg"> <a href = "#"> attendance summary </a> </LI>
16. </Ul>
17. </Div>
18. </Div>

The two divs divide the menu level. In fact, there will be other functions in the future. Now, let's take a look at this page. We can be pleasantly surprised to find that this page is just like a Word document and is readable. We can verify it again after the entire process is completed.

 

2. Construct basic CSS

First, let the UL be arranged horizontally. Pay attention to the cleaning after the element float.

Then, the main menu style is implemented by applying the background on Li and a respectively. The most important thing here is that the element a becomes a block-level element (display: block ), this makes it easy for us to do some processing below, and also applies the entire menu to the link style.
The line-height can center the text in a vertically. Text-align center the words in a horizontally.

CSS code

1. . Navg. mainnavg ul {
2. Margin: 0;
3. Padding: 0;
4. List-style: none;
5. }
6. . Navg. mainnavg ul Li {
7. Float: left;
8. Background-color: # e1e9f8;
9. Background: URL (../images/tab_right.gif) No-repeat right top;
10. Margin: 10px 3px;
11. Height: 25px;
12. }
14. . Navg. mainnavg ul Li {
15. Display: block;
16. Height: 25px;
17. Padding: 0 25px;
18. Line-Height: 24px;
19. Background-color: # e1e9f8;
20. Background: URL (../images/tab_left.gif) No-repeat left top;
21. Text-Decoration: none;
22. Float: left;
23. Text-align: center;
24. Color: # FFF;
25. Font-weight: bold;
26. }

3. Make width adaptive

Here we use the sliding door technology for width adaptive. The following describes the sliding door technology.

Simply put, it is to apply a large image background on Li and place the background on the right.

 

Then apply a small image background on a and place the background on the left side to cover the big image edge.

 

In this way, no matter how long the menu text content is changed, the original structure will not be damaged.

4. highlight the current menu

There are many ways to highlight the current page. the most rigid one is to explicitly define classes on each page.
However, for web projects, most pages are dynamic, so this is not the best method.

The method I use here is the flexible use of the CSS selector.

Java code

1. # Attendance # attendancenavg,
2. # Teach # teachnavg,
3. # Communication # communicationnavg,
4. # System # systemnavg {
5. Background: URL (../images/tab_right_on.gif) No-repeat right top;
6. }
7. # Attendance # attendancenavg,
8. # Teach # teachnavg,
9. # Communication # communicationnavg,
10. # System # systemnavg {
11. Background: URL (../images/tab_left_on.gif) No-repeat left top;
12. Color: # 0000ff;
13. }

In the <Div id = "Attendance" class = "mainnavg"> code, we can use different IDS as selectors, because the selector ID in CSS has a higher priority than the class, therefore, you only need to match the ID above Li according to the ID to achieve the dynamic selection and highlighting purpose.

In fact, because our pages are dynamic, IDS can be generated by the background, so that we can achieve our needs through the different combinations of IDs.

5. Tips

Finally, there may be another question: How do you implement it? How can the highlighted tab hide the following horizontal line?

It's easy. Tips on pictures. Set the height of the highlighted image to 25px, while that of the ordinary image to 24px. Then, you can use padding to hide the horizontal line.

We can use a similar method to make the level-2 menu, which is not detailed here. You can try it with the source code.

 

Source code can be analyzed link page get: http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html