栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS

网页制作时可以拿起就用的小技巧总结

Html/CSS 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

前言
 

本文主要给大家总结了自己在日常网页制作的时候遇到问题的一些解决技巧,分享出来供大家参考学习,下面话不多说了,感兴趣的朋友们下面来一起看看详细的介绍:

总结如下:

一、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);

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

总结

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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/218575.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号