作为前端成员页面布局必不可少,布局的重要性也不言而喻,正常的网页布局大家都会,其实在布局中有很多小技巧,学会这些小技巧,别人一看到你的代码就知道这是一个专业的前端程序员,增加好感,那么,在布局中都有哪些小技巧呢?接下来小编就给大家分享一些常用的布局中的小技巧,比如:布局中巧妙利用margin负值,布局中如何做出梯形,在布局中如何巧妙的利用vertical-align,以及浮动与定位的巧妙结合.
1.首先给大家分享布局中巧妙利用margin负值以及结合浮动与定位做出这样的效果,效果就是一盒中有几个子盒子,并排排列,每个盒子都有1px的表框,当鼠标经过的时候,边框改变颜色,因为每个盒子都需要有边框,那么2个盒子紧挨着,一个盒子的右边框和另一个盒子的左边框折叠就出加粗成为2px,这肯定不是我们想要的结果,这个时候我们就可以巧妙利用margin负值,消除表框的重叠;如果用margin负值消除了表框的重叠,但是当鼠标经过盒子的时候,总有一条边被遮挡而无法改变颜色,这个时候我们就可以巧妙利用相对定位,代码如下:
- 1
- 2
- 3
- 4
- 5
css代码如下:利用margin负值和相对定位的盒子会压住浮动的盒子和标准的盒子 .box { width: 1180px; height: 374px; margin: 200px auto; } .box > li { float: left; margin-left: -1px; list-style:none; width: 234px; height: 100%; border: 1px solid #ccc; } .box > li:hover { position: relative; border-color: red; }
2.在给大家分享一下利用化三角和浮动,和定位来做一个梯形的形状,代码如下
.shape { position: relative; top: 0; left: 50%; transform: translate(0, -50%); width: 160px; height: 30px; line-height: 30px; text-align: center; background-color: pink; } .left, .right { float: left; height: 100%; } .left { width: 90px; background-color: red; } .right { width: 70px; background-color: skyblue; } .triangle { position: absolute; top: 0; left: 75px; width: 0; height: 0; border-top: 30px solid transparent; border-right: 15px solid skyblue; } 3.最后给大家分享一个文字围绕浮动元素的布局技巧,代码如下
丽水松阳即将开启一场“森林健康”盛会，约会,欢迎各地朋友前来参观。
