html中用无序列表实现简单的右键菜单

最新推荐文章于 2023-04-09 14:11:20 发布

七上八下的爆米花

最新推荐文章于 2023-04-09 14:11:20 发布

阅读量911

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/lanseguhui/article/details/80426976

版权

html 专栏收录该内容

51 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="UTF-8">
<title>无序列表右键菜单</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
list-style: none;
}

.bigbox{
width: 250px;
height: 700px;
background-color: #CCCCCC;
}
ul{
padding-left: 20px;
padding-right:20px;
}
li{
widows: 280px;
height: 30px;
padding-left: 40px;

line-height: 30px;
font-size: 18px;
padding-top: 12px;
padding-bottom: 11px;

}
li:hover{
background-color: #0080FF;
}

.lithree,.lieight,.linine,.lieleven{
border-bottom: 2px solid #808080;
}
.lisecond{
background:url(img/con1_bg2.png) no-repeat left center;
}
.lione,.lithree,.linine,.litwelve{
background: url(img/con1_bg1.png) no-repeat right center;
}
.lifour{
background: url(img/con2_bg1.png) no-repeat left center;
}

</style>
</head>
<body>
<div class="bigbox">
<ul>
<li class="lione">工具栏</li>
<li class="lisecond">状态栏</li>
<li class="lithree">浏览器栏</li>
<li class="lifour">缩略图</li>
<li>平铺</li>
<li>图标</li>
<li>列表</li>
<li class="lieight">详细信息</li>
<li class="linine">排列图标</li>
<li>选择详细信息</li>
<li class="lieleven">自定义文件夹</li>
<li class="litwelve">转到</li>
<li>刷新</li>
</ul>
</div>

</body>

</html>

七上八下的爆米花

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
html中用无序列表实现简单的右键菜单

&lt;!DOCTYPE html&gt;&lt;html lang="zh-CH"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;无序列表右键菜单&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin: 0px;
复制链接

扫一扫

专栏目录