文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web网页制作的小技巧有哪些

2023-06-08 09:06

关注

这篇文章主要介绍了web网页制作的小技巧有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

总结如下:

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

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

<label for="sex">男</label><input type="radio" id="sex" value="男" />

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

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

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

web网页制作的小技巧有哪些

感谢你能够认真阅读完这篇文章,希望小编分享的“web网页制作的小技巧有哪些”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网行业资讯频道,更多相关知识等着你来学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯