Use HTML+CSS to write flexible tab pages

First look at the preview interface:

　　

Let's begin by telling you the steps to complete the above page.

1. Building HTML

Building HTML is the most basic part of the process. One of the key principles that we build on HTML is the "Return of HTML tags to its original meaning". So here, we should make a reasonable analysis of the expected structure of the HTML, and analysis, choose the appropriate HTML tags, rather than using non-standard table layout or a large number of div and class layout. In fact, there is a misunderstanding, is that all things using the div+css way of the page programming is the Web Standard, in fact, this is completely wrong view, it is easy to lead to "multiple div" (divitus) or "Many types of disease" (classitis).

Back to the point, we analyze the page style, you can divide the entire tab page into 2 parts, respectively, the first level menu and level two menu, they have similar characteristics, and in a horizontal arrangement. An unordered list in an HTML tag can reflect this logical relationship. So we used 2 unordered tables to represent the first level menu and the level two menu. The code is as follows:

<divclass= "Navg" >
<divid= "attendance" class= "Mainnavg" >
<ul>
<liid= " Attendancenavg "><ahref=" http://cms.ddvip.com/index.php# "> Attendance management </a></li>
<liid=" Teachnavg "><ahref=" http://cms.ddvip.com/index.php# "> Teaching management </a></li>
<liid=" Communicationnavg "><ahref=" http://cms.ddvip.com/index.php# "> Home school Exchange </a></li>
<liid=" Systemnavg "><ahref=" http://cms.ddvip.com/index.php# "> System Management </a></li>
</ul>
< /div>
<divid= "dailyattendance" class= "Secondarynavg" >
<ul>
<liid= " Dailyattendancenavg "><ahref=" http://cms.ddvip.com/index.php# "> Day attendance </a></li>
<liid=" Leaveapprovenavg "><ahref=" http://cms.ddvip.com/index.php# "> Leave approval </a></li>
<liid=" Attendancestatisticsnavg "><ahref=" http://cms.ddvip.com/index.php# "> Attendance statistics </a></li>
< Liid= "Attendancecollectnavg" ><ahref= "http://cms.ddvip.com/index.php#" > Attendance summary </a></li>
</ul>
</div>
</div>

Of these, 2 div split the menu level. In fact, there will be other effects in the future. At this point, we may wish to view this page, we can be pleasantly surprised to find that this page is like a Word document, is readable, we can after the whole process is done to verify again.

2. Building Basic CSS

First simple let the UL horizontal arrangement, here should pay attention to the element float after cleaning

Then by applying the background to the Li and a elements to implement the main menu style, here is a more important place is the a element of a block-level element (Display:block), so that we can do some of the following processing, but also to the entire menu to apply to the link style.

And the line-height, precisely can make the word in a vertically centered. Text-align makes the word in a horizontally centered. The code is as follows:

. navg.mainnavgul{

margin:0;

padding:0;

List-style:none;

}

. navg.mainnavgulli{

Float:left;

Background-color: #E1E9F8;

Background:url (.. /images/tab_right.gif) No-repeatrighttop;

margin:10px3px;

height:25px;

}

. navg.mainnavgullia{

Display:block;

height:25px;

padding:025px;

line-height:24px;

Background-color: #E1E9F8;

Background:url (.. /images/tab_left.gif) No-repeatlefttop;

Text-decoration:none;

Float:left;

Text-align:center;

Color: #fff;

Font-weight:bold;

}

3. Make width Adaptive

We use sliding door technology here to make the width adaptive. Here is a brief introduction to sliding door technology

To put it simply, you apply a large image background to the Li and leave this background on the right.

Then apply a small image background on a and leave the background to the left to cover the edge of the large image

In this way, no matter how long the menu text content changes, it will not destroy the original structure.

4. Current menu Highlighting

If you highlight the current page, there are many ways to do this, and the most inflexible is to explicitly define the class on each page.

But for Web projects, most of the pages are dynamic, so this is not the ideal method.

The method I use here is the flexibility of the CSS selector, the code is as follows:

#attendance #attendancenavg,

#teach #teachnavg,

#communication #communicationnavg,

#system #systemnavg{

Background:url (.. /images/tab_right_on.gif) No-repeatrighttop;

}

#attendance #attendancenavga,

#teach #teachnavga,

#communication #communicationnavga,

#system #systemnavga{

Background:url (.. /images/tab_left_on.gif) No-repeatlefttop;

Color: #0000ff;

}

In

code, we can use a different ID as a selector, because the selector ID in the CSS priority will be greater than class, so as long as the ID with the ID above Li, you can achieve dynamic selection highlight the purpose.

In fact, since our pages are dynamic, IDs can be generated in the background, so that we can achieve our requirements very cleverly through different combinations of IDs.

5. Tips

Finally, there may be a question you are thinking how to achieve, that is, the Highlight tab how to hide the horizontal line below

Very simple, little tricks on the picture. Set the highlighted picture height to 25px, while the normal picture is set to 24px. Then through the padding, you can cover the horizontal line.

We can do this in a similar way with the level two menu, which is not described in detail here. We can try to combine the source code.