<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
li {
float: left;
width: 300px;
height: 400px;
border: 2px solid #ccc;
list-style: none;
/* 利用margin负值,右边li的边框压住左边li的边框,将相邻边框细化*/
margin-left: -2px;
margin-top: -2px;
}
li:hover {
/* 鼠标经过li,li的边框变为红色,1.可以设置其为相对定位 2.如果li本身有相对定位,则设置z-index:1 */
/* z-index: 1;*/
border: 2px solid red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
margin负值的巧妙运用
最新推荐文章于 2024-05-10 14:25:41 发布