写css之前先清除页面样式、@media screen、@font-face、修改input框内提示文字默认颜色、css写实体三角形...

//开始写css之前先清除页面样式

*{margin: 0px;padding: 0px;}

//@media screen判断屏幕宽高适应不同分辨率

@media screen and (max-height:900px){
　　xxx{top:70.6%;}
}

//@font-face引入文字

{
　　font-family: STCAIYUN;
　　src: url(../css/font/STCAIYUN.TTF);
}

//修改input框内提示文字默认颜色（placeholder字体颜色）

<input type="text" placeholder="我爱北京" value=" ">

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f00;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f00;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #f00;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #f00;
}

//css写实体三角形（下面例子箭头方向为向左）

<div class="arrow">
　　<em></em><span></span>
</div>

.-arrow{ position:absolute; width:40px; height:40px; bottom:14px; left:-41px; transform:rotate(87deg);
　　-ms-transform:rotate(87deg); /* IE 9 */
　　-moz-transform:rotate(87deg); /* Firefox */
　　-webkit-transform:rotate(87deg); /* Safari 和 Chrome */
　　-o-transform:rotate(87deg); /* Opera */}
.arrow *{ display:block; border-width:14px; position:absolute; border-style:solid dashed dashed dashed; font-size:0; line-height:0; }
.arrow em{border-color:#bfb702 transparent transparent;}
.arrow span{border-color:#fffc00 transparent transparent; top:-3px;}

转载于:https://www.cnblogs.com/Cloudloong/p/9562968.html