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

投稿   雅兮网  2017-11-28 07:29:02  153 人阅读  35 条评论

投放广告联系   诚邀合作伙伴   赞助我们   垃圾评论惩罚

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

站长干货:一些网页制作中实用的小技巧 建站经验 第1张

一、box-sizing

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. outlinenone;
  7. /*padding已在重置样式中去除,如果没有去除,记得有padding哦*/
  8. }

三、美化 textarea 文本域

  1. textarea{
  2. /*别忘了文本域的box-sizing属性值是border-box;所有的边框和padding都是在你固定的宽高的基础上绘制*/
  3. /*去除点击出现轮廓颜色*/
  4. outlinenone;
  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 { displaynone; }
  3. select {
  4. /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
  5. bordersolid 1px #333;
  6. /*将默认的select选择框样式清除*/
  7. appearance:none;
  8. -moz-appearance:none;
  9. -webkit-appearance:none;
  10. /*在选择框的最右侧中间显示小箭头图片*/
  11. backgroundurl("小箭头图片路径"no-repeat rightright center transparent;
  12. /*为下拉小箭头留出一点位置,避免被文字覆盖*/
  13. padding-right14px;
  14. /*去除点击出现轮廓颜色*/
  15. outlinenone;
  16. }

六、美化 button 按钮

  1. button{
  2. /*本身有2px的边框,一般的button都不需要边框*/
  3. bordernone;
  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-spacenowrap/* 强制不换行 */
  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-alignmiddle;

十一、如何让一个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);

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

站长干货:一些网页制作中实用的小技巧 建站经验 第2张

如果文章对你有帮助,请赞赏支持作者继续创作!

历史上的今天:

文章标签: ,   ,   ,  
原文地址:https://www.iyaxi.com/2017-11-15/1628.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 雅兮网 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!

 发表评论


  1. YangOne
    YangOne 【小白】 @回复

    一些很基础的CSS 不错的干活 对学习网页美化的很有帮助

  2. 橘子书
    橘子书 【丞相】 @回复

    这个不错,可以备份起来。比较用到的地方不少。

  3. Mr.He
    Mr.He 【秀才】 @回复

    掌握css的一些知识,是站长必备技能,:)

  4. 电脑维修
    电脑维修 【状元】 @回复

    这网页制作中实用的小技巧不错

  5. 优选汇
    优选汇 【书童】 @回复

    很实用,学习了。

  6. 趣趣金屋
    趣趣金屋 【秀才】 @回复

    有帮助!!!

  7. 装饰材料城
    装饰材料城 【书童】 @回复

    博主的代码都是精品,收藏备用,谢谢

  8. 姜辰
    姜辰 【进士】 @回复

    很实用啊

  9. 好会吃美食博客
    好会吃美食博客 【小白】 @回复

    先收藏,慢慢学习

  10. 小白蜀黍网赚
    小白蜀黍网赚 【秀才】 @回复

    这个实用,收藏了

  11. 明月登楼学习笔记
    明月登楼学习笔记 【进士】 @回复

    不错,很实用,就是 Typecho 里感觉很少用到这些!除非自己魔改主题啥的时候估计可以参考一下!

  12. 吃货小栈
    吃货小栈 【举人】 @回复

    不错,好东西呀!很值得学习的好资料!收藏了先!

  13. 唯心寒辞
    唯心寒辞 【书童】 @回复

    [赞] 收藏了!

  14. 闲鱼
    闲鱼 【状元】 @回复

    [嘻嘻] css折腾起来会有瘾的

  15. 前沿网
    前沿网 【书童】 @回复

    收藏起来,以备后需!

  16. 8S分享网
    8S分享网 【举人】 @回复

    这些技巧很实用,先收藏夹留了,要改网页的时候就来这里看看

  17. 亦枫博客
    亦枫博客 【书童】 @回复

    干货,很实用

  18. 在线看小说
    在线看小说 【进士】 @回复

    前段大拿的作品

  19. 雅兮网
    雅兮网 【尚书】 @回复

    怪不得今天多了很多朋友的留言在雅兮网,原来是boke112导量过来了 [鼓掌]

  20. 99八十一
    99八十一 【进士】 @回复

    很实用的一些代码,收藏了。

  21. 里维斯社
    里维斯社 【进士】 @回复

    不错,用的时候肯定会帮不少忙 [赞]

  22. 沈唁志
    沈唁志 【举人】 @回复

    干货 已经收藏了 哈哈

  23. 夏天烤洋芋
    夏天烤洋芋 【状元】 @回复

    [阴险] 我就是用别人现成的!免费的! [偷笑]

  24. 说彩网
    说彩网 【书童】 @回复

    感谢分享,很实用的代码,先收藏,说不定到时候需要,直接copy再修改下就可以用了。

  25. 365生活网
    365生活网 【秀才】 @回复

    每天都来这里看看,有没有干货,期待博主分享更多干货

  26. 重蔚自留地
    重蔚自留地 【秀才】 @回复

    我喜欢这种有代码的,感觉以后会用到。

  27. 明月登楼
    明月登楼 【王爷】 @回复

    不错,这个要收藏了!特别是我这样的重度css盲的! [嘻嘻] [挖鼻屎]

  28. 靠谱学生兼职网
    靠谱学生兼职网 【尚书】 @回复

    很实用,先收藏留用

  29. 米扑博客
    米扑博客 【举人】 @回复

    干货,实用

  30. 辩论吧
    辩论吧 【尚书】 @回复

    向雅兮学习

  31. Koolight
    Koolight 【尚书】 @回复

    都是特效,用过一些的。

  32. 历史趣谈
    历史趣谈 【举人】 @回复

    很好很实用,回帖为博主点赞

  33. 四海吧
    四海吧 【举人】 @回复

    加书签,留作后用,谢谢!!!