zoukankan      html  css  js  c++  java
  • 前端样式修改心得

    今天对公司项目登录页进行了修改。

    项目登录页构成:头部和底部为公共模板页,中间部分为登录页自身所有。

    鉴于此,中间部分因不用担心改动影响到其它页面,故最好改,不必细谈。对于头部和底部,首先借助浏览器调试工具找到关键元素及其选择器,再在浏览器上进行修改与测试(对于div层数较复杂的,只能靠猜)。若所要修改的元素属性已存在,且所需的值与其他页不同,则在当前页所在的html里对该元素属性重新定义即可。有时,因原元素属性权重较高,导致直接在html里进行定义后仍无效,则应在该属性值后叫‘!important’增加其权重。在此,若所需修改元素为仅有类选择器,且该类为某UI框架定义,则最好不要对其进行修改,可以给该元素添加ID选择器,在ID选择器里重新定义元素属性。因ID选择器的权重高于类选择器,所以一般情况,不需在元素属性值后添加‘!important’。

    (以上部分简言之即:若要修改的内容为公共模板页,且修改效果仅为当前页所用,则将冲突的元素属性重新定义到当前页HTML里。若重新定义后,效果仍没变化,则考虑是否是权重引起,若是,在新定义的元素属性值后添加“!important”。“!important”能不用就不用,因为其可能引发新的权重问题.)

    常见修改:

    1.输入框只留下边框

    input{

    border-top:none;

    border-left:none;

    border-right:none;

    border-bottom:1px solid black;

    }

    2.输入框无背景色(即透明):

    input{

    background:transparent;

    }

    3.输入框点击时光标颜色值设置:

    input:focuse{

    color:white;

    }

    4.输入框placeholder颜色改变:

    input::-webkit-input-placeholder {

         /* WebKit browsers */
         color: white !important;//添加 !important是为了增加其权重,在不知道权重如何的情况可以不添加,当发现不添加就没有效果的时候,就添加上吧
    }
    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
         color: white !important;
    }
    input::-moz-placeholder { /* Mozilla Firefox 19+ */
         color: white !important;
    }
    input:-ms-input-placeholder { /* Internet Explorer 10+ */
         color: white !important;
    }

  • 相关阅读:
    第十章 2 字符串的常用操作
    第十章 1 字符(驻留机制)
    第九章 4 集合生成式
    ArrayDeque API 与算法分析
    Java 双端队列接口 Deque
    LinkedList 的 API 与数据结构
    ArrayList 源码分析
    new ArrayList(0) 和 new ArrayList() 和一样吗?
    Java 中泛型的实现原理
    Java 中的 equals() 和 hashCode()
  • 原文地址:https://www.cnblogs.com/ganmy/p/5882687.html
Copyright © 2011-2022 走看看