今天對公司項目登錄頁進行了修改。
項目登錄頁構成：頭部和底部為公共模板頁，中間部分為登錄頁自身所有。
鑒於此，中間部分因不用擔心改動影響到其它頁面，故最好改，不必細談。對於頭部和底部，首先借助瀏覽器調試工具找到關鍵元素及其選擇器，再在瀏覽器上進行修改與測試（對於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;
}