css样式

作者: 娜美君 | 来源:发表于2021-04-01 14:13 被阅读0次

    背景透明:

    1、{background:rgba(52, 53, 55, 0.6) none repeat scroll 0 0 !important;/*实现FF背景透明,文字不透明*/ filter:Alpha(opacity=60);background:#fff}; 

    2、{ filter: alpha(opacity=60); opacity: 0.6; };

    3、图片做成png-8,各个浏览器支持。

    input透明:filter:alpha(opacity=0);     -moz-opacity:0;    -khtml-opacity: 0;     opacity: 0;

    固定的背景,随着内容的增多高度增加:

     {min-height:900px;height:auto!important;height:900px;};

    固定高度,出现滚动条 : 

    第一层div,固定高度,第二层 div{height:100%;overflow:auto;}

    固定宽度,内容自动换行(包括符号,字母自动换行):

    {width:100px; word-wrap: break-word; overflow: hidden;}

    鼠标变光标:

    .mouseright{cursor:url("images/asdfasdfasdf.cur"), pointer;}(注:css样式要写在内部。mouseright与div的类名是同级别的: class="gdc_center mouseright"。)

    不设置div元素宽度的情况下,使div居中:

    外层元素{text-align:center;}    内层元素{display:inline-block;text-align:left;*display:inline;*zoom:1;}

    设置图片居中对齐:

    外层元素{display:table-cell;vertical-align:middle;text-align:center;*display: block;*font-size:70px;*font-family:Arial;width:15%;height:50px;}       内层元素(img元素){vertical-align:middle;border:0;}

    标签之间有浮动加<br />修改样式

    display:inline-block;不加float:left;

    pre标签 换行:

     pre{width:530px;white-space:pre-wrap;/* css3.0 */white-space:-moz-pre-wrap;/* Firefox */white-space:-pre-wrap;/* Opera 4-6 */white-space:-o-pre-wrap; /* Opera 7 */word-wrap:break-word;/* Internet Explorer 5.5+ */}

    不固定高度,让div垂直居中页面:

    最父级div{ width: 100%; height: 100%; background: #fff; display: table; *position: relative; }

    次父级div{ display: table-cell; vertical-align: middle; *position: absolute; *top: 50%; }

    div{ width: 400px; margin: 0 auto; *position: relative; *top: -50%; }

    苹果手机自带样式清除:

    -webkit-appearance: none;

    css3: animation-name: fadeIn; /*动画名称*/

    animation-duration: 1.5s; /*动画持续时间*/

    animation-iteration-count: 1; /*动画次数*/

    animation-delay: 0.5s; /*延迟时间*/

    animation-fill-mode: backwards;

    相关文章

      网友评论

          本文标题:css样式

          本文链接:https://www.haomeiwen.com/subject/gqetkltx.html