0顶

一款纯CSS打造的竖向导航菜单

稿源：互联网 2022-04-04 15:56:46 点击： 5672 撤稿纠错

鼠标经过后变换颜色的效果，非常简洁、清爽。

以下讨论的是和导航菜单相关的一款纯CSS打造的竖向导航菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Alixixi.com导航菜单特效</title>
<style type="text/css">
menu{
 margin:0;
 padding:0;
 list-style:none;
 width:120px;
}
menu li{
 height:20px;
 /*解决IE与Gecko浏览器之间的盒模型差异*/
 margin-bottom:4px !important; 
 margin-bottom:2px;
}
menu a{
 /*定义a为块级元素，方便用盒模型属性定义外观*/
 display:block;
 /*定义尺寸*/
 width:100%;
 height:20px;
 /*盒模型风格*/
 background-color:#F6F6F6;
 border:1px solid #DDD;
 /*文字样式*/
 font:11px arial;
 text-decoration:none;
 /*垂直居中*/
 line-height:20px;
 /*水平居中*/
 text-align:center;
}
menu a:link,menu a:visited{
 color:#333;
}
menu a:hover,menu a:active{
 background-color:#FFEFE6;
 border:1px solid #F60;
}
menu li.active a{
 background-color:#E8F3FF;
 border:1px solid #39F;
}
</style>
</head>
<body>
<menu>
 <li><a href="http://httpd.apache.org/" title="Apache Web Server (httpd)">HTTP Server</a></li>
 <li><a href="http://ant.apache.org/" title="Java-based build tool">Ant</a></li>
 <li><a href="http://apr.apache.org/" title="Apache Portable Runtime libraries">APR</a></li>
 <li><a href="http://cocoon.apache.org/" title="Web development framework: separation of concerns, component-based">Cocoon</a></li>
 <li class="active"><a href="http://db.apache.org/" title="Database access">DB</a></li>
 <li><a href="http://directory.apache.org/" title="Apache Directory Server">Directory</a></li>
 <li><a href="http://excalibur.apache.org/" title="Embeddable software libraries related to component and service management access">Excalibur</a></li>
 <li><a href="http://forrest.apache.org/" title="Aggregated multi-channel documentation, separation of concerns">Forrest</a></li>
 <li><a href="http://geronimo.apache.org/" title="Java2, Enterprise Edition (J2EE) container">Geronimo</a></li>
 <li><a href="http://gump.apache.org/" title="Continuous integration of open source projects">Gump</a></li>
 <li><a href="http://incubator.apache.org/" title="Shepherd for new projects">Incubator</a></li>
 <li><a href="http://jakarta.apache.org/" title="Server-side Java">Jakarta</a></li>
 <li><a href="http://james.apache.org/" title="Java Apache Mail Enterprise Server">James</a></li>
 <li><a href="http://lenya.apache.org/" title="Content Management System">Lenya</a></li>
 <li><a href="http://logging.apache.org/" title="Cross-language logging services">Logging</a></li>
 <li><a href="http://lucene.apache.org/" title="Search engine library">Lucene</a></li>
 <li><a href="http://maven.apache.org/" title="Java project management and comprehension tools">Maven</a></li>
 <li><a href="http://myfaces.apache.org/" title="JavaServer(tm) Faces implementation and components">MyFaces</a></li>
 <li><a href="http://perl.apache.org/" title="Dynamic websites using Perl">Perl</a></li>
 <li><a href="http://portals.apache.org/" title="Portal technology">Portals</a></li>
 <li><a href="http://spamassassin.apache.org/" title="Mail filter to identify spam">SpamAssassin</a></li>
 <li><a href="http://struts.apache.org/" title="Model 2 framework for building Java web applications">Struts</a></li>
 <li><a href="http://tcl.apache.org/" title="Dynamic websites using TCL">TCL</a></li>
 <li><a href="http://ws.apache.org/">Web Services</a></li>
 <li><a href="http://xml.apache.org/" title="XML solutions focused on the web">XML</a></li>
 <li><a href="http://xmlbeans.apache.org/" title="XML-Java binding tool">XMLBeans</a></li>
 <li><a href="http://xmlgraphics.apache.org/" title="Conversion from XML to graphical output">XML Graphics</a></li>
 <li><a href="/foundation/conferences.html" title="Meetings of developers and users">Conferences</a></li>
 <li><a href="/foundation/" title="The Apache Software Foundation">Foundation</a></li>
</menu>
</body>
</html>

关于一款纯CSS打造的竖向导航菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200904293.shtml方便下次再访问哦。

·上一篇： 网页功能按钮大全
·下一篇： 鼠标经过显示详细简介的排名菜单

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

一款纯CSS打造的竖向导航菜单

文章分类LIST >>返回首页

最新游戏

最新新闻