CSS 制作垂直菜单

最新推荐文章于 2022-12-20 09:18:47 发布

loaferwang

最新推荐文章于 2022-12-20 09:18:47 发布

阅读量917

点赞数

文章标签： css stylesheet 文档 class html url

本文链接：https://blog.csdn.net/loaferwang/article/details/2341587

版权

好久没有写过文章啦！嗨，也挺想的呀！今天有时间调试出来一个CSS效果，很是不错，今天就在此说明一下！

希望能给我一样的同仁，带来一点帮助！

HTML 文件内容如下

<%@ page contentType="text/html; charset=gb2312"%>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  <title>基础信息维护</title>
  <link rel="stylesheet" type="text/css" href="../../CSS/jspedit.css">
  <link rel="stylesheet" type="text/css" href="../../CSS/manuedit.css">
<body class="bodyleft">
    <table width="180">
         <tr><td class="tdhead"></td>
         </tr>
         <tr><td>Welcome to ASMS</td>
         </tr>
         <tr><td>user:
         </tr>
    </table>
   <div>
  <ul id="exNav">
   <li class="first selected">
    <a href="main.jsp" target="mainFrame">[入库管理]</a>
   </li>
   <li>
    <a href="#" target="mainFrame">[发放管理]</a>
   </li>
   <li>
    <a href="#" target="mainFrame">[周转管理]</a>
   </li>
   <li>
    <a href="#" target="mainFrame">[维修管理]</a>
   </li>
   </ul>
      </div>
</body>
</html>

*********************************************************************************************

CSS 代码（manuedit.css）

ul#exNav {
font-family: "Myriad Pro", Frutiger, "Lucida Grande", "Lucida Sans",
"Lucida Sans Unicode", Verdana, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
list-style-type: none;
}

ul#exNav li {
display: inline : /* :KLUDGE: Removes large gaps in IE/Win */
}

ul#exNav li a {
display: block;
width: 180px;
height: 18px;
line-height: 39px;
color: #000;
text-decoration: none;
background: #94B8E9 url(../ASMSviewjsp/image/topback.JPG) no-repeat left bottom;
text-indent: 50px;
text-transform: uppercase;
}

ul#exNav li a:hover,ul#mainNav li .selected a {
background-color: #999;
background-position: right bottom;
color: rgb(225,0,0);
}

ul#exNav .first a {
height: 40px;
line-height: 40px;
}

***********************************************************************************************

对于代码的编辑工作，最好能在分开的情况，而不影响代码可读性下，分开写为佳！

对于上述，如有不想分开写，可以如下操作

第一：在HTML文档中，<head> 致</head>中间加上

第二：让CSS代码代替 "此处加上CSS文档内容" ,即可完成，

对于以上操作，需要有一图片，效果更好，可以便意选取；

在CSS代码：background: #94B8E9 url(../ASMSviewjsp/image/topback.JPG) no-repeat left bottom;
修改一下路径即可，如果图片放在与HTML文档在同一目录下，在url(图片全称) 输入，即可完成;

loaferwang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 制作垂直菜单

好久没有写过文章啦！嗨，也挺想的呀！今天有时间调试出来一个CSS效果，很是不错，今天就在此说明一下！希望能给我一样的同仁，带来一点帮助！HTML 文件内容如下基础信息维护 Welcome to ASMS user: [入库管理
复制链接

扫一扫