随笔分类 -  html/css

特殊符号大全，特殊字符、emoji符号收藏，可复制直接使用
摘要：收藏包含：图案符号、特殊符号、emoji符号、编号序号、数学符号、上标下标、标点符号、货币符号、箭头符号、国旗符号等 安利一个开发测试工具站：http://tools.71wm.cn 图案符号 ✐✎✏✑✒✍✉✁✂✃✄✆✉☎☏☑✓✔√☐☒✗✘ㄨ✕✖✖☢☠☣✈★☆✡囍㍿☯☰☲☱☴☵☶☳☷☜☞☝✍☚☛☟✌ 阅读全文
posted @ 2024-03-29 10:19 我的五年 阅读(209355) 评论(0) 推荐(1)
css给dom插入/追加文字/内容
摘要：A．使用选择器来插入内容 h2:before{ content:"前缀"; } h2:after{ content:"后缀"; } B．指定个别的元素不进行插入 h2.sample:before{ content:none; } 2. 插入图像 A．在标题前插入图像文件 h2:before{ con 阅读全文
posted @ 2021-04-27 11:16 我的五年 阅读(66) 评论(0) 推荐(0)
前端网页/html播放mp4、avi、flv等视频，兼容ie7/7+ 调用flash/windows media player播放视频
摘要：废话不多说，先总结下亲测的几种方法： video标签法（最常用，兼容现代浏览器、ie9/9+；支持格式：MP4、ogg、webm）flash（兼容大多数浏览器、ie7/7+，逐渐被淘汰，chrome目前已经默认禁用flash；支持格式：MP4、flv、其他没测）wmp（全称windows media 阅读全文
posted @ 2021-03-23 17:13 我的五年 阅读(535) 评论(0) 推荐(0)
移动适配方案的进化-茴字的四种写法
摘要：原文：移动适配方案的进化 https://segmentfault.com/a/1190000014309664 前端适配 从UI展现层面上： 我们期望不同尺寸的设备，页面可以自适应的展示或者进行等比缩放，从而在不同的尺寸的设备下看起来协调或者差不多。 3.1 Rem的解决方案 DPR一致时，px在 阅读全文
posted @ 2018-04-28 23:24 我的五年 阅读(20) 评论(0) 推荐(0)
面试的信心来源于过硬的基础 viewport、跨域、 渲染优化、数组乱序、盒子垂直水平居中、meta、消除transition闪屏、JS 判断设备来源
摘要：原文：面试的信心来源于过硬的基础 在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等，想着在开年来换一份工作来重新开始自己，那么 你 准备好了吗？ 下面是本人整理的一份面试材料，本想自己用的，但是新年第一天 公司突然给了我个惊喜，涨工资了！！！ 1、 viewport < 阅读全文
posted @ 2018-04-19 21:38 我的五年 阅读(19) 评论(0) 推荐(0)
移动开发webapp开发常用meta设置手机浏览器全屏模式，webappmeta
摘要：1、WebApp全屏模式： <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui"> 阅读全文
posted @ 2018-02-26 11:32 我的五年 阅读(88) 评论(0) 推荐(0)
Web前端开发规范手册（有点老，仅供参考）
摘要：一、规范目的 1.1 概述 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档. 二、文件规范 2.1 文件命 阅读全文
posted @ 2018-02-25 22:11 我的五年 阅读(50) 评论(0) 推荐(0)
元素垂直居中、viewport、meta、文本溢出显示省略号...
摘要：| 原文：面试的信心来源于过硬的基础 https://segmentfault.com/a/1190000013331105?utm_source=channel-newest 1、 viewport <meta name="viewport" content="width=device-width 阅读全文
posted @ 2018-02-25 15:33 我的五年 阅读(13) 评论(0) 推荐(0)
[笔记]image对象如何添加class
摘要：1、image对象可以添class，但不能以属性.class的方法添加，而因该把他当成一个节点 2、JS添加和删除class名 添加：节点.classList.add("类名")； 删除：节点.classList.remove("类名")； 添加有下面这三种简单语句。 document.getEle 阅读全文
posted @ 2018-02-25 00:36 我的五年 阅读(21) 评论(0) 推荐(0)
前端自动打包工具webpack的安装和使用
摘要：一、准备 要使用webpack工具，最好了解一些基础的文件目录操作的命令行， win all里的一些常用的命令行 http://blog.csdn.net/qq_36110571/article/details/79338914 二、安装webpack 先去node官网下载安装node.js， 然后 阅读全文
posted @ 2018-02-19 23:33 我的五年 阅读(36) 评论(0) 推荐(0)
淘宝触屏版适配代码，趴下来以后写移动端页面的时候可以参考下
摘要：顺便说几个属性： 1、window.devicePixelRatio 它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个 阅读全文
posted @ 2018-02-03 22:41 我的五年 阅读(7) 评论(0) 推荐(0)
html中的em和rem到底该如何使用，自适应效果中如何确定文字大小/字号？
摘要：如今手机屏幕繁多，自适应效果中如何确定文字大小/字号？ em rem vm vw vh你都了解吗？ 先说说em和rem em：继承父级的，假设html的font-size默认为16px，body字体大小定义为50%，那么在body里字体大小就是1em=8px了。可当你又定义了一个div，然后把字体设 阅读全文
posted @ 2018-02-03 18:42 我的五年 阅读(39) 评论(0) 推荐(0)
话说神奇的content="IE=edge,chrome=1"的meta标签内容
摘要：这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(比如人见人烦的IE6)，以此来解决部分兼容问题，例如模拟IE7的具体方式如下： < meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" /> 阅读全文
posted @ 2018-01-26 22:29 我的五年 阅读(27) 评论(0) 推荐(0)
[笔记]这些超级好用的html标签和css属性
摘要：1、sup、sub 上标、下标，直接看下面的例子吧 A<sub>2</sub> 4<sup>2</sup> 42 A2 2、伪类属性的love hate 原则 l v h a :link :visited :hover :active 3、表格边线合并：border-collapse:collaps 阅读全文
posted @ 2018-01-11 23:28 我的五年 阅读(19) 评论(0) 推荐(0)
Flex布局教程：语法篇--css中的display:Flex
摘要：先用一句话秒懂display:Flex;这句css代码，如图： 放个目录先： 目录 一、Flex布局是什么？ 二、基本概念 三、容器的属性 3.1 flex-direction属性(主轴的方向) 3.2 flex-wrap属性(如何换行) 3.3 flex-flow 3.4 justify-cont 阅读全文
posted @ 2017-08-15 00:31 我的五年 阅读(327) 评论(0) 推荐(0)
让IE6、IE7、IE8支持CSS3的圆角、阴影样式-最好的插件
摘要：想做个页面用到css3的圆角和阴影效果，但ie浏览器不支持，之前也听说有插件可以实现，周六在网上找到了一个方法，原文如下： 但凡是前端工程师，都知道IE6，IE7，IE8不支持、或者不完全支持CSS3的属性。 CSS3 有很多很强大、绚丽的效果，比如，圆角，阴影，渐变透明，渐变背景，等等。 因为IE 阅读全文
posted @ 2017-07-26 11:39 我的五年 阅读(9) 评论(0) 推荐(0)