网页前端

关于html CSS中的一个小细节

在网页中我们经常会看到这样一种样式很是新奇。
以淘宝网为例：

这里原先盒子(div)边框是无色，鼠标在上面滑动一下下就变成橙色，这是一种很好看的网页布局，对于很多人来说这种样式我们很容易想到用伪类来做:hover 的确大家的思路很正确，本来我以为非常简单，但是在上手制作的时候发现一些小bug，与大家分享一下。

这是我原先的代码

  <style>
        li {
            list-style: none;
        }
        
        ul li {
            float: left;
            width: 100px;
            height: 100px;
            margin-left: -1px;
            border: 1px solid red;
        }
        
        ul li:hover {
            position: relative;
            border: 1px soild green;
        }
    </style>

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

最后发现它不变色，让我百思不得其解，我们通过chrome来看看到底是什么原因。

我们发现出现问题，这个hover被划去了，说明出现了问题，说明格式并不应该这样写，笔者进行了改进，直接给边框颜色赋值来改变这种错误，最终成功了，虽然改变很简单，但是想了好久。。。。

<style>
        li {
            list-style: none;
        }
        
        ul li {
            position: relative;
            float: left;
            width: 100px;
            height: 100px;
            border: 1px solid red;
            margin-left: -1px;
        }
        
        ul li:hover {
            z-index: 1;
            border-color: green;
        }
    </style>

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

这是成功后的效果

一种不能重复的代码就会造成如此大的差别，所以细节是事件中产生的我们多实践。

本代码中还运用了很多的知识点，比如定位（position）浮动（float)，这都是基本布局，定位在运用中尤为重要，希望网页初学者重视，本章主要讲述一个小细节，其他内容为基本内容。