在我们程序员制作网页时，我们当然希望能制作一个非常美观的网页，那么本文我们就教大家几种非常有用的制作网页时的小技巧。
一、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;
登录后复制
十一、如何让一个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);
登录后复制
十三、换行，不换行，字间距
以上这十三个网页开发小技巧可以说是非常实用了，希望能帮助到大家。
相关推荐：
HTML网页优化压缩的实现步骤
HTML网页优化压缩的实现步骤
HTML网页优化压缩的实现步骤
HTML网页优化压缩的实现步骤
HTML网页优化压缩的实现步骤
以上就是最实用的制作网页小技巧总结的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3194728.html
