Comments: HTML5 uses a menu effect produced by css3. Run it to see the effect.
The difficulty of implementation lies in the following two selectors: first-child and last-child, and the application of margin-left:-1px; in the future, which is 33%-34% in width.
Another difficulty is the implementation of box-shadow: 1px 0 0 # F1F1F1 inset.
Finally:
The Code is as follows:
Background:-webkit-gradient (linear, left top, left bottom, from (# f9f9f9), to (# b6b4b4); background:-moz-linear-gradient (top, # region, # b6b4b4); background:-o-linear-gradient (top, # f9f9f9, # b6b4b4); background: linear-gradient (top, # f9f9f9, # b6b4b4 );
The Code is as follows:
<! Doctype html>
<Html xmlns = "<a href =" http://www.w3.org/1999/xhtml "> http://www.w3.org/1999/xhtml </a>" xml: lang = "en">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> html5 and css3 menus </title>
<Style type = "text/css">
. Jikey_demo {width: 80%; margin: 0 auto; background: # f1f1f1 ;}
. News_info {margin-bottom: 5px; border: 1px solid # bbb; border-radius: 5px; box-shadow: 0 1px 0 # f1f1f1 ;}
. News_info a {display: inline-block; width: 33%; height: 26px; font-family: ""; line-height: 26px; text-align: center; color: #555; border-right: 1px solid # ccc; box-shadow: 1px 0 0 # F1F1F1 inset ;}
. News_info a: first-child {width: 33%; box-shadow: none; border-radius: 4px 0 0 4px ;}
. News_info a: last-child {width: 34%; border-right: none; margin-left:-2px; border-radius: 0 4px 4px 0 ;}
. News_info a: hover ,. news_info. current {color: # 208edd; background:-webkit-gradient (linear, left top, left bottom, from (# f9f9f9), to (# b6b4b4); background: -moz-linear-gradient (top, # f9f9f9, # b6b4b4); background:-o-linear-gradient (top, # f9f9f9, # b6b4b4); background: linear-gradient (top, # f9f9f9, # b6b4b4 );}
</Style>
</Head>
<Body>
<Div class = "jikey_demo">
<Nav class = "news_info"> <a class = "current" href = "/news/"> news 1 </a> <a class = "" href = "/guide /"> News 2 </a> <a class =" "href ="/review/"> News 3 </a> </nav>
</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
