前端速查手册——Note
前端 手册 note 速查
2023-09-14 08:56:52 时间
目录
自定义弹框(模块框)
HTML
<div style="display:none" id="model"></div> <div style="display:none" id="notice_div" class="notice_div"> <div id="notice_header"> <div id="notice_title">提示信息</div> </div> <div id="notice_content"> <div id="notice_msg">信息</div> </div> <div id="notice_action"> <button class="confirm_btn" onclick="cancel()">确认</button> <button class="return_btn" onclick="cancel()">返回</button> </div> </div>
CSS
#model { width:100%; height:200%; position:fixed; left:0; top:0; background:black; opacity:0.8; } #notice_div { width: 40%; height:200px; position:fixed; left:30%; top: 20%; height:30%; text-align:center; font-size:18px; } #notice_header { height: 50px; background-color:#1e88d4; border-radius: 10px 10px 0 0; color: black; font-weight:900; } #notice_title { padding-top:12px; } #notice_content { height:100px; background-color:#d3d7cf; border-top:1px solid gray; border-bottom:1px solid gray; } #notice_action { height:50px; background-color:#d3d7cf; text-align:center; border-radius: 0 0 10px 10px; } #notice_msg { margin-top:30px; color: black; } .confirm_btn, .return_btn { text-align: center; width: 100px; height: 35px; line-height: 35px; margin-top:7px; letter-spacing: 5px; text-indent: 10px; background: #1e88d4; border: 1px solid #1e88d4; border-radius: 5px; display: inline-block; cursor:pointer; } .return_btn { background: #9ea09a; border: 1px solid #9ea09a; }
JavaScript
function alert_msg(content, title="提示信息") { $("#notice_title").html(title); $("#notice_msg").html(content); $("#model").show(); $("#notice_div").show(); } function cancel() { $("#model").hide(); $("#notice_div").hide(); }
HTML新增标签
HTML5新增属性
输入框自动获得焦点
autofocus属性,可以直接写input标签中该属性即可(不用赋值)。也可以赋值为true或者“autofocus",都可以开启自动获得焦点。
<input type="text" autofocus /> <input type="text" autofocus=true /> <input type="text" autofocus="autofocus" />
自动补全
autocomplete属性,默认的是on,也就是开启了自动补全功能。可以设置为off,即可关闭自动补全。
示例:
<input type="text" autocomplete="on" /> <input type="text" autocomplete="off" />
如果想要全部禁用input的自动补全功能,可以使用jquery实现:
$("input").attr("autocomplete", "off")
相关文章
- [web 前端] css3 transform方法常用属性
- [web 前端] web本地存储(localStorage、sessionStorage)
- 前端进阶(12) - css 的弱化与 js 的强化
- 这些特效对于学习前端我们很有用
- 前端拖拽组件优化
- 前端每日实战:96# 视频演示如何用纯 CSS 和 D3 创作一艘遨游太空的宇宙飞船
- 一统江湖的大前端(1)——PPT制作库impress.js(含附件)
- 前端切图要选择png和jpg呢?
- 前端学习 -- Css -- 文档流
- 前端学习 -- Css -- 默认样式
- 【GO】K8s 管理系统项目29[前端部分–Secret]
- 〖大前端 - 基础入门三大核心之JS篇③〗- 掌握 Javascrip 的变量
- 野生前端的数据结构基础练习(6)——集合
- 微信小程序练手实战:前端+后端(Java)
- web前端入门到精通之5 个不常提及的 HTML 技巧
- 前端网络基础-通过XMLHttpRequest实现AJAX(一)
- 【项目实战】基于Avue的前端框架实现一个简单CRUD