<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> DIV + CSS layout example: TAB sliding door Label Switching Code </title>
<Style type = "text/css">
* {List-style-type: none; font-size: 12px; text-decoration: none; margin: 0; padding: 0 ;}
A {behavior: url (xuxian. htc )}
. Woaicss {width: 438px; height: 300px; overflow: hidden; margin: 50px auto ;}
. Woaicss_title {width: 438px; height: 30px; background: # fff url (http://myjs.jz123.cn/inc1/btn_bg.png) no-repeat; overflow: hidden;}/* http://myjs.jz123.cn/inc1/btn_bg.png */
. Woaicss_title li {display: block; float: left; margin: 0 2px 0 0 0; display: inline; text-align: center ;}
. Woaicss_title li a {display: block; width: 90px; heigth: 30px; line-height: 34px; color: # fff ;}
. Woaicss_title li a: hover {color: red; text-decoration: underline ;}
. Woaicss_title_bg1 {background-position: 0 0 ;}
. Woaicss_title_bg2 {background-position: 0-30px ;}
. Woaicss_title_bg3 {background-position: 0-60px ;}
. Woaicss_title_bg4 {background-position: 0-90px ;}
. Woaicss_con {display: block; width: pixel PX; height: 260px; background: url () no-repeat 0 0; overflow: hidden; BORDER: # aecbd4 1px solid ;} /*/images/20110424/con_bg.png */
. Woaicss_con ul {width: 418px; height: 250px; margin: 12px auto ;}
. Woaicss_con li {width: 418px; line-height: 30px; margin: 0 auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden ;}
. Woaicss_con li a {color: # 03c ;}
. Woaicss_con li a: hover {color: #069; text-decoration: underline ;}
. Woaicss_copy {width: 438px; margin: 10px auto; text-align: center ;}
. Woaicss_copy a {color: # f00 ;}
</Style>
</Head>
<Body>
<Div class = "woaicss">
<Script language = "javascript">
Function woaicssq (num ){
For (var id = 1; id <= 4; id ++)
{
Var MrJin = "woaicss_con" + id;
If (id = num)
Document. getElementById (MrJin). style. display = "block ";
Else
Document. getElementById (MrJin). style. display = "none ";
}
If (num = 1)
Document. getElementById ("woaicsstitle"). className = "woaicss_title woaicss_title_bg1 ";
If (num = 2)
Document. getElementById ("woaicsstitle"). className = "woaicss_title woaicss_title_bg2 ";
If (num = 3)
Document. getElementById ("woaicsstitle"). className = "woaicss_title woaicss_title_bg3 ";
If (num = 4)
Document. getElementById ("woaicsstitle"). className = "woaicss_title woaicss_title_bg4 ";
}
</Script>
<Ul class = "woaicss_title woaicss_title_bg1" id = "woaicsstitle">
<Li> <a href = "#" target = "_ blank" onmouseover = "javascript: woaicssq (1)"> TAB ① </a> </li>
<Li> <a href = "#" target = "_ blank" onmouseover = "javascript: woaicssq (2)"> TAB ② </a> </li>
<Li> <a href = "#" target = "_ blank" onmouseover = "javascript: woaicssq (3)"> TAB ③ </a> </li>
<Li> <a href = "#" target = "_ blank" onmouseover = "javascript: woaicssq (4)"> TAB ④ </a> </li>
</Ul>
<Div class = "woaicss_con" id = "woaicss_con1" style = "display: block;">
<Ul>
<Li> · <a title = "a few super beautiful examples of fresh and common CSS layout and colors on webpages" target = "_ blank" href = "#"> pretty a fresh and frequently-used CSS color layout example </a> </li>
<Li> · <a title = "Div layer with background image on CSS corner" target = "_ blank" href = "#"> CSS corner with background image div layer </a> </li>
<Li> · <a title = "layer expansion and layer folding effects implemented by Js, by default, the layer is collapsed "target =" _ blank "href =" # "> layer expansion and layer folding effects implemented by Js, by default, the layer is collapsed </a> </li>
<Li> · <a title = "CSS Implementation Method for DIV always fixed at the bottom right corner of the webpage" target = "_ blank" href = "#"> DIV always fixed at the bottom right corner of the webpage </a> </li>
<Li> · <a title = "Method for vertical center of unknown JavaScript height elements" target = "_ blank" href = "#"> Method for vertical center of unknown JavaScript height Elements </a> </li>
<Li> · <a title = "gradient color text" target = "_ blank" href = "#"> gradient color text </a> </li>
<Li> · <a title = "specify text to be displayed one by one" target = "_ blank" href = "#"> specify text to be displayed one by one </a> </li>
<Li> · <a title = "rolling title bar" target = "_ blank" href = "#"> rolling title bar </a> </li>
</Ul>
</Div>
<Div class = "woaicss_con" id = "woaicss_con2" style = "display: none;">
<Ul>
<Li> ·
<A title = "JS 4-screen smooth rolling slide effects" target = "_ blank" href = "#">
JS 4-screen smooth slide effects </a> </li>
<Li> ·
<A title = "seamless image scrolling (vertical and horizontal)" target = "_ blank" href = "#">
Seamless image scrolling (vertical and horizontal) </a> </li>
<Li> ·
<A title = "hover your mouse over a menu with a border" target = "_ blank" href = "#">
Hover your mouse over a menu with a border </a> </li>
<Li> ·
<A title = "Practical CSS control link color effect" target = "_ blank" href = "#">
Relatively practical CSS controls the link color effect </a> </li>
<Li> ·
<A title = "when you touch or exit the image, the image size changes accordingly." target = "_ blank" href = "#">
When the mouse clicks or leaves the image, the image size changes accordingly </a> </li>
<Li> ·
<A title = "special mouse hover prompt" target = "_ blank" href = "#">
Special mouse hover tips </a> </li>
<Li> ·
<A title = "CSS Sprite-created browser navigation bar" target = "_ blank" href = "#">
CSS Sprite-made mouse-sensing website navigation bar </a> </li>
<Li> ·
<A title = "move the mouse to activate the CSS special effect code for displaying the background color" target = "_ blank" href = "#">
Use the mouse to activate the CSS special effect code for displaying the background color </a> </li>
</Ul>
</Div>
<Div class = "woaicss_con" id = "woaicss_con3" style = "display: none;">
<Ul>
<Li> ·
<A title = "[cool] Another FLASH image switching effect code" target = "_ blank" href = "#">
[Cool] Another FLASH image switching effect Code </a> </li>
<Li> ·
<A title = "exquisite flip Picture News code" target = "_ blank" href = "#">
Exquisite flip Picture News Code </a> </li>
<Li> ·
<A title = "following the mouse on top of the wonderful undersea flowers" target = "_ blank" href = "#">
Follow the mouse to the top of the wonderful undersea flowers </a> </li>
<Li> ·
<A title = "special effect of force-clicking ad code" target = "_ blank" href = "#">
Special Effect of force-click advertisement code </a> </li>
<Li> ·
<A title = "show the special effect code of the thumbnail list after the mouse goes through the list" target = "_ blank" href = "#">
Show the special effect code of the thumbnail list after the mouse goes through the list </a> </li>
<Li> ·
<A title = "Corner Effect without corner image creation" target = "_ blank" href = "#">
Effect of creating a rounded corner without using a rounded corner image </a> </li>
<Li> ·
<A title = "Several super beautiful examples of fresh and common CSS layout and color schemes for webpages" target = "_ blank" href = "#">
Several fresh and frequently-used CSS layout color examples of super beautiful web pages </a> </li>
<Li> ·
<A title = "target =" _ blank "href =" # ">
Create a Div layer with a background image on the corner of CSS </a> </li>
</Ul>
</Div>
<Div class = "woaicss_con" id = "woaicss_con4" style = "display: none;">
<Ul>
<Li> ·
<A title = "layer expansion and layer folding effects implemented by Js. By default, the layer is collapsed" target = "_ blank" href = "#">
By default, the layer is collapsed. </a> </li>
<Li> ·
<A title = "CSS Implementation Method of DIV always fixed at the bottom right corner of the webpage" target = "_ blank" href = "#">
CSS Implementation of DIV always fixed at the bottom right corner of the webpage </a> </li>
<Li> ·
<A title = "Method for vertical center of unknown JavaScript height elements" target = "_ blank" href = "#">
Method for vertical center of unknown height elements in JavaScript </a> </li>
<Li> ·
<A title = "gradient color text" target = "_ blank" href = "#">
Gradient color text </a> </li>
<Li> ·
<A title = "specify text display one by one" target = "_ blank" href = "#">
Specify text to be displayed one by one </a> </li>
<Li> ·
<A title = "rolling title bar" target = "_ blank" href = "#">
Scroll title bar </a> </li>
<Li> ·
<A title = "JS 4-screen smooth rolling slide effects" target = "_ blank" href = "#">
JS 4-screen smooth slide effects </a> </li>
<Li> ·
<A title = "seamless image scrolling (vertical and horizontal)" target = "_ blank" href = "#">
Seamless image scrolling (vertical and horizontal) </a> </li>
</Ul>
</Div>
</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
