tab.css
body{ margin: 10px;}#content{ border-left: 1px solid #11a3ff; border-right: 1px solid #11a3ff; border-bottom: 1px solid #11a3ff; padding: 5px; font-size: 12px;}ul#tabnav{ list-style-type: none; margin: 0; padding-left: 0px; padding-bottom: 23px; border-bottom: 1px solid #11a3ff; font: 12px verdana, arial;}ul#tabnav li{ float: left; height: 22px; background-color: #a3dbff; margin: 0px 3px 0px 0px; border: 1px solid #11a3ff;}ul#tabnav a:link, ul#tabnav a:visited{ display: block; color: #006eb3; text-decoration: none; padding: 5px 10px 3px 10px;}ul#tabnav a:hover{ background-color: #006eb3; color: #fff;}body#home li.home, body#dev li.dev, body#design li.design, body#map li.map{ border-bottom: 1px solid #fff; color: #000; background-color: #fff;}
home.htm
<!DOCTYPE html><html> <head> <title>Tab菜單</title> <link href="tab.css" type="text/css" rel="stylesheet"> </head> <body id="home"> <ul id="tabnav"> <li class="home"><a href="home.htm">Home</a></li> <li class="dev"><a href="dev.htm">Web Dev</a></li> <li class="design"><a href="design.htm">Web Design</a></li> <li class="map"><a href="map.htm">Map</a></li> </ul> <div id="content"> <ul id="list"> <li>1. There are some good news.</li> <li>2. Not only good news.</li> <li>3. The text here are examples.</li> <li>4. Not only good news.</li> <li>5. The text here are examples</li> </ul> </div> </body></html>
dev.htm
<!DOCTYPE html><html> <head> <title>Tab菜單</title> <link href="tab.css" type="text/css" rel="stylesheet"> </head> <body id="dev"> <ul id="tabnav"> <li class="home"><a href="home.htm">Home</a></li> <li class="dev"><a href="dev.htm">Web Dev</a></li> <li class="design"><a href="design.htm">Web Design</a></li> <li class="map"><a href="map.htm">Map</a></li> </ul> <div id="content"> <ul id="list"> <li>1. There are some good news.</li> <li>2. Not only good news.</li> </ul> </div> </body></html>
design.htm
<!DOCTYPE html><html> <head> <title>Tab菜單</title> <link href="tab.css" type="text/css" rel="stylesheet"> </head> <body id="design"> <ul id="tabnav"> <li class="home"><a href="home.htm">Home</a></li> <li class="dev"><a href="dev.htm">Web Dev</a></li> <li class="design"><a href="design.htm">Web Design</a></li> <li class="map"><a href="map.htm">Map</a></li> </ul> <div id="content"> <ul id="list"> <li>1. There some good news.</li> <li>2. Not only good news.</li> <li>3. The text here are examples</li> <li>4. Not only good news.</li> </ul> </div> </body></html>
map.htm
<!DOCTYPE html><html> <head> <title>Tab菜單</title> <link href="tab.css" type="text/css" rel="stylesheet"> </head> <body id="map"> <ul id="tabnav"> <li class="home"><a href="home.htm">Home</a></li> <li class="dev"><a href="dev.htm">Web Dev</a></li> <li class="design"><a href="design.htm">Web Design</a></li> <li class="map"><a href="map.htm">Map</a></li> </ul> <div id="content"> <ul id="list"> <li>1. There some good news.</li> <li>2. Not only good news.</li> </ul> </div> </body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
