Heim > Artikel > Web-Frontend > Detaillierte Einführung in die Zusammenfassung gängiger CSS-Effekte
CSS hat viele häufig verwendete Effekte. Sie sehen sie vielleicht, wenn Sie auf der Website surfen, aber wenn Sie sie wirklich selbst schreiben möchten, vergesse ich sie manchmal plötzlich.
Der Code lautet wie folgt:
html { filter: grayscale(100%);//IE浏览器 -webkit-filter: grayscale(100%);//谷歌浏览器 -moz-filter: grayscale(100%);//火狐 -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);//谷歌浏览器}
Es gibt einige Websites, auf denen die Farbe der FLASH-Animation nicht durch CSS-Filter gesteuert werden kann. Sie kann zwischen den FLASH-Codes eingefügt werden:
<param value="false" name="menu"/><param value="opaque" name="wmode"/>
Fügen Sie einfach das Attribut contentEditable="true" wie folgt zu p hinzu:
<p id="p1" contentEditable="true" ></p> <p id="p2" contentEditable="true" ></p> <p contentEditable="true" id="p3"></p>
unselectable="on" onselectstart="return false;"
Spezifischer Code:
sdfsdfswerwer324234234234
Auf diese Weise können die Dinge in p nicht kopiert werden!
做form表单的时候,前面经常有姓名,年龄,公司名称等等,有的是2个字,有的是4个字,如何让字对齐呢?有的人的做法是打几个空格,但是这样不是很准确,最好的办法是如下:
css代码:
.test1 { text-align:justify; text-justify:distribute-all-lines;/*ie6-8*/ text-align-last:justify;/* ie9*/ -moz-text-align-last:justify;/*ff*/ -webkit-text-align-last:justify;/*chrome 20+*/ } @media screen and (-webkit-min-device-pixel-ratio:0){/* chrome*/ .test1:after{ content:"."; display: inline-block; width:100%; overflow:hidden; height:0; } }
html代码:
<p class="box1"> <p class="test1">姓 名</p> <p class="test1">姓 名 姓 名</p> <p class="test1">姓 名 名</p> <p class="test1">所 在 地</p> <p class="test1">工 作 单 位</p> </p>
如下图红色框框中的按钮
代码如下:
<input type="text" class="box" name="s" id="s" class="inputText" placeholder="输入关键词" x-webkit-speech>
添加 x-webkit-speech 属性就可以了。
设置方法如下:
::-webkit-input-placeholder { /* WebKit browsers */ color: #999;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999;}::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999;}:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999;}
after选择器通常在clear中使用,用法如下:
.clearfix:after{display:block;visibility:hidden;clear:both;height:0;content:'.';font-size:0}
写了这个clearfix,可以让外层p包裹整个内层,符合谷歌闭合机制。
也可以在某个元素前面或者后面追加,例如:
p:after{ content:"haorooms:-";background-color:yellow;color:red;font-weight:bold;}
每个p标签后面都加了一个 -haorooms
opacity: .9; filter:alpha(opacity=90)
IE7和IE6中opacity是没有用的,在IE6中p透明的方法一般用filter;
.haorooms{opacity: 0; cursor:pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}
一般要指定宽度,然后给如下四个属性。
display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
案例代码:
.haorooms{width:200px;display:bolck;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);box-shadow: 0 1px 1px rgba(0,0,0,.2);
自动换行
p{ word-wrap: break-word; word-break: normal; }
强制英文单词断行
p{word-break:break-all;}
强制不换行
p{white-space:nowrap;}
IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4,都支持上述的border-radius属性。早期版本的Safari和Chrome,支持-webkit-border-radius属性,早期版本的Firefox支持-moz-border-radius属性。 目前来看,为了保证兼容性,只需同时设置-moz-border-radius和border-radius即可。
-moz-border-radius: 15px;border-radius: 15px;
(注意:border-radius必须放在最后声明,否则可能会失效。)
另外,早期版本Firefox的单个圆角的语句,与标准语法略有不同。
-moz-border-radius-topleft(标准语法:border-top-left-radius)-moz-border-radius-topright(标准语法:border-top-right-radius)-moz-border-radius-bottomleft(标准语法:border-bottom-left-radius)-moz-border-radius-bottomright(标准语法:border-bottom-right-radius)
#haorooms ul { //父亲 display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; } #haorooms ul li{ //儿子设置 -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; float:none;}
关于css3弹性盒子模型之box-flex,我在博客中暂时没有写相关文章,因为这个属性不支持IE,所以我很少用到。
我一般用别的方法来代替这个属性。想达到弹性盒子的要求,jquery mobile 有一套网格布局法,很不错,支持IE的,有时间可以参考一下,或者研究一下他们是怎么写的,参照他们的方法可以自己改写一下!
关于弹性盒子式的布局,大家也可以看下bootstrap,bootstrap提出栅格类的一个说法,你引进他的css之后,可以用col-mid-*来进行布局。例如:
<p class="row"> <p class="col-md-6">.col-md-6</p> <p class="col-md-6">.col-md-6</p></p>
各站一半!
<p class="row"> <p class="col-md-8">.col-md-8</p> <p class="col-md-4">.col-md-4</p></p>
前面的是整个宽度的三分之二,后面是整个宽度的三分之一!
具体可以看看bootstrap的样式解释:http://v3.bootcss.com/css/
resize: none; //禁止拖动
以下是resize属性的的各个取值:
none:用户不能操纵机制调节元素的尺寸;both:用户可以调节元素的宽度和高度;horizontal:用户可以调节元素的宽度;vertical:让用户可以调节元素的高度;inherit:默认继承。
p垂直居中的方法,请参考php中文网视频教程!
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Zusammenfassung gängiger CSS-Effekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!