用ul li实现边框重合并附带鼠标经过效果

要使用ulli标签实现边框重叠,并附带鼠标经过效果,可以按照以下步骤进行操作:

  1. 创建一个无序列表ul,并添加需要展示的内容,例如:
<ul>
  <li>菜单1</li>
  <li>菜单2</li>
  <li>菜单3</li>
</ul>
  1. 使用CSS对ulli进行样式修改,例如:
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 {...}:当鼠标移动到菜单项上时,添加伪元素beforeafter,制作出多重边框的效果

接下来,我们提供两个实例,以帮助更好地理解这个过程:

  1. 两个仅使用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;
}
  1. 使用伪元素创建了多重边框效果和背景色变化
<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代码,但思路都是相同的,因此我们可以从中学到如何使用ulli标签来创建菜单,同时使用CSS来实现边框重叠和鼠标移动效果。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:用ul li实现边框重合并附带鼠标经过效果 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • IE6、IE7、IE8浏览器下的CSS、JS兼容性对比

    IE6/IE7/IE8浏览器下的CSS兼容性问题 在现代的浏览器中,我们可以使用最新的CSS属性来创建漂亮的网页,但是在IE6/IE7/IE8等老旧的浏览器中,我们需要注意一些CSS兼容性问题。 盒模型 在标准盒模型(box-sizing: content-box)中,元素的width和height只包括内容的宽和高,但在IE6/IE7/IE8等旧版浏览器中…

    css 2023年6月10日
    00
  • CSS透明属性详解代码

    针对”CSS透明属性详解代码”这个话题,我会提供一份完整的攻略,包含以下几个部分: 什么是CSS透明属性 CSS透明属性的取值范围 如何在CSS中使用透明属性 CSS透明属性的应用场景 示例说明 总结 1. 什么是CSS透明属性 CSS透明属性是指可以让元素透明或者半透明的CSS属性。通过设置元素的透明属性,我们可以使页面元素变得更加灵活,达到更好的视觉效果…

    css 2023年6月9日
    00
  • 如何减少网页的内存与CPU占用

    减少网页的内存与CPU占用是很重要的,因为它可以提高用户的浏览体验,避免网页加载缓慢、卡顿甚至崩溃等问题。以下是几个实用的方法: 1. 压缩图片和使用CSS Sprites 在网页中使用大量图片会导致页面变得很重,从而增加内存和CPU占用。为了减少网页的加载时间和内存占用,可以使用以下两个方法: 压缩图片:使用图片压缩工具(如TinyPNG)将图片压缩至较小…

    css 2023年6月11日
    00
  • CSS中@用法小结(示例详解)

    以下是“CSS中@用法小结(示例详解)”的完整攻略: CSS中@用法小结 在 CSS 中,@ 符号用于定义一些特殊的规则和语法。以下是一些常用的 @ 规则。 @import 规则 @import 规则用于导入外部样式表,以下是一个示例: @import url("styles.css"); @media 规则 @media 规则用于定义媒…

    css 2023年5月18日
    00
  • CSS 定位之 z-index 问题分析

    下面是“CSS 定位之 z-index 问题分析”的完整攻略。 一、z-index 是什么 z-index 是 CSS 中用来设置元素在 z 轴上的层级关系的属性。它可以控制元素的垂直堆叠顺序,使一些元素覆盖其他元素。 二、z-index 的取值 z-index 属性可以接收以下值: 数字:取值范围为整数、负整数。数字越大,表示越靠近用户,也就是越显示在上层…

    css 2023年6月10日
    00
  • src与href属性的区别

    下面我会详细讲解“src与href属性的区别”。 一、src属性与href属性的定义 1. src属性 src 是 source 的缩写,表示引入外部资源对应的 source(源)地址。通常用于在 HTML 中引入图片、视频等媒体资源、以及 JavaScript 文件等。将资源引入到 HTML 中后,浏览器会根据 src 属性所指定的地址发送 HTTP 请求…

    css 2023年6月9日
    00
  • JS网页repaint与reflow 的区别及优化方式

    JS网页repaint与reflow 的区别及优化方式 repaint和reflow的概念 当DOM树中的元素发生改变时,浏览器需要重新计算元素的位置和大小,这个过程称为reflow;当元素的外观改变,但不影响布局时,浏览器只需要重新绘制元素,这个过程称为repaint。 repaint和reflow的区别 reflow是一项非常昂贵的操作,因为浏览器需要重…

    css 2023年6月10日
    00
  • CodeMirror js代码加亮使用总结

    CodeMirror js代码加亮使用总结 CodeMirror是一款非常优秀的js代码编辑器,它支持语法高亮、自动补全、括号匹配、多种主题、多语言支持等功能,是非常适合在Web开发中使用的代码编辑器。 安装 CodeMirror的安装非常容易,你可以在CodeMirror官网下载它的各个版本,也可以使用npm进行安装。 npm install codemi…

    css 2023年6月9日
    00
合作推广
合作推广
分享本页
返回顶部