示例三 标签页
.tablist { position:relative; margin:100px auto; min-height:220px; } .tab_content { position: absolute;/*set content box as absolute*/ /* content style begin*/ width:600px; height:180px; padding:15px; border:1px solid #c0c0c0; border-radius:3px; box-shadow:0 2px 3px rgba(0,0,0,0.1); font-size:1.3em; line-height:1.6em; color:#222222; background:#fff; } #tab1:target, #tab2:target, #tab3:target { z-index: 1; } .tabmenu { position:absolute; top:105%; margin:0; } .tabmenu li{ display:inline-block; } .tabmenu li a { display:block; padding:5px 10px;margin:0 10px 0 0; border:1px solid #91a7b4; border-radius:0 0 5px 5px; /*background:#39b3d7;;*/ color:#444; text-decoration:none; } a:link { background:palevioletred; } a:visited{ background:#8699A4; } a:hover{ background:lightgreen; } a:active { background:lightskyblue; } //////////////////////////////////////////////////////////////////////////////// <div> <ul> <li><a href="#tab1">标签一</a></li> <li><a href="#tab2">标签二</a></li> <li><a href="#tab3">标签三</a></li> </ul> <div id="tab1"><h1>欢迎访问古典小说网</h1> <small>（http://www.gudianxiaoshuo.com）</small><br/> <p>目前推出三款软件：快乐课堂、任性动图、小说阅读</p> <!-- end tab1 content --></div> <div id="tab2"><h1>快乐课堂</h1> <p> 精致唯美 至臻体验 简单实用 </p> <p>完善的点名积分机制、激发学生学习兴趣</p> <!-- end tab2 content--></div> <div id="tab3"><h1>任性动图</h1> <p> 一键生成动图 </p> <!-- end tab3 content--></div> </div> |
