要使用ul
和li
标签实现边框重叠,并附带鼠标经过效果,可以按照以下步骤进行操作:
- 创建一个无序列表
ul
,并添加需要展示的内容,例如:
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
- 使用CSS对
ul
和li
进行样式修改,例如:
ul {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
li {
display: inline-block;
padding: 10px 20px;
border: 1px solid #ccc;
position: relative;
}
li:first-child {
border-left: none;
}
li:last-child {
border-right: none;
}
li:hover {
background-color: #ccc;
color: #fff;
}
li:hover:before, li:hover:after {
content: "";
position: absolute;
height: 0;
width: 0;
border-style: solid;
}
li:hover:before {
left: -2px;
top: -2px;
border-width: 0 0 10px 10px;
border-color: transparent transparent #ccc transparent;
}
li:hover:after {
right: -2px;
top: -2px;
border-width: 0 10px 10px 0;
border-color: transparent #ccc transparent transparent;
}
解释以上CSS代码的作用:
list-style: none;
:去掉ul的默认样式,即圆点padding: 0; margin: 0;
:去除ul的内外边距,使菜单显示更整齐display: inline-block;
:让ul和li变成inline-block,方便水平排列display: inline-block;
:设置li为inline-block,让li水平排列padding: 10px 20px;
:设置li的内边距,让菜单内容看起来更舒适border: 1px solid #ccc;
:设置li的边框颜色为灰色position: relative;
:设置li的定位为相对li:first-child {border-left: none;}
:去掉第一个菜单项的左边框li:last-child {border-right: none;}
:去掉最后一个菜单项的右边框li:hover {background-color: #ccc;color: #fff;}
:当鼠标移动到菜单项上时,改变背景颜色和字体颜色li:hover:before, li:hover:after {...}
:当鼠标移动到菜单项上时,添加伪元素before
和after
,制作出多重边框的效果
接下来,我们提供两个实例,以帮助更好地理解这个过程:
- 两个仅使用
border
的边框重叠效果
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
ul {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
li {
display: inline-block;
padding: 10px 20px;
position: relative;
}
li:before, li:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #ccc;
top: -2px;
left: -2px;
z-index: -1;
}
li:before {
border-right: none;
border-bottom: none;
}
li:after {
border-left: none;
border-top: none;
}
li:hover {
background-color: #ccc;
color: #fff;
}
- 使用伪元素创建了多重边框效果和背景色变化
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
ul {
list-style: none;
padding: 0;
margin: 0;
display: inline-block;
}
li {
display: inline-block;
padding: 10px 20px;
border: 1px solid #ccc;
position: relative;
}
li:first-child {
border-left: none;
}
li:last-child {
border-right: none;
}
li:hover {
background-color: #ccc;
color: #fff;
}
li:hover:before, li:hover:after {
content: "";
position: absolute;
height: 0;
width: 0;
border-style: solid;
}
li:hover:before {
left: -2px;
top: -2px;
border-width: 0 0 10px 10px;
border-color: transparent transparent #ccc transparent;
}
li:hover:after {
right: -2px;
top: -2px;
border-width: 0 10px 10px 0;
border-color: transparent #ccc transparent transparent;
}
以上两个示例仅仅是实现的不同,并且使用的是不同的CSS代码,但思路都是相同的,因此我们可以从中学到如何使用ul
和li
标签来创建菜单,同时使用CSS来实现边框重叠和鼠标移动效果。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:用ul li实现边框重合并附带鼠标经过效果 - Python技术站