css
关注
分享
扫一扫
文章平均质量分 70
axl234
这个作者很懒，什么都没留下…
展开
-
FF下如何使连续长字段自动换行 IE中直接使用word-wrap:break-word 就可以了, 这里FF中我们使用JS插入 的方法来解决...
<!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" xml:lang="zh" lang="zh">&a原创 2011-05-10 10:17:28 · 145 阅读 · 0 评论 -
让层显示在FLASH之上
解决的办法是给FLASH设置透明<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:/原创 2011-05-10 10:25:35 · 149 阅读 · 0 评论 -
HTML支持的乱七八糟形态各异的非主流常用字符
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta h原创 2011-05-16 11:42:27 · 449 阅读 · 0 评论 -
Div垂直居中及容器内图片垂直居中的CSS解决方法
Div与CSS布局，最让人头疼的就是容器内的东西如何垂直居中的问题，我总结出以下居中办法，兼容IE与及Firefox方法一方法二div里面图片垂直居中的几个例子方法三div里面图片垂直居中的几个例子方法4使用纯 CSS 实现未知尺寸...原创 2010-10-11 10:19:20 · 96 阅读 · 0 评论 -
精简高效的CSS命名准则/方法
面向属性的命名方法我们习惯在CSS命名的时候掺杂语义，这样可以让代码更易懂。例如淘宝首页“免费注册”按钮上的class名称：help-guest-regist上面的class命名语义就很明显，独眼龙看告示——一目了然，”help-guest-regist”就是”帮助-顾客-注册”，很nice，很人性化的命名。作为在单一的首页上使用，我是很难挑出什么毛病来的。但是，从道家“无...原创 2010-10-13 10:15:39 · 113 阅读 · 0 评论 -
你必须知道的28个HTML5特征、窍门和技术
一、新的Doctype//zxx:”doctype”中文意思指“文档类型”仍在使用麻烦的，不可能记得住的XHTML文档类型？如果是，为什么还在用呢？使用新的HTML5文档类型代替吧。你会活得更久的——正如Douglas Quaid说的我就琢磨着，为了HTML5搞个这厮代码，您可能会对这段代码究竟靠不靠谱表示怀疑。不用担心，如今这是可行的，只有老的浏览器需要一...原创 2011-02-27 17:44:41 · 136 阅读 · 0 评论 -
IE6最小高度最小宽度最大高度最大宽度html css写法总结
====================IE6最小高度.min_height{ min-height:200px; _height:expression(this.scrollHeight < 200 ? "200px" : "auto");}--------------------------------IE6最大高度.max_height{ max-height:400px; _...原创 2011-07-11 19:56:55 · 134 阅读 · 0 评论 -
成功的前端开发人员
首先就是熟悉HTML，掌握W3C的标准，要学就得学最规范的标准。浏览器最少也要了解四五种，如IE、Firefox、Chrome等。样式也得掌握，以CSS2为主，多看看欧美牛人的风格DIV布局，特简约的那种。可用性也很重要，甭管有事没事总把用户放在心里，再买本工艺美术理论方面的书，有事没事就翻翻，设计个按钮就得花个七八天的时间。交互更重要，现在不是Ajax，就是RIA的，你要是用alert弹框啊，你...原创 2011-10-12 11:25:52 · 103 阅读 · 0 评论 -
关于IE6下背景图片固定定位不起作用失效的原因
要写一个空间代码，实现的效果之一就是背景图片固定在页面上，不随浏览器滚动而滚动，但是却遇到了一个问题，就是IE6下背景图片固定不起作用了（IE7，firefox火狐浏览器等都可实现背景固定）。这是很奇怪的，以前用同样的代码是一点问题都没有的，这次为何不行呢？待我慢慢叙来……使背景图片固定代码如下：body{background:url(xx.jpg) fixed 50% 50%;}...原创 2011-10-14 11:19:35 · 215 阅读 · 0 评论 -
IE6，IE7，IE8支持CSS3效果
让IE6，IE7，IE8支持CSS3效果，有一个思路就是利用 VML 模拟。VML是The Vector Markup Language(矢量可标记语言)，原本是微软自己开发的东西，很强大。也就是说，IE下面，可以用 VML做出圆角 。半透明、阴影 、渐变背景。早在去年的时候，就有老外这个思路写成了插件，方便前端程序员开发。。。它可以让IE6，IE7，IE8 支持 CSS3特效……...原创 2011-07-18 15:29:10 · 118 阅读 · 0 评论 -
使用text-justify 和 display:inline-block;实现两端对齐的解决方案
display:inline-block列表布局必要条件：1：现代浏览器下的首尾标签留空或换行像这样：<span> <a href="#"> <img src="test.jpg" /> </a> </span> <span> <a href原创 2011-03-14 17:39:11 · 293 阅读 · 0 评论 -
div模拟textarea以实现高度自适应实例页面
使用很简单，一个普通的block元素上加个contenteditable="true"就ok了，如下：<div contenteditable="true"></div> true外面的引号甚至去掉都没关系。contenteditable属性虽是HTML5里面的内容，但是IE似乎老早就支持此标签属性了。所以，兼容性方面还是不用太担心的。ok，最麻烦的模拟te...原创 2011-03-16 10:46:05 · 76 阅读 · 0 评论 -
用css的border属性实现三角
在一个宽高为0像素的块状元素中设置border属性，例如01.box{02 03width:0px;04 05height:0;06 07border-bottom:50px #F00 solid;08 09...原创 2011-08-12 14:39:14 · 132 阅读 · 0 评论 -
@Font-face 用法及全部浏览器支持的方法
@Font-face基本介绍：:@font-face 是一个css2的一个语法，它允许你在网页上显示一个自定义的字体。即使客户机器上可以没有安装这种字体，网页也可以显示。 本文将介绍@font-face的基本用法，以及在所有浏览器都能使用的方法。@Font-face基本语法：:@font-face { font-family: <a-remote-font-name>...原创 2011-08-12 14:46:32 · 442 阅读 · 0 评论 -
绝对定位与等高布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta h原创 2011-04-12 15:29:54 · 118 阅读 · 0 评论 -
e6,ie7,ie8 css bug兼容解决记录
断断续续的在开发过程中收集了好多的bug以及其解决的办法，都在这个文章里面记录下来了！希望以后解决类似问题的时候能够快速解决，也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法！1：li边距“无故”增加任何事情都是有原因的，li边距也不例外。先描述一下具体状况：有些时候li边距会突然增 加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研...原创 2011-12-19 10:02:21 · 104 阅读 · 0 评论 -
解决position:fixed;在IE6中不支持的BUG
<!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=”Con...原创 2011-12-19 15:09:40 · 116 阅读 · 0 评论 -
js页面文字选中后分享到新浪微博实现
一、功能简述正是微博如火如荼的时节，其中各个微博的分享功能是网站推广产品的好东东啊，此时如何方便快捷的使用微博的分享功能就显得比较重要了。我的站点每篇文章的底部有一些分享的链接：不过我觉得这些分享基本上就是聋子的耳朵——摆设。除非这篇文章惊天地、泣鬼神，痛彻心扉，穿越前世今生。但是，如果有更加方便快捷的分享方式，这种冷淡得让人结冰的场面或许就不会经常出现。一般翻译软件都有划词翻译功能，...原创 2011-12-20 15:39:18 · 106 阅读 · 0 评论 -
设置样式方法setStyle
这个setStyle方法确实避免了mydiv.style.xxx这种写法大量重复的代码，确实代码简洁了不少，也很直观，但是这里还有一个问题，如果设置的样式一多，重复操作DOM无法避免，销毁原样式并重建都会增加浏览器的开销。我们可以先生成一个样式字符串，再一次性设置样式，这样可以尽量避免页面reflow。例如：//类型判断var Typ...原创 2011-12-27 11:27:55 · 2743 阅读 · 0 评论 -
text-align下的返回顶部功能实现实例页面
text-align属性作用的不是absolute元素，而是absolute元素之前的文字而已！CSS代码：.sina_box{width: 960px; height: 2000px; margin: 0 auto; background: url(images/body_bg.jpg) top center;}.sina_backtop_box { text-align: right; }...原创 2012-01-04 15:09:00 · 98 阅读 · 0 评论 -
display:table-cell下的自适应布局效果
HTML：<div class="fix"> <div class="l"></div> <div class="cell"></div></div>CSS：.fix{*zoom:1;}.fix:after{display:block;原创 2012-01-30 15:39:20 · 228 阅读 · 0 评论 -
jquery ui实现拖动排序
解决了横向拖动产生错位的问题，原因是拖动时会给ul添加一个class=hFinderCategoryFilePlaceholder的li，需要把它指定为float并添加宽高，另外拖动完成要去掉hFinderCategoryFileSelected这个class <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h...原创 2012-05-08 11:14:19 · 150 阅读 · 0 评论 -
页面选中文字分享到新浪微博
选中即分享的功能看上去比较高级，其实实现是相当简单的。其中的会让人头大，一般人也不感兴趣的原理这里就直接跳过。这个js文字选中后分享到新浪微博的功能我简单的封装了下，方法名是：$sinaMiniBlogShare，当然，您不喜欢可以换掉，甚至不要，此方法完整代码如下：var $sinaMiniBlogShare = function(eleShare, eleContainer) { ...原创 2012-05-16 10:19:56 · 156 阅读 · 0 评论 -
js组合继承+寄生组合继承的实现
原型链继承的方式function Box() { //Box 构造this.name = 'Lee';}function Desk() { //Desk 构造this.age = 100;}Desk.prototype = new Box(); //Desc 继承了 Box ， 通过原型 ， 形成链条var desk = new Desk();alert(desk.age);alert(des...原创 2012-05-25 16:11:19 · 109 阅读 · 0 评论 -
jquery图片比例缩放插件
jquery图片比例缩放插件参数名参数说明maxWidth限制宽度,默认200pxmaxHeight限制高度,默认300pxeffect缩放方式,默认basic (basic-常规缩放 proportion-等比例缩放) 代码 // 基于JQ的picResize图片缩放插件,// 创建一个闭包 (function(...原创 2012-06-05 15:38:46 · 236 阅读 · 0 评论 -
微博的@功能
出于对这个功能的好奇，并抱着学习的态度，翻阅了一些资料后对这个Javascript进行了探讨和研究。 对这个功能进行分析如下： 1、确定光标的位置 2、textarea文本框里对字符串@的判断 3、tip的弹出事件 4、键盘的操作事件 5、ajax调用 6、文字的插入 当然还有其他的功能。 ...原创 2012-06-05 16:32:05 · 183 阅读 · 0 评论 -
HTML特殊字符编码对照表
HTML特殊字符编码对照表特殊符号命名实体十进制编码特殊符号命名实体十进制编码特殊符号命名实体十进制编码Α&Alpha;&#913;Β&Beta;&#914;Γ&Gamma;&#915;Δ&Delta;&#916;Ε&Eps...原创 2012-02-03 14:28:04 · 167 阅读 · 0 评论 -
清理浮动的全家
我们粗略的一起来看看清除浮动的办法一共有多少个。对应的DEMO1. 采用伪类:after进行后续空制的高度位零的伪类层清除2. 采用CSS overflow:auto的方式撑高3. 采用CSS overflow:hidden的方式产生怪异适应4. 采用display:table将对象变成table形式5. 采用div标签，以及css的clear属性6. 采用br标签，以及c...原创 2011-12-05 14:31:11 · 89 阅读 · 0 评论 -
自适应宽度且居中的分页
自适应宽度且居中的分页原创 2011-12-05 15:12:34 · 110 阅读 · 0 评论 -
javascript 多个搜索词|关键词高亮
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta h原创 2012-06-13 16:15:52 · 661 阅读 · 0 评论 -
js根据内容高度分页
<script>$(function(){ //内容js分页 var obj = $("#body")[0]; var pages = $("#pages")[0]; var pageCount = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj.offsetHeight)); if(pageCount&...原创 2012-06-13 16:27:02 · 645 阅读 · 0 评论 -
支持链接到新页面的锚点平滑跳转
//页内锚点滑动效果$("html,body").animate({scrollTop: $("#box").offset().top}, 1000);更具体详细的方法//页内锚点滑动效果,来自http://www.learningjquery.com/的方法$('a[href*=#]').click(function() { if (location.pathname.re...原创 2012-06-18 15:32:33 · 275 阅读 · 0 评论 -
关于CSS元素隐藏
在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。{ display: none; /* 不占据空间，无法点击 */ }{ visibility: hidden; /* 占据空间，无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间，无法点...原创 2012-02-16 11:15:23 · 119 阅读 · 0 评论 -
css实现图片根据鼠标滚轮滚动
实现新浪微博图片浏览的功能 在一个div内显示一个比div内容高的图片，当想看到图片其他部分时可以通过滚轮实现上下滚动图片。原理：嵌套2层div内层的高度固定overflow:scroll;这样会显示滚动条，然后让外层的div宽高小一点overflow:hidden;刚好把滚动条的部分隐藏掉，这样就可以实现无滚动条的滚动了具体代码如下： <!DOCTYPE html PUBL...2012-03-21 11:01:30 · 1139 阅读 · 0 评论 -
两种自适应图片大小的布局方式比较
第一种：采用display:table-cell;的方式实现自适应布局 特点是图片变大文字变窄，行数变多。文字靠上与图片对齐，文字与图片不等高 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&...原创 2012-03-27 10:36:52 · 318 阅读 · 0 评论 -
通过CSS3 Media Query实现响应式Web设计
如今的屏幕分辨率，小至320px（iPhone），大到2560px甚至更高（大显示器），变化范围极大。除了使用传统的台式机，用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。这种情况下，固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性，其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。接下来，我们将了解一下怎样通过HTML5和CSS3 Media Querie...原创 2013-03-21 14:51:01 · 90 阅读 · 0 评论 -
使用jQuery Mobile框架将博客快速转化为Mobile网站
jQuery Mobile是一个非常不错的移动端网站应用的解决方案，很多网站都使用jQuery Mobile来生成Mobile手机端的移动网站应用，在过去的GBin1博客文章中，我们曾经使用jQuery Mobile利用RSS订阅生成过一个简单的RSS阅读手机端，在今天的教程中，我们将讲解如何将GBin1网站完整的转化为一个全功能的移动端网站，主要的技术使用jQuery Mobile和Java...原创 2013-03-26 10:41:38 · 174 阅读 · 0 评论 -
使用jQuery Mobile和CSS3实现响应式设计
智能手机和平板设备的采用率不断暴涨，jQuery Mobile 框架可以帮助开发人员满足日益增长的移动 Web 体验需求。提供移动 Web 体验要求 Web 开发人员和设计人员掌握一套新的技能。 在 2010 年，Nielsen 预计每两个美国人中就有一个会拥有智能手机，与 2008 年的结果(每 10 个人里只有一个拥有智能手机)相比，这是一个巨大的增长;并且，在 2011 年 6 月，AMI...原创 2013-03-26 10:55:50 · 175 阅读 · 0 评论 -
缓冲加载图片的jquery.lazyload.js实现图片延迟加载
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担. (一)如...原创 2013-03-26 11:09:56 · 96 阅读 · 0 评论 -
META中X-UA-Compatible的用法
<meta http-equiv = "X-UA-Compatible" cotent = "IE=edge,chrome=1"/> 这是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式，以此来解决部分兼容问题，例如模拟IE7的具体方式如下：< meta http-equiv = "X-UA-Compatible" co...原创 2012-07-23 10:55:53 · 133 阅读 · 0 评论