网页制作时的高有用性小技巧总结-

这篇文章主要给大家分享了一些在网页制作的时候，可以拿起就用的小技巧，文中通过示例代码介绍的非常细致，对大家拥有一定的参照 学习价值，需要的伴侣可以参照 借鉴，下面跟着小编来一起学习学习吧。 这篇文章主要给大家分享了一些在网页制作的时候，可以拿起就用的小技巧，文中通过示例代码介绍的非常细致，对大家拥有一定的参照 学习价值，需要的伴侣可以参照 借鉴，下面跟着小编来一起学习学习吧。

前言

本文主要给大家总结了本人在日常网页制作的时候碰到题目的一些解决技巧，分享出来供大家参照 学习，下面话未几说了，感乐趣的伴侣们下面来一起看看细致的介绍：

总结如下：

一、box-sizing：允许以特定的方式去定义匹配某个区域的特定元素。

content-box：在规定一个框的宽高以外给这个框加内边距和边框。

border-box：（textarea和select默许值）在规定的一个框的宽高以内给这个框加内边距和边框。

/*看个人习惯而用，但个别标签默许属性是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就是选择了此标签*/
男

八、多出文字用省去号表示

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;

十一、怎样让一个p在页面中高低摆布居中

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

十二、js

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

// 强迫刷新页面
window.location.reload(true);

十三、换行，不换行，字间距

以上就是网页制作时的高有用性小技巧总结的细致内容，更多请关注 百分百源码网 其它相干文章！