ul li span 小组合

最新推荐文章于 2022-04-16 17:41:35 发布

郭晓湉

最新推荐文章于 2022-04-16 17:41:35 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Html

本文链接：https://blog.youkuaiyun.com/xtqueen/article/details/22060705

Html 专栏收录该内容

77 篇文章

订阅专栏

本文介绍了一个使用CSS进行水平菜单栏的设计方案，通过设置ul、li和a的不同样式属性实现美观且响应式的菜单布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>ul li span</title>
<style>
div.menu ul
{
    list-style:none; /* 去掉ul前面的符号 */
    margin: 0px; /* 与外界元素的距离为0 */
    padding: 0px; /* 与内部元素的距离为0 */
    width: auto; /* 宽度根据元素内容调整 */
}
/* 所有class为menu的div中的ul中的li样式 */
div.menu ul li
{
    float:left; /* 向左漂移，将竖排变为横排 */
}
/* 所有class为menu的div中的ul中的a样式(包括尚未点击的和点击过的样式) */
div.menu ul li a, div.menu ul li a:visited
{
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px; /* 内部填充的距离 10px 10px 10px 55px*/
    text-decoration: none;
    white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 */
   height:120px;
}
/* 所有class为menu的div中的ul中的a样式(鼠标移动到元素中的样式) */
div.menu ul li a:hover
{
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}
/* 所有class为menu的div中的ul中的a样式(鼠标点击元素时的样式) */
div.menu ul li a:active
{
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}
div.menu ul li a span
{
   /*float:left;margin:0 20px;置顶左边
   line-height: 1.35em;
   height:80px;*/
   display:block;
   text-align:center;

}
</style>
</head>

<body>

<div class="menu">
        <ul>
            <li><a href="javascript:void(0);"><img src="5.png" width="100" /><span>文件夹一</span></a></li>
            <li><a href="javascript:void(0);"><img src="5.png" width="100" /><span>文件夹二</span></a></li>
            <li><a href="javascript:void(0);"><img src="5.png" width="100" /><span>文件夹二</span></a></li>
            <li><a href="javascript:void(0);"><img src="5.png" width="100" /><span>文件夹二</span></a></li>
        </ul>
    </div>
</body>

</html>