制作Css垂直导航

2024-01-18 14:45 小编

代码如下：

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><div id="c1"><a href="#c1" title="First">First</a><div> <h3>First</h3></div></div><div id="c2"><a href="#c2" title="Second">Second</a><div><h3>Second</h3></div></div><div id="c3"><a href="#c3" title="Third">Third</a><div><h3>Third</h3></div></div><div id="c4"><a href="#c4" title="Fourth">Fourth</a><div><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;}

Tag：制作价格

返回首页上一篇：IE6及IE6以下识别CSS HACK 下一篇：Css基础内容小结