随笔分类 -  css+div

web前端栅格布局
摘要：.row{ display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; } $list: 1 2 3 4 5 6 7 8 9 10 11 12; @each $v in $list{ .col-#{$v}{ grid-colum 阅读全文
posted @ 2020-03-11 14:32 南侠书生 阅读(1021) 评论(0) 推荐(0)
css3优惠券的样式集合
摘要：粘贴代码 忘记在哪个博客看到的了， 做个记录吧，各种css3优惠券的样式集合 阅读全文
posted @ 2019-08-29 13:51 南侠书生 阅读(1369) 评论(0) 推荐(0)
vw,rem布局记录
摘要：$w: 10 15 20 25 30 35 40 50 60 75 100; @each $value in $w { .w-p-#{$value} { width: 100% * $value / 100; } } @function px2rem($value, $defaultFontSize: 16) { @return ($value... 阅读全文
posted @ 2019-06-27 16:25 南侠书生 阅读(243) 评论(0) 推荐(0)
JS实现字符点点loading效果
摘要：JS实现字符点点loading效果 粘贴代码 ref: https://www.zhangxinxu.com/wordpress/2016/11/css-content-pre-animation-character-loading/ 阅读全文
posted @ 2019-06-13 16:21 南侠书生 阅读(559) 评论(0) 推荐(0)
css 自定义字体
摘要：第一：在css中引入@font-face，使用font-family设置自己想要取的字体名称，这里我取作mikasaTong（当然也可以是xxFont等）。 第二：下载字体 1） .ttf (True Type Fonts) 和 .otf (OpenType Fonts) ： Firefox、Chr 阅读全文
posted @ 2018-06-29 14:05 南侠书生 阅读(351) 评论(0) 推荐(0)
CSS 单行 多行文本溢出显示省略号
摘要：单行文本 多行文本溢出显示省略号： 适用范围：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端； 注： 例如： 效果如图：适用范围：该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。 注： 阅读全文
posted @ 2018-04-02 12:40 南侠书生 阅读(1580) 评论(0) 推荐(0)
css3 渐变色
摘要：Firefox可以使用角度来设定渐变的方向，而webkit只能使用x和y轴的坐标。 渐变可以创建类似于彩虹的效果，低版本的浏览器使用图片来实现，CSS3将会轻松实现网页渐变效果 粘贴代码 一. Webkit浏览器 (1) 第一种写法： (2)第二种写法：这种写法比较简单，而且效果比较自然 二.Moz 阅读全文
posted @ 2018-03-28 10:56 南侠书生 阅读(362) 评论(0) 推荐(0)
display inline-block 间隔
摘要：1.如果li横排用display:inline-block; 则li之间不能有间隔 必须连着一起，所以才一般用float:left; 阅读全文
posted @ 2017-12-12 17:26 南侠书生 阅读(220) 评论(0) 推荐(0)
滚动菜单跟随
摘要：粘贴代码 阅读全文
posted @ 2017-11-30 15:37 南侠书生 阅读(252) 评论(0) 推荐(0)
H5常见问题 微信踩过得坑
摘要：微信页面内 click事件 只在a链接的时候有效，如果是div或者span之类 一定要加上样式 cursor:pointer 点击事件才生效。 <div style="cursor:pointer;" class="submit-form">提交</div> 解决微信中页面回退ios不刷新的问题 $ 阅读全文
posted @ 2017-11-30 15:27 南侠书生 阅读(9903) 评论(0) 推荐(1)
js css div 点亮半颗星星（二）
摘要：上回说到js css点亮星星 换种方式来点亮 粘贴代码 阅读全文
posted @ 2017-11-22 13:51 南侠书生 阅读(925) 评论(0) 推荐(0)
js css 点亮 星级评分
摘要：利用css 和 js 实现星级评分 粘贴代码 效果如下： 阅读全文
posted @ 2017-11-17 14:48 南侠书生 阅读(580) 评论(0) 推荐(0)
div css 伪类 不固定图片大小 居中， css div 实现三角形
摘要：div css 伪类 不固定图片大小 居中 css div 实现三角形 CSS 伪类实现左上角标签 阅读全文
posted @ 2017-09-22 14:52 南侠书生 阅读(231) 评论(0) 推荐(0)
jQuery 全屏滚动插件 fullPage.js 参数说明
摘要：fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有： 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对 阅读全文
posted @ 2017-09-21 16:27 南侠书生 阅读(567) 评论(0) 推荐(0)
select随笔
摘要：粘贴下面代码 select 美化 阅读全文
posted @ 2017-09-20 14:45 南侠书生 阅读(149) 评论(0) 推荐(0)
css3 box-shadow 用法
摘要：第1个值水平偏移值 第2个值垂直偏移值 第3个值设置对象的阴影模糊值 第4个值设置对象的阴影外延值 外阴影常规效果box-shadow:5px 5px rgba(0,0,0,.6); 外阴影模糊效果box-shadow:5px 5px 5px rgba(0,0,0,.6); 外阴影模糊外延效果box 阅读全文
posted @ 2017-05-09 10:19 南侠书生 阅读(183) 评论(0) 推荐(0)
百度编辑器 Ueditor 上传图片时打开文件夹的延迟问题，点击上传图片弹窗打开慢问题
摘要：在使用 ueditor 开发时， 作为一个web文本编辑器使用时。 当点击上传图片时， 文件夹要延迟好久才能打开。 解决： 针对多图片上传， 将/ueditor/dialogs/image/image.js 文件下的以下代码 accept: { title: 'Images', extensions 阅读全文
posted @ 2017-04-20 13:53 南侠书生 阅读(4524) 评论(0) 推荐(1)
DIV+CSS布局-固定页面开度布局
摘要：DIV+CSS布局中主要CSS属性介绍：Float: Float属性是DIV+CSS布局中最基本也是最常用的属性，用于实现多列功能，我们知道标签默认一行只能显示一个，而使用Float属性可以实现一行显示多个div的功能，最直接解释方法就是能实现表格布局的多列功能。Margin: Margin属性用于... 阅读全文
posted @ 2014-08-19 11:59 南侠书生 阅读(192) 评论(0) 推荐(0)
CSS 最核心的几个概念
摘要：CSS 中最核心的几个概念，包括：盒模型、position、float等。这些是 CSS 的基础，也是最常用的几个属性，它们之间看似独立却又相辅相成。元素类型HTML 的元素可以分为两种：块级元素（block level element）内联元素（inline element 有的人也叫它行内元素）... 阅读全文
posted @ 2014-08-19 11:57 南侠书生 阅读(138) 评论(0) 推荐(0)