HTML CSS examples for CSS Widget:UL
Create tab layout with UL
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .container {width: 500px; margin: 10px auto;} ul.tabs {<!--from w ww .j a v a2s .c om--> margin: 0; padding: 0; float: left; list-style: none; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; height: 31px; } ul.tabs li { float: left; margin: 0; padding: 0; height: 30px; line-height: 30px; border: 1px solid #999; border-left: none; margin-bottom: 0px; background: #e0e0e0; overflow: hidden; position: relative; } ul.tabs li a { text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; outline: none; } ul.tabs li a:hover { background: #ccc; } html ul.tabs li.active { background: #fff; border-top: 2px solid rgb(230,139,44); border-bottom: 1px solid #FFF; } html ul.tabs li.active a { position:relative; top:-1px; } html ul.tabs li.active a:hover { background: #fff; } .tab_container { border: 1px solid #999; border-top: none; clear: both; float: left; width: 100%; background: #fff; } .tab_content { padding: 20px; font-size: 1.2em; } .tab_content h2 { font-weight: normal; padding-bottom: 10px; font-size: 1.8em; } .tab_content h3 a{ color: #254588; } </style> </head> <body> <div class="container"> <ul class="tabs"> <li> <a href="#tab1">Gallery</a> </li> <li class="active"> <a href="#tab2">Submit</a> </li> <li> <a href="#tab3">Resources</a> </li> <li> <a href="#tab4">Contact</a> </li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> Tab 1 Content </div> <div id="tab2" class="tab_content"> Tab 2 Content </div> <div id="tab3" class="tab_content"> Tab 3 Content </div> <div id="tab4" class="tab_content"> Tab 4 Content </div> </div> </div> </body> </html>