html5+css3
关注
分享
扫一扫
weixin_43297321
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
css 全局撑开页面
一定设置html、body、还有一路的父容器的高度都为100%<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty.原创 2020-08-06 21:03:57 · 574 阅读 · 0 评论 -
移动端 左右滚动（无滚动条）导航栏
拉哥的一种方法那个人的一种方法原创 2020-08-04 17:47:25 · 3196 阅读 · 0 评论 -
细节复盘3 （文本折叠、文本尾行缩进截断）2020-8-2
今天被一个问题搞的很惨，用了很多时间，查了很多资料，都没啥特别好的放法，无语下，按自己的逻辑写了一下。所要实现的功能如下图：一是文本切换折叠，而是折叠状态下，尾行文本不显示全行。HTML结构：<!-- 作品介绍 --><div :class="bool?'readingBriefIntro':'introCut'"> <p>{{bool?introDetail.intro:introDetail.intro.substr(0,44)+'...'}}<原创 2020-08-02 14:35:05 · 1222 阅读 · 0 评论 -
flex 实现移动端上下固定，中间滑动
如果你还在用position:fixed来保持移动端顶部、下部的导航栏在全局固定位置不动。那你可以换种方法。更简单，方便，快捷；还不会受定位的影响。大师兄飞速写完的flex移动端布局小栗子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-原创 2020-08-01 16:42:35 · 1857 阅读 · 0 评论 -
阿里iconfont图标不能修改颜色的解决方案
现象：iconfont安装后的图标，是通过symbol引用方式，有的图标不能通过color修改颜色的解决办法，有的又可以。<svg class="icon" aria-hidden="true" style="color:red;"> <use xlink:href="#icon-PDF"></use></svg>原因：当从阿里图库中图标被添加至项目，如果编辑过项目图标的颜色或者图标本身是有颜色的，那么在通过symbol获取图标时会在svg转载 2020-07-27 21:14:20 · 5270 阅读 · 0 评论 -
移动端适配方案
1、按照比例缩放1像素问题 & 混合器@mixin & 设备像素比dpr & 媒体查询@media2、按照绝对单位好处：根据内容大小，显示更多的内容，具体体现在：大分辨率展示的文字更多，小分辨率展示的文字更少。缺陷：如果把放大率放到足够大，会发现，被固定死的内容的大小不会更改，这时候就需要另外适配。操作：把font-size固定死：在iPhone6/...原创 2020-03-13 09:07:58 · 268 阅读 · 0 评论 -
1像素问题 & 混合器@mixin & 设备像素比dpr & 媒体查询@media
1像素问题产生的原因：不同的设备像素比（dpr ，全称devicePixelRatio）导致的，比如dpr=2，那么在设备上就会占用2个物理像素去展示 css 里面的1个像素。如图，可在后台查看不同设备的dpr：解决办法：以上图灰色边线（border:1px solid #e8e8e8）为例，试着把1px的边线封装成一个方法，可以用伪元素：：before来模拟border。用媒体...原创 2020-03-12 17:52:13 · 557 阅读 · 0 评论 -
iconfont图标扩展
以阿里巴巴的矢量图标库iconfont为例：https://www.iconfont.cn/SVG上传生成图标1、打开网页，点击上传云端按钮，进入上传页面，之后按照提示操作。下载字体图标1、把想要的图标加入购物车。2、点击下载代码。3、解压后的文件列表。4、打开demo_index.html，里面是我们下载的图标的编码及详细使用方法，可自行根据下面提示步骤来做。5、下面...原创 2020-03-11 23:11:19 · 593 阅读 · 0 评论 -
flex弹性盒属性简介
本文参考：菜鸟教程CSS 参考手册声明：本文属性不全，什么时候用到，什么时候贴过来。display: flex;开启弹性盒旅程。flex简介：flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。...原创 2020-03-11 20:26:57 · 193 阅读 · 0 评论 -
dragstart&dragover&drop 拖放图片到区域
知识点：dragstart事件：当用户开始拖动一个元素或者一个选择文本的时候 dragstart 事件就会触发。dragover事件： 当元素或者选择的文本被拖拽到一个有效的放置目标上时，触发 dragover 事件(每几百毫秒触发一次)；这个事件在可被放置元素的节点上触发。drop 事件：当一个元素或是选中的文字被拖拽释放到一个有效的释放目标位置时，drop 事件被抛出。<!-...原创 2020-03-07 00:23:31 · 1657 阅读 · 10 评论 -
canvas实现橡皮擦
抽奖的时候后见过，类似于刮刮乐。相关知识点：context.arc(x,y,r,sAngle,eAngle,counterclockwise);参数：圆的中心的 x 坐标， 圆的中心的 y 坐标， 圆的半径，起始角，以弧度计（弧的圆形的三点钟位置是 0 度），结束角，以弧度计，可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。context.clip...原创 2020-03-07 00:02:51 · 2339 阅读 · 0 评论 -
canvas实现放大镜
简单实现商品放大镜我们先来简单实现下放大镜，嗯嗯…电商项目的商品详情的放大镜，差不多就是下面这个样子吧。<canvas id="canvas1" width="600" height="337.335"></canvas><canvas id="canvas2" width="600" height="337.335"></canvas>&l...原创 2020-03-06 23:29:02 · 340 阅读 · 0 评论 -
canvas二次、三次贝赛尔曲线 绘制气泡&圆角矩形&立体桃心
绘制气泡二次贝塞尔曲线canvas quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。quadraticCurveTo(cpx，cpy，x，y) 贝塞尔控制点的 x 坐标，贝塞尔控制点的 y 坐标，结束点的 x 坐标，结束点的 y 坐标。提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结...原创 2020-03-06 14:15:49 · 845 阅读 · 0 评论 -
canvas绘制方块&图表&动态图表&画板
绘制一个简单的方块儿这个方块可以自行移动。注意：绘制颜色一定要在绘制矩形之前。<canvas></canvas>var canvas=document.querySelector("canvas");canvas.width=400;canvas.height=200;var ctx=canvas.getContext("2d");//2d绘图var...原创 2020-03-05 21:32:02 · 791 阅读 · 0 评论 -
地理定位&网络&全屏（简简简介）
地理定位、网络、全屏地理定位获取定位是一个异步过程。谷歌浏览器是不被允许访问我们的地理位置的，可以用火狐试一下。下面可以看到地理位置的经纬度，然后我们可以尝试调用百度地图提供的API接口，输入经度、纬度，就可以显示位置。navigator.geolocation.getCurrentPosition(function(position){ // 经纬度 console...原创 2020-03-05 14:07:51 · 106 阅读 · 0 评论 -
高光小球（径向渐变&mousemove事件）
可以使用CSS3的径向渐变来做一个有高光的小球，然后这个小球看起来就非常立体了。<style> .ball{ width: 100px; height: 100px; border-radius: 50%; background-color: tomato; position: absolute; ...原创 2020-03-05 13:54:31 · 345 阅读 · 0 评论 -
CSS超出显示省略号（单行&多行）、自动换行、强制不换行、强制断行
https://www.runoob.com/w3cnote/css-nowrap-break-word.html原创 2020-02-29 16:34:53 · 1072 阅读 · 0 评论 -
垂直居中的又一种方法（补充）
垂直居中之前我说line-height只能让文本居中，多次练习后，我发现我错了 o(╥﹏╥)o，他是可以让内联元素上下居中的。只要：父元素line-height==height子元素display:inline-block; /*只要是内联元素就OK了 */vertical-align:middle;你也可以再给父元素加上text-align:center;可以同...原创 2019-12-24 19:46:33 · 104 阅读 · 0 评论