html5+css创建横向及纵向菜单

最新推荐文章于 2024-07-25 14:15:14 发布

心中有光，不惧路长

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量1.9k

点赞数 2

分类专栏：前端入门文章标签： css html5

本文链接：https://blog.csdn.net/julia_xueli/article/details/119941408

版权

前端入门专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>横向列表创建</title>
    <link rel="stylesheet" type="text/css" href="hengxiang.css"/>

</head>
<body>
<div id="menu">
    <ul>
        <li>
            <a href="#">菜单项1</a>
        </li>
        <li>
            <a href="#">菜单项2</a>
        </li>
        <li>
            <a href="#">菜单项3</a>
        </li>
        <li>
            <a href="#">菜单项4</a>
        </li>
        <li>
            <a href="#">菜单项5</a>
        </li>
        <li class="last">
            <a href="#">菜单项6</a>
        </li>
    </ul>
</div>
</body>
</html>

body{
    font-size:13px;
    font-family: 微软雅黑;
    text-align: center;
}

#menu{
    width:120px;
  
}

#menu ul{
    margin:0;
    padding:0 10px;
    list-style: none;
    background: #eee;

}

#menu ul li{
    padding:12px 0;
    border-bottom: 1px dotted #ccc;
}

#menu ul li.last{
    border-bottom: 0px;
}

a:link{
    color:#000;
    text-decoration: none;
}

a:visited{
    color:#000;
    /*下划线默认继承未访问状态的*/
}

a:hover{
    color: #990000;
}

横向菜单

html代码与纵向菜单的同，（引用的css链接名记得改）

css代码只需修改以下几处：

#menu{
    width:500px;
    margin:10px auto;
}

#menu ul{
    margin:0;
    padding:0;
    list-style: none;
    background: #eee;
    height: 36px;
    line-height:36px;

}

#menu ul li{
    display: inline-block;
    padding:0 12px;
    border-bottom: 1px dashed #ccc;
}

#menu ul li.last{
    border-right: 0px;/*取消最后一个列表项的边框*/
}

心中有光，不惧路长

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
html5+css创建横向及纵向菜单

目录纵向菜单代码横向菜单代码纵向菜单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>横向列表创建</title> <link rel="stylesheet" type="text/css" href="hengxiang.css"/></head><body&gt
复制链接

扫一扫

专栏目录