网页前端
关于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)，这都是基本布局，定位在运用中尤为重要，希望网页初学者重视，本章主要讲述一个小细节，其他内容为基本内容。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021/03/02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
