The method comes from the navigation of Tudou, record the idea of realization here.
Mainly by the use of position properties of absolute and relative with z-index to achieve, through the position: Absolute will need to tile the background to cascade on another background, so that you can achieve the same position two background, and then use Z-index to elevate the content to the highest order display.
<div id= "a" >
<div id= "B" >
<ul>
<li><a href= "http://www.prower.cn/category/internet" > Internet Talk </a></li>
<li><a href= "Http://www.prower.cn/category/interaction" > Interactive design </a></li>
<li><a href= "Http://www.prower.cn/category/technic" > Technical remarks </a></li>
</ul>
<div id= "C" ></div>
</div>
<div id= "D" ></div>
</div>
First, write one of the background styles on the <div id= "a" >, then write another background style on <div id= "D" >, <div id= "B" > is the content layer, <div id= "C" > is another background style layer that is free to appear in any position in the <div id= "B" >. such as the potato in the middle of the arc of the background.
Then there is the style aspect:
#a {background: #f00; height:50px; position:relative; width:100%;}
#b {height:50px; margin:0 auto; position:relative; width:950px; z-index:9000;}
#c {background: #ff0; height:50px; position:absolute; left:100px; top:0; width:100px; z-index:-1;}
#d {background: #f60; height:50px; position:absolute; left:0; top:0; width:50%; z-index:1;}
UL {line-height:50px; position:relative; z-index:9001;}
Specific code See:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> Both sides background automatic extension </title> <style type=" Text/css "> body,ul,li,a {margin:0; padding:0; font-size:14px;} #a {background: #f00; height:50px; position:relative width:100%;} #b {height:50px; margin:0 auto; position:relative; width:950px; z-index:9000;} #c {background: #ff0; height:50px; position:absolute; left:100px; top:0; width:100px; z-index:-1;} #d {background: #f60; height:50px; Position:absolute; left:0; top:0; width:50%; Z-index:1;} UL {line-height:50px; position:relative; z-index:9001;} li {float:left; list-style:none; margin-right:20px;} a {color:# 04a; Text-decoration:none;} a:hover {color: #fff;} </style> </pead> <body> <div id= "A" > <div id= "b" > <ul> <li& Gt;<a href="Http://www.webjx.com/category/internet" > Internet talk </a></li> <li><a href= "http://www.webjx.com /category/interaction "> Interactive design </a></li> <li><a href=" Http://www.webjx.com/category/technic " > Technical remarks </a></li> <li><a href= "http://www.webjx.com/category/internet" > Internet Talk </a> </li> <li><a href= "Http://www.webjx.com/category/interaction" > Interactive design </a></li> <li ><a href= "Http://www.webjx.com/category/technic" > Technical remarks </a></li> <li><a href= "http:// Www.webjx.com/category/internet "> Internet talk </a></li> <li><a href=" http://www.webjx.com/ Category/interaction "> Interactive design </a></li> <li><a href=" Http://www.webjx.com/category/technic " > Technical remarks </a></li> </ul> <div id= "C" ></div> </div> <div id= "D" ></div> </div> </body> </ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
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
