html/css
关注
分享
扫一扫
梁萌
认真是一种态度
展开
-
colResizable插件实现网页中表格列宽自定义
解决方法：使用jQuery的一个插件，名称叫 colResizable，可以实现。需求：页面上每个字段的列宽，可以通过页面拖动的形式进行调整。该插件依赖jQuery，所以需要在使用前引用jQuery。.Table指表格中table的class名称。原创 2024-08-09 11:18:44 · 338 阅读 · 0 评论 -
web系统更改静态文件后不生效的问题解决
当改了js或css文件后，需要手动清理浏览器缓存，更改的代码才生效的问题，可以通过对引用文件的地方添加版本号进行解决。在每次发布版本时，将v=20240705全局替换成一个新的值，只要跟原来的值不同即可。原创 2024-07-05 10:36:52 · 447 阅读 · 0 评论 -
浏览器跨站点通信（两个IP不同网站通信）
登录OA系统后，在OA系统中点击ERP系统的待办，会自动打开ERP系统业务处理页面，当ERP系统对应业务处理完毕，需要在OA系统中刷新待办记录（不再显示已经处理完的待办）。实现思路：在page1点击按钮打开page2页面时，调用postMessage方法，向page2发送消息。该消息中包含了page1的诸多信息（网站地址，发送的内容等等）；将需求提炼为模型：网站A的页面page1与网站B的页面page2，在page1中点击按钮自动打开page2，当page2点击按钮关闭页面时向page1发送消息。原创 2023-04-29 14:02:47 · 450 阅读 · 0 评论 -
超链接下载文件包含特殊符号和中文的处理
处理的思路就是拿到完整的请求路径，然后找到文件名称部分（最后一个斜杠后面的部分），将文件名称通过encodeURIComponent方法进行编码，然后把编码后的文件名称替换到原来的路径中。查看了请求的路径，发现从#号后面的部分都被浏览器自动截掉了，所以文件是不存在的。{PATH}为文件的路径。原创 2022-11-02 17:03:56 · 2184 阅读 · 0 评论 -
form表单序列化相关
form中设置为disabled的input，表单序列化结果不包含该inputform里嵌套form，里层form里的input都不会在表单序列化结果里form里的input不添加name属性，则该input不会在表单序列化结果里select、textarea不会被序列化，可以写input的隐藏域来代替jQuery表单序列化方法$("#formid").serialize()，结果格式：“&name=张三&sex=1&age=1”，其中中文参数值会被编码jQuer原创 2021-05-25 16:47:35 · 188 阅读 · 0 评论 -
自动填写未对密码字段禁用的 HTML 属性
autocomplete 属性是 HTML5 中的新属性，在input中autocomplete属性是默认开启的。1、定义：autocomplete属性规范表单是否启用自动完成功能。自动完成允许浏览器对字段的输入，是基于之前输入过的值。2、应用范围：autocomplete适用<form>，以及<input>类型的text、search、url、telephone、email、password、datepickers、range、color3、属性值：on----默认原创 2021-05-25 16:45:36 · 813 阅读 · 0 评论 -
CSS实现点击选中效果
效果图如下：点击单元格选中元素，添加橘色背景，并在单元格右下角添加对号的标记。再次点击选中的元素，即可取消选中效果。代码如下：html代码：<table class="table table-bordered" id="tblField" style="border-collapse:collapse;"> <tbody id="tbField"> <tr> &l.原创 2020-12-30 10:11:11 · 16175 阅读 · 0 评论 -
CheckBox复选框实现点击文字选中效果
想实现点击‘物流‘即可选中第一个复选框的效果，想到的方法是在input和物流 外面加上一个label标签这样修改后可以实现点击文字选中复选框的效果，但是最终想要的效果是点击tr就可以把复选框选中，也就是点击‘物流’所在行就选中复选框。实现方式就是让label标签占满整个tr，设置label的宽高为100%问题到此为止成功解决。...原创 2020-10-14 10:27:34 · 3513 阅读 · 0 评论 -
transform:translate(-50%,-50%)实现水平垂直居中
translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。当使用：top:50%;left:50%;， 是以左上角为原点，故不处于中心位置translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。实例：如上图所示，想让这个地图的图片处于整个页面的中心位置，则可以使用绝对定位，加上top，left，translate属性进行设置。 .map1...原创 2020-10-11 12:33:16 · 8607 阅读 · 5 评论 -
html代码和js代码转换
新建页面 convert.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <styl.原创 2020-07-08 15:29:03 · 842 阅读 · 0 评论 -
网站变灰CSS，多浏览器兼容版本
网站变灰CSS，多浏览器兼容版本：<style>body *{-webkit-filter: grayscale(100%); /* webkit */-moz-filter: grayscale(100%); /*firefox*/-ms-filter: grayscale(100%); /*ie9*/-o-filter: grayscale(100%); /*o...原创 2020-04-05 12:24:12 · 213 阅读 · 0 评论 -
H5给页面增加遮罩层
遮罩的css样式:.mark{ position:fixed; left:0; top:0; opacity:.5; width:100%; height:100%; background:#000; z-index:998; pointer-events: none; //不能操作}遮罩整个页面，动作不能穿透遮...原创 2019-10-15 14:32:18 · 2293 阅读 · 0 评论 -
css样式占位和不占位隐藏元素的方法
不占位置隐藏元素:style="display:none"占位置隐藏元素:style="visibility:hidden"转自:https://blog.youkuaiyun.com/BuquTianya/article/details/50771986转载 2019-07-03 15:03:27 · 2967 阅读 · 0 评论 -
前端基础知识学习网站
http://www.divcss5.com/原创 2019-06-07 20:30:18 · 256 阅读 · 0 评论 -
input属性disabled和readonly的区别
1.disabled和readonly使用实例disabled写法：<input type="text" name="aaa" value="xxx" disabled />readonly写法：<input type="text" name="bbb" value="xxx" readonly />2.两种写法的相同点：都会使文本框变成只读，不...转载 2019-04-15 18:59:21 · 1286 阅读 · 0 评论 -
页面锚点定位
做一个酒店的列表页面，遇到一个问题，点击下一页后页面定位在分页的地方，用了更好的用户体验，点击下一页后页面定位到顶部。 首先想到的是利用HTML锚点：①：设置一个锚点链接<a href="#PageTop" id="maoDian" >回到顶部</a>；（注意：href属性的属性值最前面要加#）②：在页面中需要的位置设置锚点<a name=...原创 2018-10-18 09:56:06 · 1153 阅读 · 0 评论 -
css 绝对定位和相对定位
绝对定位绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定位的元素没有已定位的祖先元素做参考值，则相对于整个网页。实例1：<!DOCTYPE html><html lang="en"><head> &l...原创 2018-11-10 20:36:07 · 9165 阅读 · 6 评论 -
HTML5拖放API的简单应用
实现思路：1.设置元素可拖放状态 2.为被拖拽元素传递数据3.定义可放置元素的目标区域4.接收被拖拽元素的传递数据 实例一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>HTML5拖放API原创 2018-11-11 18:06:19 · 845 阅读 · 0 评论 -
域标签field和域标题legend的简单应用
使用域标签<fildset>将表单中的多个元素进行分组显示，并使用域标题标签<legend>为各组区域显示标题。实例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&am原创 2018-11-12 21:12:37 · 2257 阅读 · 0 评论