关注
分享
HIES
这个作者很懒，什么都没留下…
展开
-
学会使用box-sizing布局
关于CSS重要的一个概念就是CSS盒子模型。它控制着页面这些元素的高度和宽度。盒子模型多少会让人产生一些困惑，尤其当涉及到高度和宽度计算的时候。真正盒子的宽度(在页面呈现出来的宽度)和高度，需要加上一些其它的属性，例如： padding + border + width= 盒子的宽度 padding+ border + height = 盒子的高度 这看起来并不是那么直观，那么我们看一...转载 2019-07-01 20:31:11 · 197 阅读 · 0 评论 -
html5网页录音和语音识别
背景在输入方式上，人们总是在追寻一种更高效，门槛更低的方式，来降低用户使用产品的学习成本。语音输入也是一种尝试较多的方式，有些直接使用语音（如微信语音聊天），有些需要将语音转化为文字（语音识别）。接下来的内容是一次在pc浏览器上进行语音识别输入的一种尝试。 ### 实现 调研阶段，chrome是支持语音识别的。它支持了一系列的接口，可以进行语音识别。参考HTML5的Speech API相关标准...转载 2019-07-11 23:39:58 · 3923 阅读 · 1 评论 -
微信H5录音实现
前提用过微信JSSDK的童鞋都应该知道，使用它需要先在公众号上绑定安全域名、并且实现权限验证逻辑，具体细节可以参阅官方文档。做好了上述准备工作，在我们的页面中引入SDK的js，并且部署到安全域名下，即可调用API。接口列表 开始录音接口 wx.startRecord(); 停止录音接口 wx.stopRecord({ success: function (r...转载 2019-07-11 23:36:55 · 4075 阅读 · 1 评论 -
html5获得麦克风音量
网上的很多文章转载过程没有标注时间，说是safari不能调用getUserMedia，访问Can I Use查看兼容性的时候，发现新版本是可以。-----原文地址：https://blog.csdn.net/xiangyuecn/article/details/80344614以前在前人基础上重复造了一个网页录音的轮子，顺带把github仓库使用研究了一下，扔到了github...转载 2019-07-11 23:34:31 · 2519 阅读 · 0 评论 -
使用CSS3 Flexbox布局
本文由大漠根据Helen Emerson的《Using the CSS3 flexbox layout》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://helephant.com/2013/03/23/css3-flexbox-layout，以及作者相关信息——作者：Helen Emerson——译者：大漠...转载 2019-07-01 20:31:23 · 133 阅读 · 0 评论 -
移动端页面自适应解决方案—rem布局-（旧方案）
rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了----其实这种自适应方案是一种“等比例缩放”,在手机上会随屏幕大小而变化,但是在ipad上面图标、间距会过大,,, 这里推荐rem布局(进阶版) 1 (function (doc, win) { 2 var docEl = doc.documentElement, 3 r...转载 2019-06-30 22:36:10 · 223 阅读 · 0 评论 -
移动端页面自适应解决方案—rem布局(进阶版)
该方案使用相当简单，把下面这段已压缩过的原生JS（源码已在文章底部更新，2017/5/3） 放到 HTML 的 head 标签中即可（注:不要手动设置meta标签viewport，该方案自动帮你设置）<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id...转载 2019-06-30 22:33:44 · 1407 阅读 · 0 评论 -
实现div里的img图片水平垂直居中
body结构<body> <div> <img src="1.jpg" alt="haha"> </div></body>方法一：将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。<...转载 2019-06-30 22:03:02 · 872 阅读 · 0 评论 -
CSS怎么设置垂直居中？
一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：p { height:30px; line-height:30px; width:100px; overflow:hidden; }二、内边距（padding）法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂...转载 2019-06-30 21:54:33 · 8566 阅读 · 0 评论 -
CSS中背景图片的background-position中的left top到底是相对于谁的？
首先我们来看一下盒模型：盒模型从外到内依次为：margin-box,border-box,padding-box,content-box.现在我们来解答一下我们我们遇到的第一个问题，及background-position中的left top是相对于哪个box。答案是相对于padding-box的外边沿。下面的HTML代码和CSS代码分别实现给一个class=“myDiv”的容器设...转载 2019-06-30 21:37:20 · 705 阅读 · 0 评论 -
前端开发技术路线图(Roadmap)
前端开发是创建Web页面或app等前端界面呈现给用户的过程。前端开发通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CS...转载 2019-07-04 23:08:08 · 3071 阅读 · 0 评论 -
微信小程序-获取登录用户信息和openId
微信小程序授权一般可以获取用户的openid、昵称、头像、用户所在省和市、性别第一步：调用wx.login获得code，后台接口用code去微信服务器得到openId第二步：用open-type="getUserInfo"这样的button得到userInfo，包含了用户的头像、昵称等信息，但没有openId①、接着是获取用户openid，需要用到微信的wx.login函数 ...转载 2019-07-13 17:27:03 · 385 阅读 · 0 评论 -
CSS浏览器兼容性的4个解决方案
为什么会有浏览器兼容性问题还不是因为浏览器厂商太多了！Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9...360安全浏览器，qq浏览器，世界之窗，TT，搜狗，opera，maxthon（傲游）……关键是不同厂商，甚至同一厂商不同版本，对同一段CSS的解析效果也不一致，这就导致了页面显示效果不统一，也就带来了兼容性问题。多么希望Chrome能够...转载 2019-07-01 21:28:25 · 11319 阅读 · 0 评论 -
glowing-blue-input-highlights
input[type=text], textarea { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; ...转载 2019-07-01 21:14:36 · 93 阅读 · 0 评论 -
60个有用CSS代码片段
1、垂直对齐如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑：.verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-...转载 2019-07-01 21:10:08 · 228 阅读 · 0 评论 -
20个编写现代CSS代码的建议
本文翻译自Danny Markov的20-Tips-For-Writing-Modern-CSS一文。本文归纳于笔者的Web 前端入门与最佳实践中CSS入门与最佳实践系列，其他的关于CSS样式指南的还有提升你的CSS姿势、Facebook里是怎样提升CSS代码质量的。本文更偏向于样式使用技巧，前两篇偏向于代码风格与规范。明白何谓Margin Collapse不同于其他很多属性，盒模...转载 2019-07-01 20:57:13 · 86 阅读 · 0 评论 -
reset.css的引入
一、关于reset.css因为不同的浏览器默认的样式不同，为了避免页面出现浏览器差异，所以要初始化样式表属性。使用通配符*并不可取，因为会遍历到每一个标签，大型网页会加载过慢，影响性能。所以在着手项目开始前，我们需要引入reset.css，将所有html标签的默认样式统一化。推荐一个下载reset.css的网站：https://cssreset.com/，里面还有一些normalize.c...转载 2019-07-01 20:47:49 · 2433 阅读 · 1 评论 -
HTML5操作麦克风获取音频数据（WAV）的一些基础技能
原文地址：https://www.cnblogs.com/shihuc/p/9703508.html-----基于HTML5的新特性，操作其实思路很简单。首先通过navigator获取设备，然后通过设备监听语音数据，进行原始数据采集。 相关的案例比较多，最典型的就是链接：https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio...转载 2019-07-11 23:42:13 · 2109 阅读 · 0 评论