随笔分类 - CSS
摘要：需求 直接上图吧，要实现多个小方块在大盒子里的两端对齐，大部分我们都是想到用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=
阅读全文
摘要：单行文本省略 单行文本溢出显示省略号比较简单，设置white-space: nowrap避免换行，设置overflow: hidden溢出隐藏，再设置text-overflow: ellipse即可。 text-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切，显示
阅读全文
摘要：问题 这个问题大部分时候也不会遇到。 我是在修改博客样式时，文章结尾处会有标签分类，如下图： 源代码： <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渲染中向元素的头部或尾部插入内容，它们不受文档约束，也不影响文档本身，只影响最终样式。这些添加的内容不会出现
阅读全文
摘要：问题 下面代码中，使用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
阅读全文
摘要：移动端的导航栏需要滑动到一定距离，固定在页面顶部（即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; } 理想状态为按钮背景色变暗
阅读全文
摘要：之前做注册登录界面遇到过一个需求，输入框的颜色和光标都变为红色。 设置文本的颜色方便，但光标该怎么设置颜色？CSS3 的 caret-color 可以解决这个问题。 input, textarea { caret-color: blue; } 它不仅对于原生的输入控件有效，对设置 contented
阅读全文
摘要：css中给body或者目标元素设置 -webkit-tap-highcolor:transparent;
阅读全文
浙公网安备 33010602011771号