علامات التبويب اوبر جولة اللون

علامات التبويب لون اوبر جولة هو الصلبة القائمة CSS الملونة مع علامات التبويب التي يتم تقريب جيدا على كل جانب. شكرا لاثنين من صور شفافة تستخدم لخلق زوايا، يمكن تخصيص علامات التبويب إلى أي لون المطلوب باستخدام قيم اللون CSS وحدها. الآن هذا هو مفيد فقط! انظر أيضا DD علامات اللون و اللون الثاني DD علامات التبويب .

<style type="text/css">

.ubercolortabs{
padding: 0;
width: 100%;
overflow: hidden;
background: transparent;
}

.ubercolortabs ul{
font: bold 11px Arial, Verdana, sans-serif;
margin: 0;
padding: 0;
list-style: none;
}

.ubercolortabs li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform: uppercase;
}


.ubercolortabs a{
float: left;
color: white;
background: #804000 url(media/roundleft.gif) no-repeat left top; /*default background color of tabs, left corner image*/
margin: 0 2px 0 0;
padding: 0 0 1px 3px;
text-decoration: none;
letter-spacing: 1px;
}

.ubercolortabs a span{
float: left;
display: block;
background: transparent url(media/roundright.gif) no-repeat right top; /*right corner image*/
padding: 7px 9px 3px 6px;
cursor: pointer;
}

.ubercolortabs a span{
float: none;
}


.ubercolortabs a:hover, .ubercolortabs li.selected a{
background-color: #AE5300; /*background color of tabs onMouseover*/
color: white;
}

.ubercolortabs a:hover span{
background-color: transparent;
}


.ubercolordivider{ /*CSS for horizontal line.*/
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #804000; /*background color of horizontal line*/
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

</style>
<div class="ubercolortabs">
<ul>
<li><a href="#" style="margin-left: 12px"><span>Home</span></a></li>
<li><a href="#"><span>New</span></a></li>
<li class="selected"><a href="#"><span>Revised</span></a></li>
<li><a href="http://tools.dynamicdrive.com"><span>Tools</span></a></li>
<li><a href="#"><span>Forums</span></a></li>
</ul>
</div>

<div class="ubercolordivider"> </div>