The JavaScript-based sliding door completed by the (www.bkjia.com) Tutorial with CSS is characterized by clear lines and a clearer structure of the sliding door without modifying the background color, if you want to improve the style, change it to the style you want.
<! 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 runat =" server "> <title> line css sliding door </title> <style> body, div, ul, li {margin: 0 auto; padding: 0;} body {font: 12px ""; text-align: center;} a: link {color: # 00F; text-decoration: none;}: visited {color: # 00F; text-decoration: none;} a: hover {color: # c00; text-decoration: underline;} ul {list-style: none ;}. main {clear: both; padding: 8px; text-align: center ;}# tabs1 {text-align: left; width: 400px ;}. menu1box {position: relative; overflow: hidden; height: 22px; width: 400px; text-align: left ;}# menu1 {position: absolute; top: 0; left: 0; z-index: 1 ;}# menu1 li {float: left; display: block; cursor: pointer; width: 72px; text-align: center; line-height: 21px; height: 21px;} # menu1 li. hover {background: # fff; border-left: 1px solid #333; border-top: 1px solid #333; border-right: 1px solid #333 ;}. main1box {clear: both; margin-top:-1px; border: 1px solid #333; height: 181px; width: 400px; }# main1 ul {display: none ;} # main1 ul. block {display: block ;} </style>
Tip: the code can be modified before running!
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
