站长干货：一些网页制作中实用的小技巧

王小优
王小优
王小优
231
文章
0
评论
更多
2015年11月30日
评论4,361 2731字阅读9分6秒

作为博主or站长，偶尔需要对网页进行修改，掌握一些网页制作技巧可以让我们事半功倍。

无论你是站长还是前端工作人员，掌握一些页面制作技巧可以更高效的完成页面制作，下面就整理一些日常遇到问题的解决技巧：

站长干货：一些网页制作中实用的小技巧

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

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

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

关于这个，我之前有相关文章介绍《浅谈CSS3中box-sizing属性在前端布局中的应用》

  1. /*看个人习惯而用，但一般标签默认属性是content-box，除textarea,select*/  
  2. box-sizing: content-box;  
  3. -moz-box-sizing: content-box;  
  4. -webkit-box-sizing: content-box;  

二、美化input框

  1. /*在IE10+浏览器中, 使用css即可隐藏input文本输入框右侧的叉号*/  
  2. input[type=text]::-ms-clear,::-ms-reveal{display:none;}  
  3. input::-ms-clear,::-ms-reveal{display:none;}  
  4. input{  
  5. /*去除点击出现轮廓颜色*/  
  6. outline: none;  
  7. /*padding已在重置样式中去除，如果没有去除，记得有padding哦*/  
  8. }  

三、美化textarea文本域

  1. textarea{  
  2. /*别忘了文本域的box-sizing属性值是border-box;所有的边框和padding都是在你固定的宽高的基础上绘制*/  
  3. /*去除点击出现轮廓颜色*/  
  4. outline: none;  
  5. /*如果有需要，去掉右下角的可拉伸变大小的图标和功能*/  
  6. resize: none;  
  7. /*padding已在重置样式中去除，如果没有去除，记得有padding哦*/  
  8. }  

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

  1. input::-webkit-input-placeholder {  
  2. /* WebKit browsers */  
  3. font-size:14px;  
  4. color: #333;  
  5. }  
  6. input:-moz-placeholder {  
  7. /* Mozilla Firefox 4 to 18 */  
  8. font-size:14px;  
  9. color: #333;  
  10. }  
  11. input::-moz-placeholder {  
  12. /* Mozilla Firefox 19+ */  
  13. font-size:14px;  
  14. color: #333;  
  15. }  
  16. input:-ms-input-placeholder {  
  17. /* Internet Explorer 10+ */  
  18. font-size:14px;  
  19. color: #333;  
  20. }  

五、美化select

  1. /*清除ie的默认选择框样式清除，隐藏下拉箭头*/  
  2. select::-ms-expand { display: none; }  
  3. select {  
  4. /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/  
  5. border: solid 1px #333;  
  6. /*将默认的select选择框样式清除*/  
  7. appearance:none;  
  8. -moz-appearance:none;  
  9. -webkit-appearance:none;  
  10. /*在选择框的最右侧中间显示小箭头图片*/  
  11. background: url("小箭头图片路径") no-repeat rightright center transparent;  
  12. /*为下拉小箭头留出一点位置，避免被文字覆盖*/  
  13. padding-right: 14px;  
  14. /*去除点击出现轮廓颜色*/  
  15. outline: none;  
  16. }  

六、美化button按钮

  1. button{  
  2. /*本身有2px的边框，一般的button都不需要边框*/  
  3. border: none;  
  4. /*本身有的背景色，可以用其他颜色取代*/  
  5. background: #333;  
  6. /*padding已在重置样式中去除，如果没有去除，记得有padding哦*/  
  7. }  

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

  1. /*因为用input[type="radio"]和input[type="cheakbox"]都不能直接改变它们的样式，这个时候要用到label标签关联，然后隐藏input标签，直接给label标签样式就好了。选中label就是选中了此标签*/  
  2. <label for="sex">男</label>  
  3. <input type="radio" id="sex" value="男" />  

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

  1. whitewhite-space: nowrap; /* 强制不换行 */  
  2. overflow:hidden; / *内容超出宽度时隐藏超出部分的内容 */  
  3. text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ，需与overflow:hidden;一起使用。*/  

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

  1. -moz-user-select: none; /* 火狐 */  
  2. -webkit-user-select: none; /* webkit浏览器 */  
  3. -ms-user-select: none; /* IE10 */  
  4. -khtml-user-select: none; /* 早期浏览器 */  
  5. user-select: none;  

十、在遇见图标的垂直位置很难调整的时候可以用这个属性

  1. vertical-align: 30%;  
  2. vertical-align: middle;  

十一、如何让一个DIV在页面中上下左右居中

  1. div{  
  2. width:400px;  
  3. height:300px;  
  4. position:absolute;  
  5. top:50%;  
  6. left:50%;  
  7. margin:-150px 0 0 -200px;  
  8. }  

这个我也有详细的文章介绍 《使用CSS绝对定位实现块状元素自适应居中》

十二、JS

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

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

站长干货：一些网页制作中实用的小技巧

若文章图片、下载链接等信息出错，请在评论区留言反馈，博主将第一时间更新！如果喜欢，请打赏支持本站，谢谢大家！
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微博
  • 微博扫一扫
  • weinxin
王小优
接入百度云加速后解析企业邮箱教程 好文资讯

接入百度云加速后解析企业邮箱教程

昨天试了一下百度云加速，导致企业邮箱发送失败，原因是并没有正确解析邮箱导致的。我用的阿里企业邮箱，企业邮箱后台提示需要到DNS服务商添加邮箱解析。 这里以阿里云企业邮箱为例，进入企业邮箱管理，设置解析...
2015年12月23日6,186评论
什么是OPCM、OCPC、OCPA广告？ 好文资讯

什么是OPCM、OCPC、OCPA广告？

如果你作为广告主当你在做头条、百度信息流广告投放的时候，会看到出价策略有OPCM、OCPC、OCPA，这些是什么意思呢？跟CPM、CPC、CPA有什么不同？ 想必大家都知道广告类型分CPC、CPM、C...
2015年12月17日13,176评论
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: