zoukankan      html  css  js  c++  java
  • 写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; 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-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;}

  • 相关阅读:
    数组定义和使用
    跳转语句—break,continue,goto
    案例 天线抬不起头来
    int是几位;short是几位;long是几位 负数怎么表示
    Python3的类注意事项
    用usb线配置直流电机驱动器不能配置成功
    案例 电源灯亮,但是就是不闪灯,而且也下载不了程序
    关于ai算法的一个点子
    进程 并发 线程 032
    ftp功能深度剖析 + 线程 031
  • 原文地址:https://www.cnblogs.com/Cloudloong/p/9562968.html
Copyright © 2011-2022 走看看