html/css
文章平均质量分 53
facing-screen
知识,是一种信仰。(此博客为个人日志,如有帮助点赞是美德;如有谬误,欢迎斧正。)
展开
-
css给dom插入/追加文字/内容
A.使用选择器来插入内容h2:before{content:"前缀";}h2:after{content:"后缀";}B.指定个别的元素不进行插入h2.sample:before{content:none;}2. 插入图像A.在标题前插入图像文件h2:before{content:url(anwy.jpg);}B.将alt属性的值作为图像的标题来显示(用不了)img:after{content:attr(alt);display:.转载 2021-04-27 11:16:06 · 1687 阅读 · 0 评论 -
前端网页/html播放mp4、avi、flv等视频,兼容ie7/7+ 调用flash/windows media player播放视频
废话不多说,先总结下亲测的几种方法:video标签法(最常用,兼容现代浏览器、ie9/9+;支持格式:MP4、ogg、webm) flash大法(兼容大多数浏览器、ie7/7+,逐渐被淘汰,chrome目前已经默认禁用flash;支持格式:MP4其他没测) wmp大法(全称windows media player,只有ie7/7+支持;支持格式:MP4、avi其他没测)注:flash方法播放视频时flvplayer.swf文件要确保能用,我就被这货坑了这里给一个: https://pan.ba原创 2021-03-23 17:13:58 · 11121 阅读 · 5 评论 -
元素垂直居中、viewport、meta、文本溢出显示省略号...
| 原文:面试的信心来源于过硬的基础https://segmentfault.com/a/1190000013331105?utm_source=channel-newest1、 viewport <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maxim...转载 2018-02-25 15:33:17 · 396 阅读 · 1 评论 -
[笔记]image对象如何添加class
1、image对象可以添class,但不能以属性.class的方法添加,而因该把他当成一个节点2、JS添加和删除class名 添加:节点.classList.add("类名"); 删除:节点.classList.remove("类名");添加有下面这三种简单语句。 document.getElementsByTagName('body')[0].className = 'sno...原创 2018-02-25 00:36:12 · 2478 阅读 · 0 评论 -
前端自动打包工具webpack的安装和使用
一、准备要使用webpack工具,最好了解一些基础的文件目录操作的命令行,win all里的一些常用的命令行http://blog.csdn.net/qq_36110571/article/details/79338914二、安装webpack先去node官网下载安装node.js,然后win+R cmd 运行命令提示符;输入npm webpack -g # 回车等...原创 2018-02-19 23:33:19 · 1968 阅读 · 0 评论 -
Web前端开发规范手册(有点老,仅供参考)
一、规范目的1.1 概述为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后可以更改此文档.二、文件规范2.1 文件命名规则 文件名称统一用小写的英文字母、数字和下划线的组合,其中不得包含汉字、空格和特殊字符;命名原则...转载 2018-02-25 22:11:31 · 1368 阅读 · 0 评论 -
面试的信心来源于过硬的基础 viewport、跨域、 渲染优化、数组乱序、盒子垂直水平居中、meta、消除transition闪屏、JS 判断设备来源
原文:面试的信心来源于过硬的基础在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等,想着在开年来换一份工作来重新开始自己,那么 你 准备好了吗?下面是本人整理的一份面试材料,本想自己用的,但是新年第一天 公司突然给了我个惊喜,涨工资了!!!1、 viewport<meta name="viewport" content="width=device...转载 2018-04-19 21:38:01 · 418 阅读 · 0 评论 -
移动适配方案的进化-茴字的四种写法
原文:移动适配方案的进化https://segmentfault.com/a/1190000014309664前端适配从UI展现层面上:我们期望不同尺寸的设备,页面可以自适应的展示或者进行等比缩放,从而在不同的尺寸的设备下看起来协调或者差不多。3.1 Rem的解决方案DPR一致时,px在不同的屏幕尺寸上会展示为定宽,这就导致我们的页面可能会出现滚动条或者占不满的情况。而...原创 2018-04-28 23:24:11 · 176 阅读 · 0 评论 -
淘宝触屏版适配代码,趴下来以后写移动端页面的时候可以参考下
顺便说几个属性:1、window.devicePixelRatio 它的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRa...转载 2018-02-03 22:41:08 · 1255 阅读 · 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">注意:viewport 后面加上minimal-ui 在safri 体现效...转载 2018-02-26 11:32:13 · 1047 阅读 · 2 评论 -
[笔记]这些超级好用的html标签和css属性
1、sup、sub 上标、下标2、伪类属性的love hate 原则 l v h a :link :visited :hover :active3、表格边线合并:border-collapse:collapse;4、不占位隐藏:display:none;站位隐藏:visibility:hidden;5、行内元素的对其方式img { vertical-align:text原创 2018-01-11 23:28:59 · 205 阅读 · 1 评论 -
Flex布局教程:语法篇--css中的display:Flex
先用一句话秒懂display:Flex;这句css代码,如图:下面引用篇文章详细说——原文作者:阮一峰 日期:2015年7月10日网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C...转载 2017-08-15 00:31:36 · 1842 阅读 · 0 评论 -
话说神奇的content="IE=edge,chrome=1"的meta标签内容
这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式(比如人见人烦的IE6),以此来解决部分兼容问题,例如模拟IE7的具体方式如下:< meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />但令我好奇的是,此处这个标记后面竟然出现了chrome这样的值,难道I...转载 2018-01-26 22:29:24 · 211 阅读 · 0 评论 -
html中的em和rem到底该如何使用,自适应效果中如何确定文字大小/字号?
如今手机屏幕繁多,自适应效果中如何确定文字大小/字号?em rem vm vw vh你都了解吗? 先说说em和rem em:继承父级的,假设html的font-size默认为16px,body字体大小定义为50%,那么在body里字体大小就是1em=8px了。可当你又定义了一个div,然后把字体设置成了50%,请问,现在div下的1em等于多少?因为继承了父级的值,现在这个di转载 2018-02-03 18:42:47 · 1002 阅读 · 0 评论 -
让IE6、IE7、IE8支持CSS3的圆角、阴影样式-最好的插件
想做个页面用到css3的圆角和阴影效果,但ie浏览器不支持,之前也听说有插件可以实现,周六在网上找到了一个方法,原文如下:但凡是前端工程师,都知道IE6,IE7,IE8不支持、或者不完全支持CSS3的属性。CSS3 有很多很强大、绚丽的效果,比如,圆角,阴影,渐变透明,渐变背景,等等。因为IE6时代,没有什么标准,而因为各种原因,IE6用户几乎不会更新IE版本。让IE6,IE7,I原创 2017-07-26 11:39:33 · 549 阅读 · 0 评论