weixin_40098371的博客

此方案是度娘查询到的，忘了是哪个网址了if( window.navigator &&window.navigator.msSavaOrOpenBlob ) {navigator.msSavaBlob(new Blob([req.data],name）);}else {let url = window.URL.createObjectURL(new Blob([re...

众所周知，当一个DIV 或者其他元素的定位设置为绝对定位时，这个div就脱离了文档流。但是此时的位置情况呢？1.div设置定位方式为绝对定位，但是top缺省的情况下，这个div的位置还在原文档流的位置，相当于原地浮起。比如说，它前面有同级元素。那它此时的定位为这个同级元素下面。即默认的文档流中的位置。2.div设置定位方式为绝对定位，但是top设置的情况下，这个div的位置则是相对于父元素的定位。...

昨天拿了一个页面练手，刚写了三行，碰见一垂直居中问题。没有问题的代码截图如下：html:css:html,body,div,ul,li,span,img,input{ padding: 0; margin: 0; font-size: 72px;    box-sizing:border-box;}div{ display: inline-block;}#wrapper{   ...

最近看设计稿要实现，遇到的问题：1.input聚焦时，出现黄色的边框：input样式中添加：outline: none;2.input中placeholder的样式，突然发现没有思路了，百度了一下，找到对应的资源，链接放上，供大家参考：http://www.jb51.net/html5/171764.html作者讲的很详细。关于用到的双冒号和单冒号的问题，也找到一篇文章，写的也很详细，供参考：ht...

今天在写html布局是，出现这样一种现象，如图所示：模拟器设置宽度为720px，背景图片宽度为720px,但是显示时在盒布局模型可以看出来，宽度变成了980px;最终解决方案：在html页面中添加：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scal...

如图：我要实现5张宽度为180的图片在720宽度的屏幕上的均匀显示。每张图片的宽度占屏幕宽度的20%.此时需要将图片宽度多余的部分进行代码裁剪。裁剪方案（此方法只适用于背景图）：在背景图的裁剪中，有一个属性可以实现background-position.设置background-position：center center ;意思是图片的中心为此标签的背景中心。备注：设置为：background-...

在进行开发是，应为效果图要实现每个页面显示2.5个滑动项的滑动效果。鉴于swipper的滑动效果写的不错，就采用了swipper的方案。在静态页面中使用时，没有发现问题。添加数据的时候，竟然出问题了。。。滑动不了。。。数据生成正确啊。。。。各种搜索，各种查询。终于找到可能的原因。swipper扫描数据项比数据加载早。如何解决，swipper实际上已经给出了解决方案。...

今天在做项目中（移动端页面 效果图为宽度720px    设置html font-size:72px），突然间被一个小问题困扰了一下下，不知道大家有没有遇到过：ul高度100px li中的背景图片宽高均为12px.li的位置距离ul的下部高度26px.此时要实现图片效果，我采用的办法是利用line-height.设置ul的样式为：{    position: absolute;    z-inde...

今天在实现后台已经封装号的模糊查询接口的搜索效果时，我想要实现的效果是，搜索input在软键盘输入完成点击“搜索”，发送http请求。此要求就需要实现软键盘键值的监听与获取。在网上搜索结果（http://www.jb51.net/article/119743.htm）后自己试验成功。先贴出自己的代码，供参考。html：<header id ="mheader" ng-controller =...

在使用angular.js请求跨域文件时出现了跨域问题，百度了很多文件的解释都相对模糊，最后在搜索视频文件时，看到了开课吧石川老师的视频上的讲解，解决了此项问题。关于低版本的写法和高版本的写法，都有讲解。大家可以去搜索看一下。这里的记载是我重新整理的，附上本人的代码块供参考。HTML：跨域请求数据部分的js:data.js数据：讲解部分复制粘贴石川老师的文件（原谅我的懒）：v1.5.*  $htt...

在前端跨域时，出现跨域访问接口是经常的事，我在做angular访问时，现在试验过的跨域方法有两种：jsonp和nginx反向代理。其中的jsonp 比较简便一点：data.js但是在处理post请求时，这种方法显然不太合适。此时nginx跨域方案算的上是一种比较优质的方案。1.anginx.conf配置文件在http 下面的server中，添加代理项：前端代码中的请求也需要修改：HTML:<...

效果图：思路：1.本效果图的布局相对简单，唯一需要特别注意的就是中间20px 的分割线。我想了两种方案（border-radius和before after两种方案），测试结果只有这一种方案可行。此方案是将频道回放和相关推荐的宽度均设置为屏幕一般的宽度-中间的间隔50px-中间分割线宽度的宽度2px。然后分别用before 、 after给两部分添加border 宽度为1px。此时要注意befor...

$.param()的含义:序列化对象，返回字符串var params = {a:300,b:300};var str = $.param(params);console.log(str);输出结果为：a=1900&b=1900

转载：https://jingyan.baidu.com/article/148a1921c9dbf24d71c3b11f.htmlChrome浏览器如何开启Ajax跨域访问调试？听语音|浏览：1153|更新：2017-10-06 09:38|标签：CHROME 浏览器 1234567分步阅读由于浏览器安全性限制，Ajax是不能跨域访问的，而我们在日常开发工作中，经常会出现本地开发环境需要访问其他...

//解决同一个页面出现两个module（ng-app = "medule名称"） 时使用 //默认状态下，一个页面智能自动加载第一个module ，如果要加载两个或者多个module，则除 //第一个medule之外，其他都要手动添加，手动头添加的方法就是下面这一句话 angular.bootstrap(document.getElementById("hot"), ['mhotVide...

在项目中遇到一种情况：<div id="hot" class="swiper-container hot" ng-app ="mhotVideo" ng-controller = "hotVideosctrl" ng-click="detail()"> <ul class="swiper-wrapper"><li c

在页面布局中，margin用到的次数很多，场景也很对，但是你真的理解它，知道怎么运用他吗？我有很多疑惑，最终在这里找到答案。原文地址深入理解css中的margin属性　　之前我一直认为margin属性是一个非常简单的属性，但是最近做项目时遇到了一些问题，才发现margin属性还是有一些“坑”的，下面我会介绍margin的基本知识以及那些“坑”。这篇博文主要分为以下几个部分：margin--基础知识...

美团外卖有一个效果，实际感觉挺不错的，针对此效果，总结并实现了两个思路。页面布局情况：htmlcss <div id="left"> <ul> <li id="left_0">分类一</li> <li id="left_1">分类二</li> <li id

在JQ中如果要为某一项添加CLASS的话，直接使用addClass 就可以实现。那么angular要实现此项效果，就需要用ng-class。关于ng-class的使用说明，在W3C 中有说明，此处不再赘述。此处只针对我使用的部分进行说明。ng-class 可以采用key-value 的形式实现class的添加。形如：ng-class = '{key:value}'其中key为需要添加的class ...

页面布局时，出现一行两个不同宽度的div在一行上。如下图：通俗的做法的是什么呢？方法千千万，我独爱float。好吧，又爱又恨的float我用了。横向的效果出来了，完美吗？     html:                       <div id="videoMsg">     <div id="videoTitle">战神</div>    ...

最经再看ES6 promise的时候，发现书本的例子中setTimeout 居然有三个参数，瞬间全蒙。难道阮一峰大侠也犯错了？进过资料查询，是自己孤陋寡闻了。setTimeout 居然支持三个参数，或者三个以上的参数。setTimeout的第三个以后的参数是作为第一个function 的参数传进去的。...

今天在研究ES6的时候，看到unicode 编码的时候，突然间转到死胡同，原来手到擒来的进制转化问题，突然间晕了，为此专门又看了看计算方法。十进制：23383   十六进制：5B57整数部分：十进制转化为16进制，算法十进制数除以16得到的余数放最低位，得到的商除以16的余数放倒数第二位，紧接着再用此时的到的商除以16得余数放第三位。以此类推。小数部分的计算：比如0.9032转化成16进制小数，0...

转载博客园的文章，原文请看这里RegExp 正则表达式（regular expression）的缩写语法:显式构造函数 var rg= new RegExp(pattern, attributes)隐式构造函数 var rg= /pattern/attributespattern: 字符串attribute: i, g (i不区分大小写的匹配， g全局匹配，即查询所有匹配项而不是在匹配到第一个后就...

今天在进行画布学习的时候，出现了下面的问题：代码写的是画的圆形。结果却是椭圆形。经过讨教和资料查询，发现为题出现在上面的画布定义上面。修改代码后，问题消失。在进行跨步宽度和高度定义的时候，需要搞清楚两个概念：1.画布的宽和高（ps新建画布的宽和高）；2.画布所在画板的宽和高（例如ps打开后的窗口）；默认的画板、画布的宽和高是都是300*150的。但在画布上设置style属性的话，相当于把画板的宽和...

字体图标(iconfont) 后缀名svg1.字体图标可以做透明、旋转等图片可以做的事情；2.本质是文字，可以很随意改变颜色、产生阴影、透明效果；3.本身体积小，携带的信息没有削减；4.几乎支持所有浏览器；5.移动设备必备；使用流程：1.ui设计字体图标效果图（svg）工具：2.前端人员上传生成兼容性字体文件包；3.前端人员下载兼容性...

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>子元素宽度100%的继承情况</title>    <style>    /*父元素是默认的情况下*/      

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>旋转轮播图</title>    <style>    body{        perspective

转载自：哪些CSS属性会被子元素所继承 文本color(颜色，a元素除外) direction(方向) font（字体） font-family（字体系列） font-size（字体大小） font-style（用于设置斜体） font-variant（用于设置小型大写字母） font-weight（用于设置粗体） letter-spacing（字母间距） line-h...

<div class="hot w">        <div class="hot_l">            <h3>热门公开课</h3>            <ul>                <li>                    <img src=&

纠结了我一天的效果终于实现了。仿照网站的在输入内容时会有智能记忆及推荐选项显示。修复了好多没有考虑到的bug。代码如下： <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>下拉框提示</title&

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>数组去重</title>    <script>    思路：    1.遍历数组中的元素；    2.将数组中

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>判断字符串中是否出现了数字</title>    <script>        var str = "！

今天在做如题目说的效果（如下代码）时，发现在时间注册函数中判断循环值出现问题。所有的节点的点击事件后都是第一行高亮。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>

安装vue-cli 的方法1.安装nodejs2.确认nodejs版本在4.4.5以上；3.输入命令 npm install -g vue-cli   检查安装：输入命令vue4. 进入放项目的路径5.输入命令 vue list   查看可使用打包工具6.创建webpack打包工具项目 sell7.输入命令 vue init webpack sell8.输入项目名称 sell9....

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>水果选择</title> <style> select { width: 300px; height: 300px;

1.鼠标经过small，显示遮盖层和大图；离开时隐藏；2.鼠标在盒子中移动时，遮盖层和鼠标一起移动；3.遮盖层移动时，大图移动；须注意点：1.处理小图时：鼠标在遮盖层的中间，所以遮盖层的左上角的坐标应该在鼠标在盒子中的位置，减去一半的遮盖层宽度、高度；代码为：            鼠标在盒子中的位置            var left = e.clientX+...

实现思路：关键点：利用浮动元素变为行内块元素，能自动换行的特点。自动获取每一个子项 的div的高度。              本例中图片编号001-019 所以在代码中进行了随机处理；注意点：如果不是在事件中定义，需要在window.onload中定义，如果不定义，应为获取高度时，图片还没有加载完成，所以获取的数值会报错；1.设置子项的宽度的和不超过父元素；2.设置图...

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>模拟导航条</title> <style> #box{ position: relative; width: 3

相关介绍链接：CSS3中的mix-blend-mode和background-blend-modecss mix-blend-mode 混合模式<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document&lt

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script&amp