2019年8月11日

clearfix清除浮动进化史

clearfix清除浮动 首先在很多很多年以前我们常用的清除浮动是这样的。 1 .clear{clear:both;line-height:0;} 现在可能还可以在很多老的站点上可以看到这样的代码,相当暴力有效的解决浮动的问题。但是这个用法有一个致命伤,就是每次清除浮动的时候都需要增加一个空标签来使用。 这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签,增加了页面无用标签,不利于页面优化。但是我发现大型网站中 居然还 […]
2019年8月8日

利用htaccess做移动化适配301跳转

本例子是linux+Apache,win的可自己改成适合的。下面的各UA可以自己斟酌,比如移动设备、移动浏览器、移动蜘蛛的相关UA。注意pc与主 移动版本用301重定向,各移动版本之间用302重定向,然后使用抓取诊断工具,看百度移动抓取是否抓pc站的url的时候识别为移动url状态。注意复 制规则的时候, RewriteCond这部分 不要分行。 一、根目录下.htaccess内容,处理pc域名到手机站域名的跳转: 1 2 3 4 5 […]
2019年8月8日

CSS3 @media 查询

定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。 浏览器支持 表格中的数字表示支持 @media 规则的第一个浏览器的版本号。 Rule 谷歌 IE 火狐 Safari Opera @media 21 9 3.5 4 […]
2019年8月8日

提升页面访问速度的前端优化大法:DNS预解析

在调用百度联盟、谷歌联盟以及当前网页所在域名外的域名文件时,我们常会遇到请求延时非常严重的情况,一般来说这种延时的原因与对方网站带宽或者负载无关。 由于DNS解析速度很可能是造成资源延时的最大原因,我们假设是DNS的问题,即可在页面header中添加了以下代码,用以DNS预解析: <meta http-equiv="x-dns-prefetch-control" content="on" /> <link rel="d […]
2016年5月26日

WebApp 开发中常用的代码片段

其实这里面的多数都是 iOS 上面的代码。其他平台的就没有去验证了。 HTML, 从HTML文档的开始到结束排列: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> 让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条 <meta name=”format-detection” content=”telep […]
2016年4月28日

html5常用标签使用实例

很多人可能由于习惯,有时虽然知道html5的新标签语义明晰,但有时依然绕不过弯,想都不想直接用div了。这里了简单介绍一下几个html5中的标签,并做一个简单的样例。 首先,header,nav,article,section,aside,footer 这些html5的标签本质上和div没有任何区别,他们的实质性 作用就是让你的html代码有语义。 也就是说,仅仅在html使用它们并不会显示出他们语义中包含的意思。 还需要针对每一个标签 […]
2015年7月8日

如何写出高效率的HTML

我们该如何提升网页的性能? 看到这个问题时,大多数开发者会想到图片优化、JavaScript优化、服务器配置升级、文件压缩甚至是CSS压缩这些方式。然而,网页的核心语言HTML却被忽视了。 如今,HTML的负担越来越重,在全球排名前100的网站中,平均每个页面的HTML代码大小有40k左右,其中Amazon和Yahoo平均每页的 HTML代码有几千行,Youtube的首页甚至有3500个HTML元素。虽然降低每页HTML的复杂性、减少元 […]
2015年3月9日

HTML 5的消息通知机制

原文:HTML 5 Notification 译文:HTML 5 的消息通知机制 译者:dwqs HTML 5 已经被应用到Web开发中。跟平常一样,任何一个软件新版本的发布都期待一些新的特性,这对HTML 5也不例外。为了仅仅通过HTML提高用户交互,HTML 5已经提供了很多新的API。 是不是非常有趣呢?并且HTML 5已经和CSS 3结合的非常棒了。 因此,我也开始写一系列与HTML 5的API相关的文章来介绍API的使用和功能 […]
2015年3月9日

响应式设计三部曲

原文:Responsive Design in 3 Steps 译文:响应式设计的三个步骤 译者:dwqs 现在,响应式Web设计无疑是非常流行的。如果你对响应式设计还不熟悉,可以看看我之前发表过的关于这方面的responsive sites。对于新人,responsive design可能听起来有点复杂,但实际上,它比你想的要简单的多。为了帮助你快速入门响应式Web设计,我写了一篇快速入门教程。我保证你通过三步就可 以学会响应式设计的 […]
2015年3月8日

移动H5前端性能优化指南

概述 PC优化手段在Mobile侧同样适用 在Mobile侧我们提出三秒种渲染完成首屏指标 基于第二点,首屏加载3秒完成或使用Loading 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB Mobile侧因手机配置原因,除加载外渲染速度也是优化重点 基于第五点,要合理处理代码减少渲染损耗 基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置 加载完成后用户交互使用时也需注意性能 加载 […]
2015年3月8日

Chrome 控制台console的用法(学了之后对于调试js可是大大有用的哦)

转自http://www.cnblogs.com/ctriphire/p/4116207.html 大家都有用过各种类型的浏览器,每种浏览器都有自己的特色,本人拙见,在我用过的浏览器当中,我是最喜欢Chrome的,因为它对于调试脚本及前端 设计调试都有它比其它浏览器有过之而无不及的地方。可能大家对console.log会有一定的了解,心里难免会想调试的时候用alert不就行了,干嘛 还要用console.log这么一长串的字符串来替代a […]
2015年1月27日

网页响应式设计的现状与趋势

从2012年开始到2014年,各大家对Web设计的趋势预测中,都提到响应式设计;2015年网页设计趋势预测中,响应式仍在继续。这个经历了几年依然大热的响应式,在过去的几年里,快速巩固了自己的地位,并掀起了一股网页设计新标准的浪潮。这里本人基于一些资料文献及自己的陋见,谈谈响应式设计的一些现状和趋势。 源起 2010年5月,伊桑.马科特(Ethan Marcotte)在“A List Apart”写了一篇开创性的文章(题为“Respons […]
2014年10月16日

google审查元素工具代替F5前段开发工具

google审查元素工具代替F5前段开发工具,之前说过F5自动刷新这个工具,但是最近几天用的感觉不是不好用,是不自动刷新了。 我在使用F5的过程中会有无法自动刷新的情况。很是不爽。原本以为软件一定会让我用起来有一样的感觉,但是各种不自动刷新,真心不想用了。 首先原本我F5放在D盘的,程序放在E盘的,然后不能自动刷新跟目录有关。你们信吗?这是真的。 我是一个前段新手。 我的电脑是win8 64 + sublime + google浏览器 […]
2014年10月11日

推荐【F5】前端开发及WEB调试工具

推荐【F5】前端开发及WEB调试工具 这款工具用起来真的很不错,绿色软件软件,下载ZIP,解压到自己想放的地方,然后在设置个快捷启动方式就可以了。 如果你是第一次打开它,而且是在浏览器已经打开的情况下。如果发现也卖弄不会自动刷新的话,重启一下浏览器就可以了,反正我遇到这个麻烦了。 打开软件,会自动弹出一个一窗口给你添加项目。 当然你要关闭你的windows ApacheServer或者你的IIS了,你懂的。   添加项目之后, […]
2014年9月8日

屏带动画、触摸效果的jquery图片轮播插件

屏带动画、触摸效果的jquery图片轮播插件,源码分享,可以在线浏览。 下载地址:https://www.nnbbxx.net/html-js-css/jq4.zip 浏览地址:https://www.nnbbxx.net/html-js-css/jq4/demo.html