css垂直菜单栏

来源：互联网发布：wpsoffice是什么软件编辑：程序博客网时间：2024/06/05 10:26

效果如图:

效果图

代码如下：

index.html

<!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title>css垂直菜单栏</title>    <link rel="stylesheet" href="index.css" media="screen" type="text/css" /></head><body><div id="container"><div style="text-align:center;clear:both;"></div><div class="tab-container"><div id="c1"><a href="#c1" title="First">First</a> <div class="tab-content">              <h3>First</h3>            </div></div><div id="c2"><a href="#c2" title="Second">Second</a> <div class="tab-content">             <h3>Second</h3>            </div></div><div id="c3"><a href="#c3" title="Third">Third</a> <div class="tab-content">             <h3>Third</h3>             </div></div><div id="c4"><a href="#c4" title="Fourth">Fourth</a> <div class="tab-content">             <h3>Fourth</h3>            </div></div></div></div></body></html>

index.css

body {   line-height:1;  font-size:13px;font-family:Arial, Helvetica, sans-serif;}p, .tab-content li, h1, h2, h3{     margin-bottom: 10px;}.tab-container h3{ font-size:147%;}#container{ margin: 0 auto;margin-top: 4%;}.tab-container {position: relative; width: 100%;z-index: 0;}.tab-container > div { }.tab-container > div > a {position: relative !important; display: inline-block;font-size: 15px;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-weight: bold;text-transform: uppercase;margin: 1px;background: #ddd; padding: 20px 55px;-moz-border-radius: 3px;-webkit-border-radius: 0px;border-radius: 3px;-moz-box-shadow: 0 4px 10px -5px #000000;box-shadow: 0 4px 10px -5px #000000;-webkit-box-shadow: 0 4px 10px -5px #000000;width: 50px;height: 10px;text-decoration: none;}.tab-container > div:not(:target) > a {}.tab-container > div:target > a {     background: none repeat scroll 0 0 #948a81;    text-shadow: 0 1px 0 #4C4648;}.tab-container > div > div { background: #ddd;top: 0;padding: 20px;min-height: 250px; position: absolute; left: 180px;width: 400px;}.tab-container > div:target > div { position: absolute; z-index: 3 !important; }

阅读全文

0 0