CSS——关于列表和导航条菜单之垂直菜单制作

最新推荐文章于 2023-05-06 09:21:42 发布

weixin_30741653

最新推荐文章于 2023-05-06 09:21:42 发布

阅读量268

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/fanyj/p/4117907.html

版权

导航条菜单，即左图所示。下面，将一一展开如何制作。

1、首先，制作一个垂直的项目菜单，用<ul><li>标签写出基本内容，然后在样式表里面用margin和padding去掉内外边距，用list-style属性去掉原有的项目符号，插入自己喜欢的项目符号，代码如下：

<!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>列表和导航条</title>
<style type="text/css">
    ul{
        padding: 0;margin: 0;
        list-style: none;
    }
    li{ 
　　　　 background:url(符号地址.png) no-repeat 0 50%;       //这个时候必须写background
        height: 30px;line-height: 30px;
        padding-left: 30px;
    }
</style>
</head>
<body>
<ul>
    <li><a href = "#">project1</a></li>
    <li><a href = "#">project2</a></li>
    <li><a href = "#">project3</a></li>
    <li><a href = "#">project4</a></li>
</ul>
</body>
</html>

并且可以同时给项目设置喜欢的边框和背景颜色：

li{
        background:url(%E9%A1%B9%E7%9B%AE%E7%AC%A6%E5%8F%B7.png) no-repeat 0 50%;//这个时候必须写background
        height: 30px;line-height: 30px;
        padding-left: 30px;
        display: block;
        width: 70px;
        background-color: #CCC;
        border: 1px solid #666;
    }

这个时候，你会发现中间的边框线以为重叠而加粗了，你可以通过去掉下边框解决掉这个问题，然后再给最后一项或第一项加上：

li{
     border-bottom:0;
   }
ul #last{
        border-bottom: 1px solid #666;
        }

这个时候，垂直导航条的基本样式已经出来了，当然我们还需要：:hover,:focus,:selected状态：

ul li a:hover,ul li a:focus{
            color:#000;
            background-color:#960;
            }

这个时候，既有漂亮样式也有翻转效果的垂直导航菜单就诞生了~~~

转载于:https://www.cnblogs.com/fanyj/p/4117907.html

weixin_30741653

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS——关于列表和导航条菜单之垂直菜单制作

导航条菜单，即左图所示。下面，将一一展开如何制作。1、首先，制作一个垂直的项目菜单，用<ul><li>标签写出基本内容，然后在样式表里面用margin和padding去掉内外边距，用list-style属性去掉原有的项目符号，插入自己喜欢的项目符号，代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T...
复制链接

扫一扫