這篇文章主要介紹了web網(wǎng)頁制作的小技巧有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)技術(shù)團(tuán)隊(duì)10多年來致力于為客戶提供成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、品牌網(wǎng)站制作、全網(wǎng)整合營銷推廣、搜索引擎SEO優(yōu)化等服務(wù)。經(jīng)過多年發(fā)展，公司擁有經(jīng)驗(yàn)豐富的技術(shù)團(tuán)隊(duì)，先后服務(wù)、推廣了上千家網(wǎng)站，包括各類中小企業(yè)、企事單位、高校等機(jī)構(gòu)單位。

總結(jié)如下：

一、box-sizing：允許以特定的方式去定義匹配某個(gè)區(qū)域的特定元素。

content-box：在規(guī)定一個(gè)框的寬高之外給這個(gè)框加內(nèi)邊距和邊框。

border-box：（textarea和select默認(rèn)值）在規(guī)定的一個(gè)框的寬高之內(nèi)給這個(gè)框加內(nèi)邊距和邊框。

/*看個(gè)人習(xí)慣而用，但一般標(biāo)簽?zāi)J(rèn)屬性是content-box，除textarea,select*/
   box-sizing: content-box;
   -moz-box-sizing: content-box; 
   -webkit-box-sizing: content-box;

二、美化input框

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

三、美化textarea文本域

textarea{
    /*別忘了文本域的box-sizing屬性值是border-box;所有的邊框和padding都是在你固定的寬高的基礎(chǔ)上繪制*/
     /*去除點(diǎn)擊出現(xiàn)輪廓顏色*/
      outline: none;    
      /*如果有需要，去掉右下角的可拉伸變大小的圖標(biāo)和功能*/
      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的默認(rèn)選擇框樣式清除，隱藏下拉箭頭*/
select::-ms-expand { display: none; }
select {
  /*Chrome和Firefox里面的邊框是不一樣的，所以復(fù)寫了一下*/
  border: solid 1px #333;

  /*將默認(rèn)的select選擇框樣式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在選擇框的最右側(cè)中間顯示小箭頭圖片*/
  background: url("小箭頭圖片路徑") no-repeat right center transparent;

  /*為下拉小箭頭留出一點(diǎn)位置，避免被文字覆蓋*/
  padding-right: 14px;

  /*去除點(diǎn)擊出現(xiàn)輪廓顏色*/
  outline: none;
}

六、美化button按鈕

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

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

/*因?yàn)橛胕nput[type="radio"]和input[type="cheakbox"]都不能直接改變它們的樣式，這個(gè)時(shí)候要用到label標(biāo)簽關(guān)聯(lián)，然后隱藏input標(biāo)簽，直接給label標(biāo)簽樣式就好了。選中l(wèi)abel就是選中了此標(biāo)簽*/
男

八、多出文字用省略號(hào)表示

white-space: nowrap; /* 強(qiáng)制不換行 */
overflow:hidden; / *內(nèi)容超出寬度時(shí)隱藏超出部分的內(nèi)容 */ 
text-overflow:ellipsis;/* 當(dāng)對象內(nèi)文本溢出時(shí)顯示省略標(biāo)記(...) ，需與overflow:hidden;一起使用。*/

九、css頁面點(diǎn)擊文字出現(xiàn)藍(lán)色底色去掉方法

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

十、在遇見圖標(biāo)的垂直位置很難調(diào)整的時(shí)候可以用這個(gè)屬性

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

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

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

十二、js

// 在js中寫的返回鍵
onclick = 'history.go(-1)';

// 強(qiáng)制刷新頁面
window.location.reload(true);

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“web網(wǎng)頁制作的小技巧有哪些”這篇文章對大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!