人生不能太过圆满,求而不得也未必是遗憾。
margin负值巧妙应用
现在每个盒子中间的边框宽度是2px
添加属性:margin-left:-1px
鼠标滑过的时候显示红色的边框:
右边的被覆盖了
解决方法1:如果li都有定位,z-index:1提高层级
方法2:使用相对定位,占有原来的位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>王子CSS学习</title>
<style>
ul li{
position: relative;
margin: 0 auto;
width: 100px;
height: 50px;
background-color: pink;
border: 10px solid blue;
list-style: none;
float: left;
margin-left: -10px;
}
ul li:hover{
border: 10px solid red;
z-index: 1;
}
</style>
</head>
<body>
<div class="ddd">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
文字围绕浮动元素布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>王子CSS学习</title>
<style>
.ddd{
width: 400px;
height: 74px;
border: 2px solid blue;
margin: 0 auto;
}
清除内外边距
*{
margin: 0;
padding: 0;
}
.aaa{
float: left;
width: 200px;
height: 74px;
}
.aaa img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="ddd">
<div class="aaa">
<img src="2021.jfif" alt="">
</div>
<p>现在的我根本无心工作,一心只想为祖国庆生,放不放假无所谓,主要是爱国</p>
</div>
</body>
</html>
清除内外边距之后:
利用行内块元素妙用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>王子CSS学习</title>
<style>
.ddd{
text-align: center;
width: 400px;
height: 74px;
margin: 0 auto;
}
.ddd a{
display: inline-block;
width: 36px;
height: 36px;
border: 1px solid #ccc;
background-color: #f7f7f7;
line-height: 36px;
text-decoration: none;
text-align: center;
}
.ddd .pre,.ddd .next{
width: 85px;
font-size: 14px;
}
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="ddd">
<a href="#" class="pre"><<上一页</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#" class="next">>>下一页</a>
</div>
</body>
</html>