web网页制作的小技巧有哪些

这篇文章主要介绍了WEB网页制作的小技巧有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

总结如下：

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

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

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

   box-sizing: content-box;   -moz-box-sizing: content-box;    -webkit-box-sizing: content-box;

二、美化input框

input[type=text]::-ms-clear,::-ms-reveal{display:none;}input::-ms-clear,::-ms-reveal{display:none;}input{    outline: none;      }

三、美化textarea文本域

textarea{               outline: none;                resize: none;      }

四、改变placeholder的字体颜色大小

input::-webkit-input-placeholder {          font-size:14px;    color: #333;} input:-moz-placeholder {          font-size:14px;    color: #333;} input::-moz-placeholder {          font-size:14px;    color: #333;} input:-ms-input-placeholder {          font-size:14px;    color: #333;}

五、美化select

select::-ms-expand { display: none; }select {    border: solid 1px #333;    appearance:none;  -moz-appearance:none;  -webkit-appearance:none;    background: url("小箭头图片路径") no-repeat right center transparent;    padding-right: 14px;    outline: none;}

六、美化button按钮

button{        border: none;        background: #333;    }

七、美化单选框、多选框或者是上传文件按钮

<label for="sex">男</label><input type="radio" id="sex" value="男" />

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

white-space: nowrap; overflow:hidden; / *内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis;

九、css页面点击文字出现蓝色底色去掉方法

-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -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;}

十二、js

// 在js中写的返回键onclick = 'history.Go(-1)';// 强制刷新页面window.location.reload(true);

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

感谢你能够认真阅读完这篇文章，希望小编分享的“web网页制作的小技巧有哪些”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网精选频道，更多相关知识等着你来学习!