信微信聊天窗口输入框实现方案

微信相信你不陌生了,即使你天天用并且你也从事前端工作,但如果你没有遇到过这样的需求,你是不会留意到微信聊天窗口底部的那个输入框里的用户体验优化细节。如果我说对了,那么你可以先打开微信,然后输入很多很多内容,看看那个输入框会怎么变化。 如果你觉得这很麻烦,好,我用文字直播。当你输入的内容超过一行时,输入框的高度会自己适应你的内容以容下两行内容,但当你输入的文字达到一定的行数时,...

2017
06-13

文字换行处理 word-wrap word-break white-space 用法及区别

作为前端的你,浏览器默的文字处理方式估计不用我再多说一句了。这里有两种情况我们需要知道的,但在实际中出现的机率不大,请看图: 前面的换行是因为我加了<br>标签,第一行我们不用管,只需关注第二行文字,第二行文字为什么会超出盒子? 我猜:在处理文字的时候浏览器会把它们看成一个整体(如:单词),并且不会拆分它们,一行又显示不完全,那怎么办呢?只能像上面那样处理了。于是就会出现了...

2017
03-08

移动端用滚动条属性实现左右滚动效果

前言 移动端左右滚动,不是我们常说的图片切换,只是实现了通过手指实现内容的左右滚动。现在很多app 都会有这样的效果。在线 Demo :http://yunkus.com/demo/mobile-use-scroll-bar-property-realize-horizontal-scroll/。注意:浏览器得切换到手机模式查看效果哦! 入门代码 HTML 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

2017
03-06

text-overflow:ellipsis 文字超出省略号代替不起作用解决方法

前言 这个属性想必你平时也用了不少,特别在屏幕小得可怜的移动端。但有时候你会发现它怎么都没效果。思前想后也没发现自己做了什么对不起它事,但他就是对你不理不踩。 场景重现 无效场景一 现在我们来一个正常的例子 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html;charset=utf-8"> <meta name="viewport" content="w...

2017
01-11

前端开发中常用的 CSS 样式整理(经历之谈)

这是一些经验之谈,虽然本博客里的文章几乎都可以称得上是经验之谈,但本文章更接地气,更实用,你可以把它当做一个字典来用,因为下面所收集的css样式真的很常用。 CSS文件中引入CSS文件 @import url("base.css");  角标实现 div{ vertical-align:super } 小三角实现 .triangle{ display:block; width:0; height:0; border-width:0 8px 8px; border-style:solid; border-colo...

2016
12-29

CSS 水平垂直居中方法大全

前言 居中一个极其常见的需要,你应该绝不会陌生,但下面将要说的方法可能会有你不知道的。 下面的方法统一的HTML代码如下: <div class="demo-wrap"> <div class="demo-center"></div> </div> position+auto .demo-wrap{ width: 300px; height: 300px; background: #eee; position: relative } .demo-center{ width: 200px; height: 2...

2016
10-31

CSS:清除浮动的方法(技巧)有哪些?

前言 浮动相信在平时的项目开发当中你一定用了不少,也遇到了不少。也知道有可以清除浮动的最常用的方法。那么下面我就给大家分享下我所知道的可清除浮动的方法。 清除浮动方法 float 法 也就是给父元素一个浮动,以达到清除浮动的效果。 /* 样式 */ .wrap-clear{border:1px solid #ccc;float: left;} .left-column{float: left;border:1px solid teal;} <div class="wrap-clear"> <div...

2016
10-19

Meta标签里的 apple-mobile-web-app-capable 作用

apple-mobile-web-app-capable的存在让本来屏幕就小的移动设备来说,可谓是福音呀。他可以让用户的屏幕变得“更大”。其实他就是通过删除苹果默认的工具栏和菜单栏,来给用户腾出更多的空间从而让网页得到更好的展现,让iphone达到屏幕增大的效果。 他的用法也好简单: <meta name=”apple-mobile-web-app-capable” content=”yes” /> 其实针对iphone的meta标签属性不仅仅就只有这个,下面我们再来看别外...

2015
09-22

Meta 标签里的 format-detection 含义及作用

format-detection 翻译成中文就是格式检测的意思,他是用来检测页面里的一些格式。如果你是做移动开始的应该常常会遇到这种情况,明明就是一串数字,没添加点击拔号的,但当你用 iphone 时默认给你加上了,明明就是一个邮箱地址,没点击发送邮件的,明明是个地址,点击却跟到一个一地图中,那么 format-detection 正好是为你解决这些问题的好帮手,不信?请往下看! meta的format-detection属性主要是有以...

2015
09-22