Phiên bản đầy đủ: jsB@nk » CSS » Trình đơn ngang » Menu kiểu tab bằng CSS
URL: https://www.javascriptbank.com/css-tabbed-menu.html
Đoạn mã này tạo một trình đơn dạng tab trên trang web bằng cách sử dụng CSS. Một hiệu ứng khá đẹp và bắt mắt mà đơn giản.
Phiên bản đầy đủ: jsB@nk » CSS » Trình đơn ngang » Menu kiểu tab bằng CSS
URL: https://www.javascriptbank.com/css-tabbed-menu.html
<style>* {font-family : "Trebuchet MS", verdana, arial, helvetica;line-height : 17px;}html {height:100%;}body {/*background:#003300 url('img/v2_bg.jpg') repeat-x fixed center top; font-size:11px;*/letter-spacing : 1px;height:100%;margin:0;color:#666666}a:link, a:active, a:visited {text-decoration:none;color:#669966;font-weight:bold;}a:hover {color:#003300;}img {border:0px;}ul {list-style-type:circle;margin:0px 0px 0px 30px;}.active a:active {background:#ffffff;color:#336633;margin-bottom: -1px;border-bottom: 1px white solid;}.ad {margin-top:30px;text-align:center;vertical-align:middle;float:left;width:540px;}.banner {margin-bottom:-20px;height:150px;position: relative;display:table;z-index: 1;}.layout {margin: 0 auto;width:760px;height:100%;border-right: double 3px #ccc;border-left: double 3px #ccc;background-color:#FFFFFF;}html>body .layout {height: auto;min-height: 100%;}.justify {text-align:justify;}.navigation {position: relative;width:100%;display:table;z-index: 2;letter-spacing : 0px;}.navigation ul{padding:0;margin:0;white-space: nowrap;list-style-type:none;}.navigation li {display:inline;}.navigation a:link, .navigation a:visited {font-weight:normal;float:left;padding:1px 5px 1px 5px;margin-left:5px;background:#669966;color:#ffffff;border-top: 1px solid #003300;border-right: 1px solid #003300;border-left: 1px solid #003300;border-bottom: 1px solid #003300;}.navigation a:hover {background:#ffffff;color:#336633;margin-bottom: -1px;border-bottom: 1px white solid;}.navigation a:active {background:#ffffff;color:#336633;margin-bottom: -1px;border-bottom: 1px white solid;}.partners {position: relative;z-index: 1;margin-top: -1px;border-top: 1px solid #000000;text-align:right;letter-spacing : 0px;width:760px;font-size:11px;}.partners a {font-weight:normal;}.contents {padding:10px;}big {font-size : 14px; font-weight : bold; letter-spacing : 2px;}input, select, textarea {border : 1px dotted #336633; font-size : 10px; color : #383838; }p {padding:0px;margin:0px;}xmp {margin: 10px;padding-left:10px;font-size : 11px; color : #006600;border: 1px solid #EEEEEE;background-color:#F4F4F4;}.author {width : 75px; height : 75px; border : 1px solid #eee; }.pagename {border-left:4px solid #FF6600;font-size:15px;color:#006600;letter-spacing:2px;margin-bottom:10px;}.title {font-weight : bold; color : #006600; font-size : 15px; }.thumb {float : left; padding-right : 3px; border : 0px none; width : 50px; height : 50px; vertical-align : middle }.float {float : left; }.who{border-bottom : 1px solid #000000; font-weight : bold; text-align : right; padding-right : 5px; }.bg1 {background-color : #ffffff; padding:5px;color : #003300; border-top: 3px double #eee;border-bottom: 3px double #eee;height : 50px; width : 98%; display : table; }.bg2 {background-color : #f4f4f4; padding:5px;color : #003300; height : 50px; width : 98%; display : table; }.footer {margin: 0 auto;text-align:center;padding: 5px;height:30px;width: 300px;background-color:#f9f9f9;border: 1px solid #eee;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div class="navigation"><ul><li><a href="http://javascriptbank.com/" class="active">Home</a></li><li><a href="jsbank.beplaced.com/text/hometext.htm">Text</a></li><li><a href="http://javascriptbank.com/status/homestatus.htm">Status</a></li><li><a href="http://javascriptbank.com/browser/homebrowser.htm">Browser</a></li><li><a href="http://javascriptbank.com/link/homelink.htm">Link</a></li><li><a href="http://javascriptbank.com/clock/homeclock.htm">Time</a></li><li><a href="http://javascriptbank.com/utility/homeutility.htm">Utility</a></li><li><a href="http://javascriptbank.com/mouse/homemouse.htm">Mouse</a></li></ul></div><div class="partners"></div><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->