圆月山庄资源网 Design By www.vgjia.com
前言
本文主要给大家总结了自己在日常网页制作的时候遇到问题的一些解决技巧,分享出来供大家参考学习,下面话不多说了,感兴趣的朋友们下面来一起看看详细的介绍:
总结如下:
一、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就是选中了此标签*/ <label for="sex">男</label> <input type="radio" id="sex" value="男" />
八、多出文字用省略号表示
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);
十三、换行,不换行,字间距
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持
标签:
网页制作,小技巧
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 张玮伽《微风细雨DSD》发烧大碟[WAV+CUE][1.1G]
- 群星《2024好听新歌14》十倍音质 U盘音乐 [WAV分轨][966M]
- s14全球总决赛T1战队队员都有谁 LOLs14全球总决赛T1战队介绍
- 英雄联盟faker身价有10亿吗 英雄联盟faker身价介绍一览
- faker大魔王称号怎么来的 faker大魔王称号来源介绍
- PS5 Pro上的蒂法更美了!博主盛赞新机1000%值得购买
- 腾讯互娱再离职一员大将!或因供应商贪腐
- Ayaneo3游戏掌机预热:旗舰定位、造型圆润自带底键
- 动力火车.1999-背叛情歌【上华】【WAV+CUE】
- 刘力扬.2019-Neon.Lit虹【摩登天空】【FLAC分轨】
- 群星.2002-恋爱物语情歌对唱精选2CD(引进版)【滚石】【WAV+CUE】
- 群星《闽南情24K德国HD金碟》2CD[WAV+CUE]
- 周传雄《恋人创世纪》环球唱片[WAV+CUE]
- 关淑怡-《真假情话K2HD》(日本压制)【WAV+CUE】
- 王菲 -《Faye Wong》雨果LPCD45 [WAV+分轨][1G]