随笔分类 - HTML
摘要：HTML中空格的说明 这是我们使用最多的空格，也就是按下space键产生的空格。 在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个），要使用html实体表示才可累加。 为了便于记忆，我总是把这个空格成为“牛逼(nb)空格(sp – space)”，虽然实际上并不牛逼。
阅读全文
摘要：给了外层盒子100%宽度，结果移动端依然有横向滚动条。 解决 在head中添加： <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="viewport
阅读全文
摘要：需求 直接上图吧，要实现多个小方块在大盒子里的两端对齐，大部分我们都是想到用flex布局，简单方便。 实现 上代码： HTML: <div class="container"> <div class="justify"> <i>1</i> <i>2</i> <i>3</i> <i>4</i> </d
阅读全文
摘要：需求 移动端要求弹窗显示如图： 先上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
阅读全文
摘要：需求 当用户在a页面点击按钮时跳转到b页面，如果b页面还未打开，则在新窗口中打开b页面；如果b页面已经打开，则刷新b页面。 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</ti
阅读全文
摘要：问题 这个问题大部分时候也不会遇到。 我是在修改博客样式时，文章结尾处会有标签分类，如下图： 源代码： <div id="BlogPostCategory"> 分类 <a href="" target="_blank">HTML</a> </div> 由于本人觉得“分类”这几个字太丑，想要实现如下的
阅读全文
摘要：本文实例为大家分享了js实现列表向上无限滚动的具体代码，供大家参考，具体内容如下： 在项目中有用到需要无限向上滚动，循环中奖手机号码，实现代码如下： html： <h5>恭喜以下中奖用户！</h5> <div class="list_bg"> <ul class="customer_list"></
阅读全文
摘要：什么是伪元素 伪元素用于向某些选择器设置特殊效果。 已存在元素是指DOM中存在的，伪元素则是虚拟的一种，样式也是给这个虚拟的元素使用的。 比如伪元素 :before和:after，用于在CSS渲染中向元素的头部或尾部插入内容，它们不受文档约束，也不影响文档本身，只影响最终样式。这些添加的内容不会出现
阅读全文
摘要：原文： 切换选项卡时，保留复选框勾选(1) 更新内容：将选项卡显示隐藏做了封装等，考虑了更多选项卡的情况，有待更优解~~ 更新后代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</ti
阅读全文
摘要：问题 最近一个页面中用到appendChild来追加内容，此时发现当多次添加相同的li标签时，页面上却只出现了一个li标签。 <ul id="mylist"></ul> <script> const mylist = document.getElementById('mylist'); const
阅读全文
摘要：问题 下面代码中，使用js将li按照data-id来重新排序。 <ul id="mylist"> <li data-order="2">item2</li> <li data-order="3">item3</li> <li data-order="1">item1</li> </ul> 方法一 c
阅读全文
摘要：需求 想要实现如图的效果，li宽度相等，并且自适应ul的宽度。 li个数不是固定的，图中一行为9个li，当屏幕宽度变小，可能会8个或更少，但在屏幕宽度变化的过程中，要保持li的宽度相等并且始终充满ul的宽度。 解决 使用了媒体查询来实现效果，上代码： <!DOCTYPE html> <html la
阅读全文
摘要：需求 项目中遇到一个需求，点击不同的选项卡，显示不同的数据，显示的数据为多个复选框不等， 如图所示，点击“数据1”即显示data1中的数据，点击“数据2”即显示data2中的数据，且要求两个选项卡中的复选框勾选互不影响。 问题 最初采用的方式为，点击“数据1”使用data1的数据渲染到class为c
阅读全文
摘要：偶然发现有些网站在用户登陆时，在输入密码的过程中先看到输入的密码，延迟后再变成密文，很好奇，所以捣鼓了一下。 明文延迟转密文 以下为代码：（延迟后变成*号） //js实现输入密码后，先显示当前输入的一位密码，然后再变成星号 <input class="ipt" type="text"> <scrip
阅读全文
摘要：移动端的导航栏需要滑动到一定距离，固定在页面顶部（即fixed定位），此时要让导航栏内的选项卡横向滑动， 效果如图 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>
阅读全文
摘要：禁用长按选择文字功能 body { user-select: none; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; } 禁止长按弹出菜单 (未实际验证) node.addEventListener
阅读全文
摘要：需求 在做响应式页面的时候有这样的需求，要求div的宽高等比例放大或缩小。 我们先放图片： 要做一排方形的div，放不下时自动换行。 代码 HTML： <div class="container"> <ul> <li> <div class="inner">1</div> </li> <li> <d
阅读全文
摘要：在做项目的时候发现苹果手机的safari浏览器下 如果在点击软键盘上的验证码自动填充之后输入框input就会自动变成黄色 查询原因如下： 浏览器会自动加上 方法一 在之前input输入框有记录的情况下，会出现自动填充输入框背景颜色变成如上黄色，最简单的方法是禁止输入框自动填充。 <input typ
阅读全文
摘要：默认情况下： 点击后，按钮有了diasbled属性， css代码： .disabledCodeBtn { border: 1px solid #fff; font-weight: bold; color: #fff; background-color: #c53b40; } 理想状态为按钮背景色变暗
阅读全文
浙公网安备 33010602011771号