摘要: 问题: 在codepen上写了一个响应式页面,调试的时候没有问题。结果放到网站上,在手机上打开之后竟然和在电脑中的布局是一样的。 查阅资料之后知道响应式布局应该有这样一句话:<meta name="viewport" content="width=device-width,initial-scale 阅读全文
posted @ 2016-11-22 23:07 马梦一 阅读(350) 评论(0) 推荐(0) 编辑
摘要: 效果: 自动循环播放图片,下方有按钮可以切换到对应图片。 添加一个动画来实现图片切换。 鼠标停在图片上时,轮播停止,出现左右两个箭头,点击可以切换图片。 鼠标移开图片区域时,从当前位置继续轮播。 提供一个接口,可以设置轮播方向,是否循环,间隔时间。 点击查看demo 对HTML、CSS的要求: 必须 阅读全文
posted @ 2016-11-21 15:41 马梦一 阅读(4604) 评论(0) 推荐(2) 编辑
摘要: 分析了两列自适应布局的实现思路后,会觉得三列自适应布局的实现原理其实和他一模一样,不过是多了一个盒子而已。 第一类,浮动在前: 方法一:float+margin 方法二:float+BFC 第二类,主要内容在前: 方法三:float+负边距+relative 这里和两列布局有些不同,在两列布局中,. 阅读全文
posted @ 2016-11-10 20:31 马梦一 阅读(607) 评论(0) 推荐(0) 编辑
摘要: 随便拿一个搜索引擎搜索一下“两列自适应布局”,都能得到很多种实现方法,这篇文章的重点是这些方法的底层逻辑是什么,他们是怎么得来的。 分析: 需要满足三个要求: ①两个盒子在同一行 ②右边的盒子需要占满剩下的空间 ③两个盒子不能重叠 这三个条件又分别有很多种实现方法(不考虑绝对定位): 组合起来,会有 阅读全文
posted @ 2016-11-05 20:53 马梦一 阅读(752) 评论(0) 推荐(1) 编辑
摘要: W3C规范在介绍margin时有这样一句话: Negative values for margin properties are allowed, but there may be implementation-specific limits. 于是,聪明的开发者们就发现了很多负边距的巧妙用法。 比 阅读全文
posted @ 2016-11-03 12:08 马梦一 阅读(3358) 评论(5) 推荐(3) 编辑
摘要: 概念: visual formatting model,可视化格式模型 visual formatting model,可视化格式模型 The CSS visual formatting model is an algorithm that processes a document and disp 阅读全文
posted @ 2016-10-30 21:12 马梦一 阅读(521) 评论(0) 推荐(1) 编辑
摘要: 前言: 面试的时候有点蒙,结束之后想想自己好像根本就误解了面试官的问题,因为我理解的这个问题本身就没有意义。但是当时已经有一些思路,但是在一个点上被卡住。 结束之后脑子瞬间灵光,想出了当时没有迈出的那一小步。所以不想计较这个问题本身的意义,单纯的想要把这个我理解错了的问题解决,就当是满足自己一个小小 阅读全文
posted @ 2016-10-29 10:10 马梦一 阅读(1847) 评论(7) 推荐(1) 编辑
摘要: 介绍了margin、padding、border的特点,重点分析了margin的折叠现象 阅读全文
posted @ 2016-10-22 23:01 马梦一 阅读(1797) 评论(0) 推荐(0) 编辑
摘要: 问题: 页面中有一个按钮,点击之后会更新网页中的一个盒子的内容。 Ajax可以很容易的满足这种无须刷新整个页面就可以实现数据变换的需求。 但是,Ajax有一个缺点,就是他不允许跨域请求资源。 如果我的代码在codepen上,我不能将我的数据放到codepen网站上,那么我只能放到我自己的服务器中,这 阅读全文
posted @ 2016-10-09 22:28 马梦一 阅读(2384) 评论(2) 推荐(3) 编辑
摘要: 背景: 想在自己的网站中有这样一个设计: 用户点击提交按钮之后,就会打开本地邮件客户端,并自动将他在输入框中输入的内容作为邮件的内容,像下面这样: mailto可以帮助实现这个功能。 简介: mailto是一种电子邮件协议,通过该协议可以创建一个指向电子邮件地址的超级链接,通过该链接可以在Inter 阅读全文
posted @ 2016-10-07 23:02 马梦一 阅读(5221) 评论(0) 推荐(1) 编辑