margin负值的巧妙运用（HTML、CSS）

一时失言乱红尘 2023-10-03 13:16 11阅读 0赞

### margin负值的巧妙运用（HTML、CSS） ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>margin负值的巧妙运用</title>
        <style>
            ul li {
                position: relative;
                float: left;
                list-style: none;
                width: 150px;
                height: 200px;
                border: 1px solid red;
                margin-left: -1px;
            }
    
            ul li:hover {
                /* 2.如果li都有定位，则利用z-index提高层级 */
                z-index: 1;
                border: 1px solid green;
            }
    
            ul li:hover {
                /* 1.如果盒子没有定位，则鼠标经过添加相对定位即可 */
                position: relative;
                /*  压住前一个盒子，使hover功能完全显示 */
                border: 1px solid green;
    
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java编程陷阱：循环结构的巧妙运用

在Java编程中，循环结构是一种非常重要的控制流程工具。以下是一些循环结构的巧妙运用： 1. **for循环**： - **遍历数组或集合**：`for(int i :

今天药忘吃喽~/ 2024年12月09日 20:03/ 0 赞/ 2 阅读

相关 Python魔法：函数的定义与巧妙运用

在Python中，`def` 语句用于定义函数。函数是一段可重复使用的代码块，可以接受输入参数并返回一个结果。在本文中，我们将详细介绍如何编写 `def` 语句，包括其语法、用

秒速五厘米/ 2024年03月08日 08:53/ 0 赞/ 93 阅读

相关行内块的巧妙运用（HTML、CSS）

行内块的巧妙运用（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head> <

Love The Way You Lie/ 2023年10月03日 13:34/ 0 赞/ 14 阅读

相关 margin负值的巧妙运用（HTML、CSS）

margin负值的巧妙运用（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

一时失言乱红尘/ 2023年10月03日 13:16/ 0 赞/ 12 阅读

相关 CSS三角强化的巧妙运用（HTML、CSS）

CSS三角强化的巧妙运用（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

╰半橙微兮°/ 2023年10月03日 13:16/ 0 赞/ 17 阅读

相关 HTML标签的margin设为负值会怎么样

margin:百分比，是相对于父元素的宽度假设给元素设置 `margin:-40px` 测试HTML <main> <div cl

港控/mmm°/ 2022年12月11日 09:11/ 0 赞/ 179 阅读

相关【CSS】margin 为负值会发生什么你想不到的事？

1. 前言 margin 在 css 布局中用于外边距的调整，那如果设置成负值后，四个方向上又有什么不同的情况发生？结论在文末，你也可以直接移动到文末查看，但希望你能

秒速五厘米/ 2022年10月13日 02:58/ 0 赞/ 135 阅读

相关 margin 负值之美

公告 [CSS布局奇淫巧计之-强大的负边距][CSS_-] css中的负边距(negative margin)是布局中的一个常用技巧，只要运用得合理常常会有意想不到

短命女/ 2022年09月23日 11:56/ 0 赞/ 29 阅读

相关 Angular的run方法巧妙运用

1.浏览器判断在angular做微信应用的时候，有时候我们也想把相同一份代码运行在非微信的浏览器上，这时候我们可以在angular的run上写点东西实现~ 例如as

た入场券/ 2022年08月21日 01:25/ 0 赞/ 155 阅读

相关 margin的负值

margin的负值前不久看到了久闻大名的双飞燕布局，其中用到的主要技巧就是margin的负值。margin的负值大致有以下几种效果。 1. 用在普通文档流中在

「爱情、让人受尽委屈。」/ 2022年06月11日 23:11/ 0 赞/ 195 阅读