前言
本文主要给大家总结了自己在日常网页制作的时候遇到问题的一些解决技巧,分享出来供大家参考学习,下面话不多说了,感兴趣的朋友们下面来一起看看详细的介绍:
总结如下:
一、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;
}
七、美化单选框、多选框或者是上传文件按钮
八、多出文字用省略号表示
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);
十三、换行,不换行,字间距

总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对考高分网的支持


