Write a flexible tab page with HTML+CSS

Recently in the study of CSS, just combined with the project made a flexible tab, using pure HTML+CSS implementation, just summed up.

First look at the preview interface:

Sample HTML can be accessed: http://www.demo2do.com/htmldemo/school/attendance/AttendanceGlobal.html

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:

<div class= "Navg" >
<div id= "attendance" class= "Mainnavg" >
<ul>
<li id= "Attendancenavg" ><a href= "#" > Attendance Management </a></li>
<li id= "Teachnavg" ><a href= "#" > Teaching Management </a></li>
<li id= "Communicationnavg" ><a href= "#" > Home-School Exchange </a></li>
<li id= "Systemnavg" ><a href= "#" > System Management </a></li>
</ul>
</div>
<div id= "dailyattendance" class= "Secondarynavg" >
<ul>
<li id= "Dailyattendancenavg" ><a href= "#" > Day Attendance </a></li>
<li id= "Leaveapprovenavg" ><a href= "#" > Leave approval </a></li>
<li id= "Attendancestatisticsnavg" ><a href= "#" > Attendance Statistics </a></li>
<li id= "Attendancecollectnavg" ><a href= "#" > 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.