CSS常用技巧（保持更新）

前端布局技巧总结

最新推荐文章于 2025-05-26 19:32:20 发布

原创最新推荐文章于 2025-05-26 19:32:20 发布 · 205 阅读

0 ·

CC 4.0 BY-SA版权

本文分享了一些前端布局的小技巧，包括让列表项水平排列、设置间距、实现层叠效果及定位等，还介绍了如何解决浮动导致的问题。

总是忘记一些常用的前端技巧，有这个帖子记录一下吧：

1.让ul 中的li 横布局排列，并且没有浮点：ul li{ folat:left; list-style:none}

2.li标签之间的间距：margin-right:5px;

3.z-index:主要用于上下层叠，比如想让一个div覆盖在另一个div上就将上面那个设置成z-index:2。此元素做成蒙板的特效常与opacity: 属性联用，将底下那一层div制作成透明的效果。

4.top：和left：需与绝对定位position：absolute联用。根据调整top和left的值来调整div的位置。详情可参照以下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">	
	<title>CSS布局</title>
	<style type="text/css">
		*{
			margin: 0;
			padding:0;
		}
		.layer{
		    position:absolute;
		    width:100%;
		    height:500px;
		}
		
		.layer img{
			width: 380px;
			height: 240px;
			opacity: 0.9;
			width:100%;
		    height:300px;
		}
		.layertop{
		    position:absolute; 
		    z-index:2;
		    background:crimson;
		    top:140px;
		    left:350px;
		}
		
	</style>
</head>
<body>
<nav>
</nav>
	<div class="layer">
		<img src="http://climg.mukewang.com/58f829ca00010be703840240.jpg">
	</div>
	<div class="layertop">
	    文字的效果
	</div>    
</body>
</html>

5.让三个默认竖排显示的div变成横排三个排列：给三个div设置左浮动，并且给宽度。

6.如果上面一个div使用了浮动效果会导致下面一个div的padding top失效，为了清除float带来的负面效果，可以使用一个空div

<div class=clear></div> 并且给他设置一个.clear{clear:both}的样式。