HTML中用盒子模型写右键菜单项-CSDN博客

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型做右键菜单</title>
<style type="text/css">
.box{
width: 200px;
background-color: #E6E6E6;

}
.box1{
width: 150px;
height: 30px;
line-height: 30px;
margin:10px 8px 8px 8px;
padding-left: 30px;
}
.box1:hover{
background-color: #0080FF;

}
.box2{
border-bottom: 1px solid #808080;
}
.one,.three,.nine,.twelve{
background: url(img/con1_bg1.png) no-repeat right center;
}
.two{
background: url(img/con1_bg2.png) no-repeat left center;
}
.four{
background: url(img/con2_bg1.png) no-repeat left center;
}

</style>
</head>
<body>
<div class="box">
<div class="box1 one">工具栏</div>
<div class="box1 two">状态栏</div>
<div class="box1 box2 three">浏览器栏</div>
<div class="box1 four">缩略图</div>
<div class="box1">平铺</div>
<div class="box1">图标</div>
<div class="box1">列表</div>
<div class="box1 box2 ">详细信息</div>
<div class="box1 box2 nine ">排列图标</div>
<div class="box1">选择详细信息</div>
<div class="box1 box2">自定义文件夹</div>
<div class="box1 twelve">转到</div>
<div class="box1">刷新</div>
</div>

</body>

</html>