已经第三天了,今儿就来翻一翻CSS五花八的“little tips”吧~
忍不住想啰嗦一句题外话,昨天看了灰姑娘电影,还不错,结局很圆满大坏蛋都被赶走了,充满正能量~灰姑娘的蓝色裙摆不能更美~
第一,采用流式布局可以让你的页面有更强大的适应性:我比较喜欢的方法是,在整体布局的时候采用流式布局,也就是百分比布局,然而在细节制作的时候,采用固定的像素。这样既可以保证页面对不同显示屏的设备都有较好的兼容性,又可以保证细节部分相对固定——保证当页面分辨率(或屏幕宽度)变化的时候,细节部分的布局不至于乱了套。
既然说到了流式布局,那就不得不提一下媒体查询了。如下便是媒体查询的示例代码:
@media(min-width:1000px){
#firstDiv{background-color: #3A90BA;}
}
使用媒体查询可以让我们的页面根据用户的屏幕分辨率调整布局,这样不管你是在大分辨率的大屏上,还是在小分辨率的爪机上,我们的页面都是美美精致~哒哒~
第二,介绍几个居中的技巧:作为一名强迫症资深患者,不知道居中怎么办还能不能愉快的玩耍了?
垂直居中的方法是设置line-height,把该属性设置的和height的大小一样就可以了~或者设置vertical-align: middle;也是可以的~水平居中的方式是设置text-align为center~水平居中的方式还有->>position:relative;left:50%;不过这个要注意的是,left的值其实应该设置成比50%略小一些~
第三,关于折行:white-space: nowrap;这样可以不折行喔~另外还有,调整字符间隙:letter-spacing: 10px;和word-spacing: 20px;~
其实css这种小技巧实在太多~下面一篇我会附上一段源代码,供需要的人参考~
OK~今天就到这里咯~作为一只兔子要去蹦跶一会儿了~