https://github.com/lianbinghua

随笔分类 -  html

标准盒子模型和ie盒子模型
摘要：盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型： 从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、conten 阅读全文
posted @ 2016-07-25 10:28 连冰华 阅读(238) 评论(0) 推荐(0)
淡入淡出轮播图
摘要：<!DOCTYPE html><html><head><style type="text/css"> body{background:#57beb9;}/* main */#main{width:920px;height:430px;overflow:hidden;position:relative 阅读全文
posted @ 2016-05-20 17:12 连冰华 阅读(304) 评论(0) 推荐(0)
前端性能优化
摘要：在web开发的时候经常会遇到页面重定向的问题，说起重定向就不得不说HTTP STATUS CODE 301 和302. 301 是Moved Permanently，也就是"永久转移"， 302则是Temporarily Moved，是"暂时转移"。 在生产环境，建议使用301永久重定向，不使用30 阅读全文
posted @ 2016-05-15 15:38 连冰华 阅读(128) 评论(0) 推荐(0)
ie6双边距解决
摘要：这个bug是ie6有名的双边距bug：同时为一个元素设置向一个方向偏移和对这个方向进行外边距设置，比如float:left,margin-left:45px;在其他浏览器下是显示正常的，在ie6下这个元素的margin-left确是==45*2=90px，解决方法是给元素设置display:inli 阅读全文
posted @ 2016-05-15 14:00 连冰华 阅读(253) 评论(0) 推荐(0)
两栏分别上下滑动
摘要：html,body{height: 100%}body{background: #f2f2f2;-webkit-user-select:none;-webkit-text-size-adjust:none;}.clearfix:after,.clearfix:before{content: "";d... 阅读全文
posted @ 2015-11-30 15:01 连冰华 阅读(180) 评论(0) 推荐(0)
分享 复制
摘要：//分享 如果页面有多个分享，如下赋... 阅读全文
posted @ 2015-02-03 18:31 连冰华 阅读(172) 评论(0) 推荐(0)
浏览器css hack
摘要：(1)*:IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;(2)!important: 除IE6不能识别!important外,FF+IE8+IE7都能识别!important ;(3)_: 除IE6支持_外,FF+IE8+IE7都不支持_;(4)\9:所有IE浏览器都识别(IE6... 阅读全文
posted @ 2015-01-15 17:50 连冰华 阅读(178) 评论(0) 推荐(0)
浏览器内核
摘要：ie(Trident):猎豹浏览器，qq浏览器，360浏览器chrome(Webkit):搜狗浏览器，百度浏览器，Safari浏览器firefox(Gecko):opera(presto): 阅读全文
posted @ 2015-01-14 17:05 连冰华 阅读(125) 评论(0) 推荐(0)
meta 如何写
摘要：阻止手机号加下划线，可拨打： (ios系统)其中：minimal-ui,去掉手机头部自动出来的地址以下两个有利于搜索引擎: 阅读全文
posted @ 2014-09-11 17:57 连冰华 阅读(271) 评论(0) 推荐(0)
三列，左右两列宽度固定，中间宽度自适应
摘要：body{ margin:0;} #wrapper{ height: 300px; overflow: hidden; } .left{ width: 200px; height: 100%; background: red; float: left; } .rig... 阅读全文
posted @ 2014-08-18 11:22 连冰华 阅读(239) 评论(0) 推荐(0)
两列布局，一列定宽，一列宽度自适应
摘要：方法一:body{ margin: 0;}.container{ height: 300px; overflow: hidden;}.left{ width: 200px; height: 300px; background: red; position: absolute; left:0; top... 阅读全文
posted @ 2014-08-18 11:14 连冰华 阅读(487) 评论(0) 推荐(0)
marquee实现跑马灯
摘要：跑马灯大全 滚动的文字 表示双向移动 表示运动方向向左 弹来弹去跑马灯! 表示运动方向向左 带有超链接的跑马灯!点我试试？ 还有一条呢!点我试试？... 阅读全文
posted @ 2014-07-17 09:49 连冰华 阅读(608) 评论(0) 推荐(0)
无缝滚动--垂直方向
摘要：无缝滚动 阅读全文
posted @ 2014-07-17 09:46 连冰华 阅读(273) 评论(0) 推荐(0)
无缝滚动--水平方向
摘要：图片跑马灯 ... 阅读全文
posted @ 2014-07-17 09:44 连冰华 阅读(197) 评论(0) 推荐(0)
form文件上传，防止页面刷新
摘要：文件上传form提交 Upload File: 阅读全文
posted @ 2014-07-10 09:39 连冰华 阅读(653) 评论(0) 推荐(0)