写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;}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步