站長干貨 一些網頁制作中實用的小技巧

2017-11-15 18:28 來自本站原創 7,541 10 7
[摘要]

作為博主or站長,偶爾需要對網頁進行修改,掌握一些網頁制作技巧可以讓我們事半功倍。

無論你是站長還是前端工作人員,掌握一些頁面制作技巧可以更高效的完成頁面制作,下面就整理一些日常遇到問題的解決技巧:

站長干貨 一些網頁制作中實用的小技巧

一、box-sizing:允許以特定的方式去定義匹配某個區域的特定元素。

content-box:在規定一個框的寬高之外給這個框加內邊距和邊框。

border-box:(textarea和select默認值)在規定的一個框的寬高之內給這個框加內邊距和邊框。

關于這個,筆者之前有相關文章介紹《淺談CSS3中box-sizing屬性在前端布局中的應用》

/*看個人習慣而用,但一般標簽默認屬性是content-box,除textarea,select*/
 box-sizing: content-box;
 -moz-box-sizing: content-box; 
 -webkit-box-sizing: content-box;

二、美化input框

/*在IE10+瀏覽器中, 使用css即可隱藏input文本輸入框右側的叉號*/
input[type=text]::-ms-clear,::-ms-reveal{display:none;}
input::-ms-clear,::-ms-reveal{display:none;}
input{
 /*去除點擊出現輪廓顏色*/
 outline: none;
 /*padding已在重置樣式中去除,如果沒有去除,記得有padding哦*/ 
}

三、美化textarea文本域

textarea{
 /*別忘了文本域的box-sizing屬性值是border-box;所有的邊框和padding都是在你固定的寬高的基礎上繪制*/
 /*去除點擊出現輪廓顏色*/
 outline: none; 
 /*如果有需要,去掉右下角的可拉伸變大小的圖標和功能*/
 resize: none;
 /*padding已在重置樣式中去除,如果沒有去除,記得有padding哦*/
}

四、改變placeholder的字體顏色大小

input::-webkit-input-placeholder { 
 /* WebKit browsers */
 font-size:14px;
 color: #333;
} 
input:-moz-placeholder { 
 /* Mozilla Firefox 4 to 18 */
 font-size:14px;
 color: #333;
} 
input::-moz-placeholder { 
 /* Mozilla Firefox 19+ */
 font-size:14px;
 color: #333;
} 
input:-ms-input-placeholder { 
 /* Internet Explorer 10+ */
 font-size:14px;
 color: #333;
}

五、美化select

/*清除ie的默認選擇框樣式清除,隱藏下拉箭頭*/
select::-ms-expand { display: none; }
select {
 /*Chrome和Firefox里面的邊框是不一樣的,所以復寫了一下*/
 border: solid 1px #333;
 
 /*將默認的select選擇框樣式清除*/
 appearance:none;
 -moz-appearance:none;
 -webkit-appearance:none;
 
 /*在選擇框的最右側中間顯示小箭頭圖片*/
 background: url("小箭頭圖片路徑") no-repeat right center transparent;
 
 /*為下拉小箭頭留出一點位置,避免被文字覆蓋*/
 padding-right: 14px;
 
 /*去除點擊出現輪廓顏色*/
 outline: none;
}

六、美化button按鈕

button{
 /*本身有2px的邊框,一般的button都不需要邊框*/
 border: none;
 /*本身有的背景色,可以用其他顏色取代*/
 background: #333;
 /*padding已在重置樣式中去除,如果沒有去除,記得有padding哦*/
}

七、美化單選框、多選框或者是上傳文件按鈕

/*因為用input[type="radio"]和input[type="cheakbox"]都不能直接改變它們的樣式,這個時候要用到label標簽關聯,然后隱藏input標簽,直接給label標簽樣式就好了。選中label就是選中了此標簽*/
<label for="sex">男</label>
<input type="radio" id="sex" value="男" />

八、多出文字用省略號表示

white-space: nowrap; /* 強制不換行 */
overflow:hidden; / *內容超出寬度時隱藏超出部分的內容 */ 
text-overflow:ellipsis;/* 當對象內文本溢出時顯示省略標記(...) ,需與overflow:hidden;一起使用。*/

九、css頁面點擊文字出現藍色底色去掉方法

-moz-user-select: none; /* 火狐 */
-webkit-user-select: none; /* webkit瀏覽器 */
-ms-user-select: none; /* IE10 */
-khtml-user-select: none; /* 早期瀏覽器 */
user-select: none;

十、在遇見圖標的垂直位置很難調整的時候可以用這個屬性

vertical-align: 30%;
vertical-align: middle;

十一、如何讓一個div在頁面中上下左右居中

div{
 width:400px;
 height:300px;
 position:absolute;
 top:50%;
 left:50%;
 margin:-150px 0 0 -200px;
}

這個筆者也有詳細的文章介紹 《使用CSS絕對定位實現塊狀元素自適應居中》

十二、js

// 在js中寫的返回鍵
onclick = 'history.go(-1)';
 
// 強制刷新頁面
window.location.reload(true);

十三、換行,不換行,字間距

站長干貨 一些網頁制作中實用的小技巧

點擊圖片可放大

如果認為本文對您有所幫助請贊助本站

支付寶掃一掃贊助微信掃一掃贊助

  • 支付寶掃一掃贊助
  • 微信掃一掃贊助
  • 聲明:凡注明“本站原創”的所有文字圖片等資料,版權均屬 雅兮網 所有,歡迎轉載,但務請注明出處;
    目前評論:10   其中:訪客  8   博主  2
    加載中...
    1. 2年前 (2017-11-28) 7樓

      很實用的一些代碼,收藏備用。

    2. 2年前 (2017-11-25) 6樓

      這篇文章很不錯,想要轉發

    3. 2年前 (2017-11-17) 5樓

      好東西呀,米撲博客收走了 [呲牙]

    4. 2年前 (2017-11-16) 4樓

      老鐵,你以前的運行代碼是用插件?

    5. 2年前 (2017-11-16) 板凳

      干貨很贊,雖然看不懂

    6. 2年前 (2017-11-16) 椅子

      確實非常實用,大佬,受教了!

    7. 游魚 2
      2年前 (2017-11-16) 沙發

      技巧非常實用啊

    發表評論

    疑問 調皮 難過 摳鼻 嚇 微笑 可愛 壞笑 驚訝 發呆 疑問 大兵 偷笑 咒罵 發怒 白眼 鼓掌 得意 擦汗 親親 大哭 呲牙 暈 強

    分享 10 7 7,541
    Top dhc篮彩双层皂盒