CSS 使用技巧

作者 :
免费
  • 正文
  • 下面我和大家说说CSS在实践中的写法,注意的地方,我会在做标记,这样帮住大家读懂。

    1. 文字的水平居中

    将一段文字置于容器的水平中点,只要设置text-align属性即可:

    text-align:center; //文字的居中

    2. 容器的水平居中

    先为该容器设置一个明确宽度,然后将margin的水平值设为auto即可。

    div#container {

    width:760px;

    margin:0 auto; //auto代表,左右两站对齐

    }

    3. 文字的垂直居中

    单行文字的垂直居中,只要将行高与容器高设为相等即可。

    比如,容器中有一行数字。

    1234567890123

    然后CSS这样写:

    div#container {height: 35px; line-height: 35px;}

    如果有n行文字,那么将行高设为容器高度的n分之一即可。

    4. 容器的垂直居中

    比如,有一大一小两个容器,请问如何将小容器垂直居中?

    首先,将大容器的定位为relative。

    div#big{

    position:relative; //relative 相对定位

    height:480px;

    }

    然后,将小容器定位为absolute,再将它的左上角沿y轴下移50%,最后将它margin-top上移本身高度的50%即可。

    div#small {

    position: absolute;

    top: 50%;

    height: 240px;

    margin-top: -120px;

    }

    使用同样的思路,也可以做出水平居中的效果。

    5. 图片宽度的自适应

    如何使得较大的图片,能够自动适应小容器的宽度?CSS可以这样写:

    img {max-width: 100%}

    但是IE6不支持max-width,所以遇到IE6时,使用IE条件注释,将语句改写为:

    img {width: 100%}

    6. 3D按钮

    要使按钮具有3D效果,只要将它的左上部边框设为浅色,右下部边框设为深色即可。

    div#button {

    background: #888;

    border: 1px solid;

    border-color: #999 #777 #777 #999;

    }

    7. font属性的快捷写法

    font快捷写法的格式为:

    body {

    font: font-style font-variant font-weight font-size line-height font-family;

    }

    所以,

    body {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 13px;

    font-weight: normal;

    font-variant: small-caps;

    font-style: italic;

    line-height: 150%;

    }

    可以被写成:

    body {

    font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;

    }

    8. link状态的设置顺序

    link的四种状态,需要按照下面的前后顺序进行设置:

    a:link

    a:visited //当鼠标访问时

    a:hover //当鼠标经过时

    a:active

    9. IE条件注释

    你可以利用条件注释,设置只对IE产生作用的语句:

    < ![endif]-->

    还可以区分各种不同的IE版本:

    END
    如本资源侵犯了您的权益,请联系投诉邮箱admin@wmphp.com进行举报!我们将在收到邮件的1个小时内处理完毕。 本站仅为平台,发布的资源均为用户投稿或转载!所有资源仅供参考学习使用,请在下载后的24小时内删除,禁止商用! Wmphp.com(完美源码)助力正版,如您有自己的原创产品,可以联系客服投稿,代理出售! Wmphp.com(完美源码)客服QQ:136882447 Wmphp.com(完美源码)商务电话(仅对企业客户/个人用户):15120086569 (微信同步) 请注意:本站不提供任何免费的技术咨询服务,为了节约时间,下载前 请确认自己会技术
    完美源码 » CSS 使用技巧
    2501+

    本站勉强运行

    315+

    用户总数

    520+

    资源总数

    0+

    今日更新

    2021-8-5

    最后更新时间