常用CSS备忘

1 怎样让div中的img居中

水平居中:div设置:text-align:center;
img设置:width:图片宽度; margin:0 auto;

垂直居中:div设置:position:relative;
img设置:position:absolute; top:50%; height:图片高度; margin-top:图片高度的一半;

2 display显示块圆角特效

border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius: 2px;-o-border-radius: 2px;

3 div没有高度

子元素 div2 本身具有高度和宽度,但由于其具有float:left;属性后。其父元素 div1 不具有高度,解决方法:
1) 直接给 div1 设置固定高度来解决
2) 给父元素 div1 设置 overflow:hidden 属性

4 css改变光标的位置

<input style="padding-left:0 8px;"/>

5 css实现如下效果:

<div style='background-color:#0A9EE5;width:100%;height:52px;position:fixed;z-index:99'>
    <div style='padding:10px;height:32px;line-height:32px;'>
    <div style='float:left;width:10%;'>
        <div style='text-align:center'><img style='margin:auto' src='../img/Back-32.png'></div>
    </div>
    <div style='float:left;padding-left:1%;width:79%;'>
        <input id='assSearchId0000' type='text' style='width:92%;height:28px;border:0px;padding:0 8px;' placeholder='关键字..'>
    </div>
    <div style='float:left;width:10%;'>
        <div style='text-align:center'><img style='margin:auto' src='../img/Search-32.png'></div>
    </div>
    </div>
</div> 

 6 css实现以下简单布局:要求title左右居中

<div style="position:absolute;left:0px;right:0px;text-align:center;">XXX</div>
<div style="position:absolute;right:0px;">XXX</div>

 7 去除button,input点击后出现的蓝色(或红色等等)覆盖层或边框

{outline:none;}

 

posted @ 2015-09-02 08:48  Jager  阅读(309)  评论(0编辑  收藏  举报