div+css - 随笔分类 - 思齐_

7 天打造前端性能监控系统

摘要：引言前阵子在w3ctech的走进名企 - 百度前端 FEX 专场上曾“夸下海口”说听完讲座后七天就可以打造自己的前端性能监控系统，既然说出去了也不能食言。从前一篇文章前端数据之美相信大家对前端数据有了一定的了解，下面就针对其中的性能数据及其监控进行详细阐述。开始行动本文中的性能主要指 web 页面加... 阅读全文

posted @ 2015-01-18 16:56 思齐_ 阅读(1844) 评论(1) 推荐(0) 编辑

雅虎前端优化法则

摘要：1、尽量减少HTTP请求次数网页加载中大部分时间都在下载js，css，flash，图片 1、合并文件 css，js，图片（css sprite） 2、内联图像 data:URL scheme 低级浏览器不支持，如过放到页面中会加大html，放到css中最好，因为他可以在客户端进行缓存 2、减少DNS查找次数即减少页面中的主机名（css,js, img，flash等） dns解析时浏览器处于等待状态大部分浏览器有自己的缓存不会受系统的缓存的影响 1、减少主机名数量，则减少了dns查询，但同时减少了页面中并行下载的数量把页面中的主机名分成2~4个，二者可兼得3、... 阅读全文

posted @ 2014-04-09 23:12 思齐_ 阅读(4634) 评论(0) 推荐(0) 编辑

canves 图片旋转 demo

摘要：您的浏览器当前版本不支持canvas标签阅读全文

posted @ 2014-01-04 14:34 思齐_ 阅读(670) 评论(0) 推荐(0) 编辑

css实现图片水平垂直居中

摘要：图片水平垂直居中地址：阅读全文

posted @ 2013-10-20 12:23 思齐_ 阅读(335) 评论(0) 推荐(0) 编辑

纯css实现单行”截取“

摘要：纯css实现单行”截取“ 这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。 …嘎嘎嘎简要说明：当文字内容足够长时就把隐藏在上面的省略号层给挤下来了。关键就是点点点所在div层的高度的绝对值要比其margin的绝对值大那么一点点。如果您不习惯用em做单位，直接换作px就可以了，效果是一样的。原文地址：http://www.zhangxinxu.com/wordpress/?p=230 阅读全文

posted @ 2013-10-15 23:53 思齐_ 阅读(848) 评论(0) 推荐(0) 编辑

公用的css

摘要：/*公共开始*/body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select{margin:0;padding:0;}body{font:12px "宋体","Arial Narrow",HELVETICA;background:#FFF;-webkit-text-size-adjust:100%;color:#333;}a{text-decoration:none;color:#333;}a:hover{t 阅读全文

posted @ 2013-08-11 09:25 思齐_ 阅读(1420) 评论(0) 推荐(0) 编辑

ie6/7 bug大全

摘要：1. ie6/7下ul高度变高 li 加vertical-align:bottom;2.ie6不支持min-height a:height:auto !important; height:100px ; min-height:100px; b:min-height:100px; _height:100px;3.ie6双倍边距浮动元素设置margin-left 或 margin-right 后在ie6下为设置是2倍， a.增加display:inline;属性 b.浮动元素本身就用内敛元素（如 span、a、em）4.行内元素换行引起的空白（所有浏览器都有这个问题） a.不换行，影... 阅读全文

posted @ 2013-07-31 23:50 思齐_ 阅读(389) 评论(0) 推荐(0) 编辑

CSS border 生成三角

摘要：无标题文档效果图：矩形框中依次渐变演示了最上面的那个图形的形成过程 css模拟圆角（适合边框和背景一样的圆角，对精密程度要求不高的）无标题文档我是一只小小鸟、小小鸟！效果图：把div的边距拉大后会看的更清楚哦改进：无标题文档我是一只小小鸟、小小鸟！效果图：原文地址：http://www.zhangxinxu.com/wordpress/?p=794 阅读全文

posted @ 2013-07-10 00:51 思齐_ 阅读(1432) 评论(0) 推荐(0) 编辑

返回顶部/两侧广告效果

摘要：返回顶部/两侧广告效果'O',1=>'A', 2=>'B', 3=>'C', 4=>'D', 5=>'E');for($i=0;$i'.$b.''; echo "";}?>返回顶部返回顶部效果图：阅读全文

posted @ 2013-07-06 15:36 思齐_ 阅读(423) 评论(0) 推荐(0) 编辑

滚动居中效果（frame版）

摘要：无标题文档'O',1=>'A', 2=>'B', 3=>'C', 4=>'D', 5=>'E');for($i=0;$i'.$b.''; echo "";}?>效果图：阅读全文

posted @ 2013-07-06 11:14 思齐_ 阅读(520) 评论(0) 推荐(0) 编辑

滚动居中效果_带遮罩效果

摘要：无标题文档弹出层居中(注意：ie6下如果元素过高，透明滤镜会失效,ie6不得不说是一个奇葩呀…………) border:50px solid red; padding:100px; 打开遮罩关闭遮罩 '.$i.''; echo "";}?>效果图：阅读全文

posted @ 2013-07-04 19:02 思齐_ 阅读(470) 评论(0) 推荐(0) 编辑

浮动的固定的导航栏

摘要：无标题文档我会定在上面哦我会跟随着你哦！ A B C D E F G H I J 'O',1=>'A', 2=>'B', 3=>'C', 4=>'D', 5=>'E');for($i=0;$i'.$b.''; echo "";}?>效果图：阅读全文

posted @ 2013-07-03 01:52 思齐_ 阅读(10034) 评论(0) 推荐(0) 编辑

js 展开/收起效果

摘要：无标题文档腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官...展开腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官...展开腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官...展开腾讯娱乐讯 2012年第一届"两天微电影大赛"完美收官...展开效果图：阅读全文

posted @ 2013-07-01 19:11 思齐_ 阅读(6982) 评论(0) 推荐(0) 编辑

html5 效果按下鼠标数值自动增长

摘要：增加减少 10效果图：阅读全文

posted @ 2013-06-30 22:32 思齐_ 阅读(2044) 评论(0) 推荐(0) 编辑

A链接IE6、7下失效场景及解决方案

摘要：1.当img元素包含在多个层级关系里时，只要触发了img元素的父元素的hasLayout，那么就会造成在IE6\7下A标签失效。Insert title here 阅读全文

posted @ 2013-06-25 00:26 思齐_ 阅读(485) 评论(0) 推荐(0) 编辑

单行、多行文字的垂直居中

摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 阅读全文

posted @ 2013-06-16 01:53 思齐_ 阅读(6348) 评论(0) 推荐(0) 编辑

input居中，以及input中元素居中

摘要：input中的文字居中：<input type="" style="height:100px; line-height:100px; text-align:center;" />input标签在其他标签内的居中：、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" 阅读全文

posted @ 2013-06-15 17:49 思齐_ 阅读(15071) 评论(0) 推荐(0) 编辑

清除浮动的几种方式

摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style&g 阅读全文

posted @ 2013-06-12 15:48 思齐_ 阅读(386) 评论(0) 推荐(0) 编辑

IE专有的条件注释

摘要：<!--[if lt IE 7]> IE7以及IE7以下版本可识别 < 阅读全文

posted @ 2012-11-13 17:31 思齐_ 阅读(264) 评论(0) 推荐(0) 编辑

background 用法

摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 阅读全文

posted @ 2012-11-13 14:42 思齐_ 阅读(315) 评论(0) 推荐(0) 编辑

C语言 c++ php mysql nginx linux lnmp lamp lanmp memcache redis 面试笔记 ppt 设计模式问题远程连接

随笔分类 - div+css

搜索

常用链接

最新随笔

随笔分类

随笔档案

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

C语言 c++ php mysql nginx linux lnmp lamp lanmp memcache redis 面试 笔记 ppt 设计模式 问题 远程连接