John的专栏

接口返回字段包含换行符\n，但前端没有正常显示，百度大法后，添加white-space: pre-line，搞定！

CSS伪类选择器nth-child 选择3的倍数个元素写法web开发中，经常有对列表的3倍数列表项单独设置样式的需求。ul li:nth-child(3n+3) {color: #ccc;}上面的css是干什么用的，它就是在无序列表里面选择是3倍数的列。也就是第3个，第6个，第9个等等。...

上一周在制作某个移动端项目的时候，发现当我们点击链接，整个标签会出现颜色块并会闪烁一下，不仅影响美观，而且会极大降低了用户体验。在发现了这个情况之后，与宝哥两个人针对这个问题，展开了激烈的讨论。我当时就想，这个是不是因为系统的问题造成的bug呢？当时就找同事借了点机子进行了一番测试，得出来的结果：不管是安卓还是IOS系统，都会触发这个问题。在多个网站测试之后，发现百度的链接点击时也会产生有颜色块(

一、display:table-cell属性简述display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用（写于2016年8月24日：时代在变，当下，是时候登上舞台了）。我们都知道，单

Vivify 是由纯 CSS 写的动画库，该库提供了超过 50 种动画效果供你选择。你只需要将 Vivify 的类添加到相应的元素，即可使其产生动画效果，并且添加 infinite 类后，动画就可以循环播放了。项目地址：【传送门】预览地址：http://vivify.mkcreative.cz/

作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定

<style type="text/css">.scrolldiv{height: 85%;overflow: hidden;overflow-y: scroll;}.scrolldiv::-webkit-scrollbar-track-piece { background-color: #FFF; border-left: 1px solid #FFF;}.s...

直接进入主题！一、脱离文档流元素的居中方法一：margin:auto法CSS代码：div{ width: 300px; height: 300px; position: relative; border: 1px solid #465468; } img{ position: absolute; marg...

byzhangxinxufromhttp://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=600目前有有关此文章的介绍（这里），但是只是部分内容。本文为全文翻译，并提供其他的一些页面性能优化方面的资源，希望能对reflow的进一步认识有所帮助。我之前还翻译过一篇关于reflow的文章，您有兴趣可以看看（点击...

本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。1. 问题的引出最近阅读白树的博文《移动web资源整理》时，他在博文中有一段指出，如果html5要适应各种分辨率的移动设备，应该使用rem这样的尺寸单位，同时给出了一段

一：绝对定位position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性

没有就不能活的 53 个 CSS 技术对新手实用的 20 个 CSS 建议快速编写更好 CSS 代码的 5 种方法50+ 个 CSS 创意案例和教程101 个 CSS 小贴士、教程和范例CSS 代码片段：15 个邪恶的技巧15 个必学的 CSS 技巧8 个 CSS 链接 链接小贴士8 个超简洁 CSS 小贴士为更好的 CSS 代码：70 个专家级点子30+ CSS 速查表和快速指南CSS 大师的

HTML中的input元素、button元素、option元素等都具有一个disabled属性。 当赋予该属性时该元素将变得不可交互，如下代码所示： Html代码  input type="button" disabled="disabled" value="测试按钮">  其中属性值“disabled”可以替换成任何的其它单词甚至是“enabled”（

letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白。letter-spacing和word-spacing这两个属性都用来添加他们对应的元素中的空白。letter-spacing添加字母之间的空白，而word-spacing添加每个单词之间的空白。请大家注意，word-spacing对中文无效。letter-spacing　　语法：

disabled="true "此果文字会变成灰色，不可编辑。readOnly="true" 文字不会变色，也是不可编辑的

本文讲述了如何使用css来隐藏过长的多余文字的方法最终效果如上图所示很多时候因为排版的关系，文章标题字数必须是固定的，这时候我们需要隐藏过长的文章标题相对于使用php直接截取部分字数并显示，用css隐藏多余的文字，并用链接的title属性全部显示，是一种对用户和搜索引擎更为有利的方法css实现隐藏代码如下：css隐藏过长的多余溢出文字的方法

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">   这是一个学习案例  body { margin:0; padding:0; font-size:14px; color:#000;} .fl { float:left;} .fr { f

现在的网站一般字体大小都是 12px，在 12px 下单选框和复选框文字垂直居中对不齐，不过要是字体大小是 14px 的话却完全没有这个问题。下面我整理了下解决方法，总共有 6 种。DOCTYPE HTML>html lang="en-US">head> meta charset="UTF-8"> title>css-checkbox-radio-vertical-al

之前在做图片自适应的时候想到的办法是把图片作为背景然后添加background-size:100%;让图片填满整个盒子的方式来实现，但这样图片会根据盒子的大小拉伸，导致显示变形，bootstrap中有很好的解决方法：响应式图像 src="..." class="img-responsive" alt="响应式图像">通过添加 img-responsive class 可

关于如何绑定Jquery 的scroll事件（兼容浏览器）　　今天做一个随屏幕滚动的导航条时，发现一个问题：　　火狐、谷歌、ie9正常，ie8、7、6页面滚动时，导航条没有反应。　　代码如下：　　$(document).bind("scroll",function(){//……});　　后来怀疑绑定对象出了问题，不应该绑定document。改成“body”，还是不行。再改成wi