这篇文章主要介绍了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网页制作的小技巧有哪些”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!