用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日

相关文章

  • 使用一张或两张图片创建大背景网站

    使用一张或两张图片创建大背景网站是一种常见的网站设计方式,可以为网站增添独特魅力。下面是创建大背景网站的完整攻略: 步骤一:设计网站背景图 选择一张或两张高清图片作为网站的背景图。注重图片质量和主题与网站内容的契合度。例如,假设你正在设计一家咖啡馆的网站,你可以选择一张展示咖啡制作过程的照片或者一张拍摄咖啡师的高清图片。确保图片不会影响文本内容的可读性,最好…

    css 2023年6月9日
    00
  • 利用CSS3 动画 绘画 圆形动态时钟

    关于“利用CSS3动画绘画圆形动态时钟”这个主题,我可以提供以下完整攻略: 1. 初步准备 在编写CSS3动画之前,请确保已经了解了以下基础知识: HTML基础知识 基础CSS的基础知识和语法 CSS3的动画和变换知识 在你开始编写CSS3动画之前,请先创建一个新的HTML文件,然后添加必要的HTML标记(例如文件头信息、HTML标签和空等待填充的容器等)。…

    css 2023年6月10日
    00
  • 利用CSS3的定位页面元素

    利用 CSS3 定位页面元素基本包含以下几个主题,我逐一讲解并提供两个示例。 1. 了解 CSS3 定位的基本概念 CSS3 定位是指利用 CSS3 的技术,对页面元素进行定位,让它们呈现出预期的位置、大小和形态。CSS3 定位技术主要有以下几种: 相对定位:元素相对于其本身的位置进行定位。 绝对定位:元素相对于其最近的非静态定位祖先元素进行定位。 固定定位…

    css 2023年6月9日
    00
  • 表格里使用text-overflow后不能隐藏超出的文本的解决方法

    表格中使用 text-overflow 属性可以限制表格单元格中文本的显示。当单元格中文本过多时,可以使用 text-overflow: ellipsis 属性让文本在末尾显示省略号,从而提供更好的用户体验。 然而,某些情况下,text-overflow 属性可能无法成功隐藏超出的文本。这种情况通常出现在单元格中存在其他属性(如 white-space)时,…

    css 2023年6月10日
    00
  • css样式层叠规则详解

    当多个 CSS 规则同时作用于同一个 HTML 元素时,就会涉及到 CSS 样式的层叠。而当出现了冲突时,就需要根据层叠规则来确定哪个样式会被最终应用到元素上。以下是 CSS 样式层叠规则的详解。 1. 权重 Specificity 当一个元素被多个 CSS 规则选择到时,就需要根据 Specificity 权重来决定哪一条样式会被优先应用。CSS 的 Sp…

    css 2023年6月10日
    00
  • 12个CSS高级技巧汇总

    12个CSS高级技巧汇总 1. 使用object-fit调整图片大小 object-fit是一个CSS属性,它可以帮助我们调整图片的大小并适应父元素的大小。比如,我们可以将一个宽高比与父元素不同的图片,通过object-fit: cover属性来实现填充整个父元素,并裁剪掉多余部分。 img { width: 100%; height: 200px; obj…

    css 2023年6月9日
    00
  • javascript实现自定义滚动条效果

    我来为你详细讲解下“JavaScript实现自定义滚动条效果”的完整攻略。 1. 利用CSS实现自定义滚动条 CSS提供了一些用于自定义滚动条样式的属性,包括: scrollbar-width: 指定滚动条的宽度。 scrollbar-color: 指定滚动条的颜色,包括前景和背景颜色。 以下是一个例子: /* 设置滚动条宽度和背景颜色 */ ::-webk…

    css 2023年6月10日
    00
  • 绝对定位的元素在ie6下不显示隐藏了的有效解决方法

    确保绝对定位元素所在的父元素拥有相对定位 在IE6浏览器中,如果想让绝对定位的元素能够正确显示,则需要保证该元素所在的父级元素拥有相对定位。因此,我们需要给该父元素添加position:relative属性,这样就可以让绝对定位的子元素相对于其父元素来定位。 .parent { position: relative; } .child { position:…

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