欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

制作Css垂直导航

 

代码如下:

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;}

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r44574.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2017-11-04 10:20 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。