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样式入门书目录

    css样式-字体属性 css样式-背景属性 css样式-边框属性 css样式-列表属性 css样式-定位属性 cs...

  • [jQuery]设置css样式

    获取css样式 设置单个css样式 设置多个css样式

  • CSS基础(二)

    1 - CSS样式的引入 CSS样式的引入可以采用三种方式: 内联式css样式 嵌入式CSS样式 外部式CSS样式...

  • 切图需要的准备

    样式 重置样式(reset.css) 公共样式(commo.css) 独立样式(例如首页:index.css) 重...

  • jQuery学习:css操作/属性操作

    css操作 修改单个样式.css(name,value) 修改多个样式.css(obj) 获取样式.css(nam...

  • CSS初级

    css样式表 css选择器(简单,复杂) css属性 css布局 CSS样式表(内联方式,内部样式表,外部样式表)...

  • CSS学习之CSS基础

    标签: 前端 css 样式 CSS样式 css全称为"层叠样式表(cascading style sheets)...

  • 章节七、CSS样式基本知识

    内联式CSS样式嵌入式CSS样式外部式CSS样式(外联式) 外部式css样式(也可称为外联式)就是把css代码写一...

  • DIV+CSS网页布局常用基础

    文件命名规范全局样式:global.css框架样式:layout.css字体样式:font.css链接样式:lin...

  • H5:入门笔记二

    CSS(Cascading Style Sheets)美化样式 CSS通常称为CSS样式表或层叠样式表(级联样式表...

网友评论

      本文标题:css样式

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