مثال لتخطيط CSS: قائمة CSS+JS جيدة ذات مستويين

الجسم {محاذاة النص: المركز}
.cx_tabmenu {
الحشو العلوي: 2 بكسل؛ لون الخلفية: #474747؛ العرض: 790 بكسل؛
}
#ddimagetabs {
المساحة المتروكة على اليسار: 10 بكسل
}
#ddimagetabs أ {
الحشو-اليمين: 20 بكسل؛ 2px؛ FONT-FAMILY: Verdana، Arial، Helvetica، sans-serif؛
}
#ddimagetabs أ:تحوم {
BORDER-TOP: #ffffff 1px Solid; BACKGROUND: url(../images/cx_menu_hover.jpg) #363636 الجزء السفلي الأوسط بدون تكرار؛
}
#ddimagetabs أ.الحالي {
BORDER-TOP: #ffffff 1px Solid; BACKGROUND: url(../images/cx_menu_hover.jpg) #363636 الجزء السفلي الأوسط بدون تكرار؛
}
أ. الرابط: الرابط {

}
أ.sclink:زار {

}
أ.sclink:تحوم {

}
#sclink1 {

}
#ddimagetabs #sclink1 {

}
#ddimagetabs #sclink1:hover {
الحدود العلوية: #ff9900 1px صلب
}
#ddimagetabs .current#sclink1 {
الحدود العلوية: #ff9900 1px صلب
}
#sc1 أ:الرابط {

}
#sc1 أ:تمت الزيارة {

}
#sc1 أ:تحويم {

}
#ddimagetabs #sclink2 {

}
#ddimagetabs #sclink2:hover {
الحدود العلوية: #990099 1 بكسل صلب
}
#ddimagetabs .current#sclink2 {
الحدود العلوية: #990099 1 بكسل صلب
}
#sc2 أ: الرابط {

}
#sc2 أ:تمت الزيارة {

}
#sc2 أ:تحويم {

}
#ddimagetabs #sclink3 {

}
#ddimagetabs #sclink3:hover {
الحدود العلوية: #0099cc 1px صلب
}
#ddimagetabs .current#sclink3 {
الحدود العلوية: #0099cc 1px صلب
}
#sc3 أ: الرابط {

}
#sc3 أ:تمت الزيارة {

}
#sc3 أ:تحويم {

}
#ddimagetabs #sclink4 {

}
#ddimagetabs #sclink4:hover {
الحدود العلوية: #78ba00 1px صلب
}
#ddimagetabs .current#sclink4 {
الحدود العلوية: #78ba00 1px صلب
}
#sc4 أ: الرابط {

}
#sc4 أ:تمت الزيارة {

}
#sc4 أ:تحويم {

}
#ddimagetabs #sclink5 {

}
#ddimagetabs #sclink5:hover {
الحدود العلوية: #99cccc 1px صلب
}
#ddimagetabs .current#sclink5 {
الحدود العلوية: #99cccc 1px صلب
}
#sc5 أ:الرابط {

}
#sc5 أ:تمت الزيارة {

}
#sc5 أ:تحويم {

}
#ddimagetabs #sclink6 {

}
#ddimagetabs #sclink6:hover {
الحدود العلوية: #999999 1 بكسل صلب
}
#ddimagetabs .current#sclink6 {
الحدود العلوية: #999999 1 بكسل صلب
}
#sc6 أ:الرابط {

}
#sc6 أ:تمت الزيارة {

}
#sc6 أ:تحويم {

}
#ddimagetabs #sclink7 {
الحشوة اليمنى: 30 بكسل؛ الحد العلوي: #ff0000 1 بكسل الصلبة؛ الحشوة اليسرى: 30 بكسل؛
}
#ddimagetabs #sclink7:hover {
BORDER-TOP: #ef7777 1px الصلبة؛ الخلفية: url(../images/cx_menu_hover_my.jpg) #cf1919 الجزء السفلي الأوسط بدون تكرار
}
#ddimagetabs .current#sclink7 {
BORDER-TOP: #ef7777 1px الصلبة؛ الخلفية: url(../images/cx_menu_hover_my.jpg) #cf1919 الجزء السفلي الأوسط بدون تكرار
}
#sc7 أ:الرابط {

}
#sc7 أ:تمت الزيارة {

}
#sc7 أ:تحويم {

}
#tabcontentcontainer {
الخلفية: url(../images/sub_menu_bg.jpg) #fcfcfa تكرار-x؛ العرض: 790 بكسل؛ الارتفاع: 27 بكسل
}
محتوى التبويب {
العرض: لا يوجد؛
}
.tabcontent أ: الرابط {
الحشو الأيمن: 10 بكسل؛ حجم الخط: 11 بكسل؛ حجم الحشو: 4 بكسل؛ عائلة الخط: Verdana، Arial، Helvetica، sans-serif؛ الارتفاع: 18 بكسل؛ زخرفة النص: لا شيء
}
.tabcontent أ: تمت الزيارة {
الحشو الأيمن: 10 بكسل؛ حجم الخط: 11 بكسل؛ حجم الحشو: 4 بكسل؛ عائلة الخط: Verdana، Arial، Helvetica، sans-serif؛ الارتفاع: 18 بكسل؛ زخرفة النص: لا شيء
}
.tabcontent أ:تحوم {
الخلفية: url(../images/cx_submenu_hover_grey.jpg) الجزء السفلي الأوسط بدون تكرار؛ اللون: #000000
}
#active_submenu {
الخلفية: url(../images/cx_submenu_hover.jpg) #666666 الجزء السفلي المركزي بدون تكرار؛ اللون: #fff
}