带导航标志的纯CSS竖向简洁菜单代码

发布时间：2018-08-19 13:17:35 所属栏目：政策来源：站长网

导读：烈38火38网(LieHuo63.Net)教73程带导航标志的纯CSS竖向简洁菜单代码，简约美观、实用精致。不会用CSs制作菜单的朋友，本例可作为你的终极范例，代码易懂。觉得有用的直接复制代码就可以用了。兼容性也不错，在各大浏览器中表现良好。演示： !DOCTYPE htm

　　烈38火38网(LieHuo63.Net)教73程带导航标志的纯CSS竖向简洁菜单代码，简约美观、实用精致。不会用CSs制作菜单的朋友，本例可作为你的终极范例，代码易懂。觉得有用的直接复制代码就可以用了。兼容性也不错，在各大浏览器中表现良好。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>带导航标志的简洁菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body{font:normal 62.5%/1.7 verdana,geneva,helvetica,arial,sans-serif;margin:0;padding:0;} .column{float:left;} #content{margin-left:20%;width:60%;} #navigation{margin-left:-80%;width:20%;} *html .column{display:inline;} *html #navigation li{height:1%;} .column .wrap{padding:20px;} #content .wrap{padding:20px 30px;} #content p{margin-top:0;} #content p:first-child{font:normal 1.4em/1.6 Georgia,times,"times new roman",serif;} #content p:first-child:first-line{text-transform:uppercase;} #navigation ul{list-style:none;margin:0;padding:0;} #navigation ul li{margin-bottom:.4em;} #navigation ul li a{background:#36c;display:block;color:#fff;border-left:7px solid #09f;padding:.4em .4em .4em 20px;text-decoration:none;} #navigation ul li a:hover{border-left:none;border-right:7px solid #09f;padding-left:27px;} </style> </head> <body> <div id="content" class="column"></div> <div id="navigation" class="column"> <div class="wrap"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!