标签归档：css经验

jQuery和Discuz js冲突解决办法

发表于 2011/04/26 由 前端开发-武方博  1,255 views

$(id)函数冲突 Discuz使用了S()作为对象选取函数，刚好与jQuery默认的$()函数重合造成冲突，代码依旧位于include/common.js中，如下： Code: function $(id) {    return document.getElementById(id); } 解决方法1： 将jquery.js在common.js之前载入，不然jquery的$()函数会覆盖common.js的$()函数；然后用到jQuery的$()函数的地方都用jQuery()代替。 解决方法2： 将jquery.js在common.js之后载入，在调用jQuery的函数前使用一下代码： Code: var jq = jQuery.noConflict(); 以上是将$()函数映射回原来的$()函数；之后便可以使用jq()或jQuery()来代替jQuery原来的$()函数，这里jq和jQuery相同，而$()函数则是原来Discuz的$()函数。 解决方法2也可使用jQuery.noConflict()的其他用法代替，参见后面的使用说明。 ============= jQuery.noConflict() 使用说明 运行这个函数将变量$的控制权让渡给第一个实现它的那个库。这有......查看更多>>

发表在 jquery, 前端开发bug修复 | 标签为 , , , , , , , , , , , , , , | 留下评论

国外15个前端开发CSS框架介绍

发表于 2011/04/25 由 前端开发-武方博  1,127 views

    框架就是一个你可以用于你的网站项目的基本的概念上的结构体。 css框架通常只是一些css文件的集合，这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如： typography.css 基本排版规则 grid.css 基于网格的布局 layout.css 通常的布局 form.css for 表单样式 general.css 更多通用规则   下面一起来了解一下各种不同的CSS框架吧: 1.960 Grid System  960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。它有两种类型，12和16列，他们可以独立使用或是协同使用。 2.WYMstyle CSS Framework  这个项目的目的是提供一组经过良好测试的模块化的CSS文件，能够用于网站的快速设计。WYMstyle是一组CSS文件，你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站......查看更多>>

发表在 css, 前端开发 | 标签为 , , , , , , , , , , , , , , , , , , | 留下评论

27款经典的前端开发CSS框架

发表于 2011/04/25 由 前端开发-武方博  1,102 views

  利用 CSS 框架，可以简化你的工作，提高工作效率。CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块。下面给你推荐了27款优秀的CSS框架，你可以选用。  1. 960gs  960 像素的页面宽度似乎成为了一种设计标准，在当前各种分辨率下，能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程，使工作简单高效。 2. YUI 2: Grids CSS  芒果曾经介绍过由雅虎开发小组推出的 YUI，而这个 YUI Grids CSS 正是其中的一部分。作为最著名的 CSS 框架之一，YUI Grids CSS 提供了四种预设页面宽度，六种预设模板。其中的负 Margin 技术，使用度量单位 em，清除布局浮动等技术非常值得学习和借鉴。  3. Blueprint  Blueprint 是一款成熟的 CSS 框架，它将布局 (layout)、排版 (typography)、组件 (widget)、重置 (reset)、打......查看更多>>

发表在 css, 前端开发 | 标签为 , , , , , , , , , , , , , , , | 留下评论

使用CSS框架的优点和缺点

发表于 2011/04/25 由 前端开发-武方博  688 views

CSS框架是一个软件，它为你的HTML开发提供了许多选项以供使用，可能使得你开发网站或web程序更快速更简单。CSS框架通过包括预定义代码库来达到这个目的。一个例子是基于网格的框架，它建立了一个预定义宽度的多列布局所以你可以专注于创建内容而不是排列文本块。 但是使用CSS框架好不好呢？最终来说有时候有的东西节约你的时间的代价是引发了更多地问题，导致节约的时间没有意义了。好吧，就像我们生活中的任何东西一样，使用CSS框架既有优点也有缺点。   现在有很多CSS框架，可以做好不同的事情，所以你可以找到特定的一款以帮助你更快地完成你的web开发目标。可以参考以下资源： 15 lightweight and minimal CSS frameworks 20 new frameworks for web and mobile app developers 但是你应该在你的web开发中使用这些CSS框架吗？以下是使用CSS框架的优点和缺点： 使用CSS框架的优点 1、加速你的开发 CSS框架帮你做好了基础工作因此你可以更快地......查看更多>>

发表在 css, 前端开发 | 标签为 , , , , , , , , , , , , , | 留下评论

Reset CSS 研究

发表于 2011/03/10 由 前端开发-武方博  735 views

  回顾与反思 第一份 reset css 是 Tantek 的 undohtml.css, 很简单的代码，Tantek 根据自己的需要，对浏览器的默认样式进行了一些重置。 Eric 的也是如此。 YUI 除了 cssreset, 还配套有 cssfonts 和 cssbase. cssreset 清除默认样式，cssfonts 和 cssbase 则将一些元素的默认样式重设回来。 很长一段时间，* { margin: 0; padding: 0; }和 YUI cssreset 模糊了我对 reset 的理解，让我认为 reset 就应该清除掉所有样式，将一切归零。 后来阅读 Eric 的博客，发现 Eric 并不期望大家下载他的 reset.css 后直接拿去用。而是期待能根据具体需求，适量裁剪和修改后再使用。 世间的事总会有些戏剧化，Eric 的期待没有如意。大家都想得到通用解决方案，期待银弹。在这种渴求下，YUI cssreset 很彻底很干净，广为流传。 更戏剧化的是，由于 YUI 的 cssfonts 和 cssbase 只考虑了西欧文字，对汉字的考虑不多。这导致国内用户大部分只会用 cssreset. 比喻......查看更多>>

发表在 css | 标签为 , , , , , | 留下评论

CSS reset怎么写

发表于 2011/03/10 由 前端开发-武方博  923 views

  最近看到一个词叫css reset。什么叫做css reset呢？我理解为重置css，也就是重置默认样式。我在HTML下的默认样式中讲到，一些标签元素在HTML下有一个默认属性值，我们在写css页 面的时候，为了避免在css中重复定义它们，我们需要重置默认样式（css reset）。每个人的用法和写法都不一样。找到一篇关于css reset的调查文章， 可以看看国外使用css reset的比例调查。 这里有一篇总结css reset比较全面的文章，列举了多种css reset的写法，可以看看。 译文地址查看 原文地址查看 接下来我也查看了国内的两个网站，用Firebug按F12看看他们的css reset怎么写的？ 淘宝（www.taobao.com）： html { overflow-x:auto; overflow-y:scroll; } body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td { font-weight:400; margin:0; padding:0; } h1, h2, h3, h4, h4, h5 { margin:0; padding:0; } body { ba......查看更多>>

发表在 css | 标签为 , , , , , | 留下评论

ie6和ie7下z-index bug的解决办法

发表于 2011/03/08 由 前端开发-武方博  4,838 views

  一、匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点，不会花费过多篇幅详细讲述。这里就简单带过，z-index伴随着层的概念产生的。网页 中，层的概念与photoshop或是flash中层的概念是一致的。熟悉photoshop或是flash的应该知道，层级越高（图层越靠上），越在上 面显示，如果层发生重叠，层级高的会覆盖层级低的，如果非透明或半透明，则会遮挡。 在photoshop中，层的高低就是靠手动调的，鼠标拖拽，或是ctrl+]或是ctrl+shift+[快捷键改变层的次序。如下图，鼠标拖移 改变层次序的过程中： 在flash中，类似，可以手动改变图层次序，或是使用as脚本，例如：容器对象.setChildIndex(显示对象,0)就是让对象底层显 示，而容器对象.setChildIndex(显示对象,容器对象.numChildren-1)就是最上面显示。 在CSS中，显然，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要 是relative，......查看更多>>

发表在 css | 标签为 , , , , , , , , , , , , , , , , , , , , , | 4 条评论

css垂直水平居中的整理

发表于 2011/03/08 由 前端开发-武方博  1,153 views

  记得就一句话是这样说的：table能实现的，css一定能实现；css实现的，table未必能实现。水平和垂直的居中，其实不是什么难事，前提是弄懂了各个浏览器的兼容性以及应对这些兼容问题的css hack。 方法一 html <div class="demo1"><img src="图片路径" alt="" /></div> css .demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; text-align:center;} .demo1 img { vertical-align:middle;} PS：利用行高等于盒子高度实现高级浏览器，IE6/7的hack font-size等于盒子height乘以差不多0.873的数值，参看：怿飞：图片垂直居中的使用技巧。 方法二 html <div class="demo2"><img src="图片路径" alt=""&nbs......查看更多>>

发表在 前端开发bug修复 | 标签为 , , , | 一条评论

IE6,IE7,IE8css bug大集合

发表于 2011/03/08 由 前端开发-武方博  2,174 views

  概述 IE浏览器以不支持大量的css 属性出名，同时也因其支持的css属性中存在大量bug。 本页列举了IE下的一些问题，实例样本和一些我们已知的解决方法。 尽管我已经尽力按照它们本来的性质对它们进行分类，仍有许多bug可以分在好几个部分之下，这种情况下，我将会将此bug分在普通bug这一部分。 统计 目前为止。本站点包含46个”普通bug”教程，5个”haslayout bug”教程，6个”不支持的方法”教程，一个“冲突bug”教程。总共58个教程，70个解决方法。 最近的教程发布于2009年8月19日 15:38:47 星期三 站点包含44个IE6 bug，28个IE7 bug以及19个IE8 bug。 注意版本 在教程中你会看到诸如“影响：IE8和所有以下”或“修复：所有版本”。这里的“所有”意思是IE6，IE7和IE8。 IE5和IE5.5已经是历史了，本网站没有考虑这些版本的教程和解决方案的。 普通bug 此部分包含的是那些不能快速定位为其他部分或是可以同时归类到两部分或更多部分的bug。 普通IE ......查看更多>>

发表在 前端开发bug修复 | 标签为 , , , , , , , , , , , , , , | 3 条评论

把层(div)放到iframe或者flash上面

发表于 2011/03/04 由 前端开发-武方博  817 views

蓝色理想 goos 摘录一段CSS参考手册的话： z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：元素可拥有负的 z-index 属性值。 注释：z-index 仅能在定位元素上奏效（例如 position:absolute;）！ 说明:该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。 那么，问题迎刃而解，如果需要一个层位于一个BT的层之上，那么这两个层都需要必备两个基本的属性： 1. 定位 2. z-index 例： *{font:normal 12px/120% Tahoma;} html{ border:0;} body{ background:#000; overflow:auto;} #t-iframe{ background:#fff; position:relative; z-index:1;} .box{ position:relative; background:#f7f7f7; border:solid 1px #f09; width:200px; height:200px;} pre{ margin:0; padding:8px; color:#f09; line-height:160%;} position:......查看更多>>

发表在 css | 标签为 , , | 留下评论

跨浏览器实现浮动局中对齐

发表于 2011/03/04 由 前端开发-武方博  472 views

*{ margin:0;padding:0; border:0;} body{line-height:24px; font-size:12px; font-family:Arial, Helvetica, sans-serif;} #centeredmenu { margin:0 auto;width:500px; background:#fff;border-bottom:4px solid #000;overflow:hidden;position:relative;} #centeredmenu ul {float:left;list-style:none;position:relative;left:50%;text-align:center;} #centeredmenu ul li {display:block;float:left;list-style:none;position:relative;right:50%;} #centeredmenu ul li a {display:block; margin:0 0 0 1px;width:100px;background:#ddd;color:#000;text-decoration:none;line-height:1.3em;} #centeredmenu ul li a:hover {background:#369;color:#fff;} Tab one Tab two Tab three Tab four 查看更多>>

发表在 css | 标签为 , , | 留下评论

《CSS尺寸对照表》

发表于 2011/03/04 由 前端开发-武方博  665 views

Points Pixels Ems Percent 6pt 8px 0.5em 50% 7pt 9px 0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px 0.75em 75% 10pt 13px 0.8em 80% 10.5pt 14px 0.875em 87.5% 11pt 15px 0.95em 95% 12pt 16px 1em 100% 13pt 17px 1.05em 105% 13.5pt 18px 1.125em 112.5% 14pt 19px 1.2em 120% 14.5pt 20px 1.25em 125% 15pt 21px 1.3em 130% 16pt 22px 1.4em 140% 17pt 23px 1.45em 145% 18pt 24px 1.5em 150% 20pt 26px 1.6em 160% 22pt 29px 1.8em 180% 24pt 32px 2em 200% 26pt 35px 2.2em 220% 27pt 36px 2.25em 225% 28pt 37px 2.3em 230% 29pt 38px 2.35em 235% 30pt 40px 2.45em 245% 32pt 42px 2.55em 255% 34pt 45px 2.75em 275% 36pt 48px 3em 300% 查看更多>>

发表在 css | 标签为 , , | 留下评论

CSS重设(reset)大全

发表于 2011/03/04 由 前端开发-武方博  683 views

在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。 当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视CSS的一些声明和属性。 正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方......查看更多>>

发表在 css | 标签为 , , , , , | 留下评论

ie6,ie7,ie8 css bug兼容解决记录

发表于 2010/12/07 由 前端开发-武方博  9,003 views

断断续续的在开发过程中收集了好多的bug以及其解决的办法，都在这个文章里面记录下来了！希望以后解决类似问题的时候能够快速解决 ，也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法！ 1：li边距“无故”增加 任何事情都是有原因的，li边距也不例外。 先描述一下具体状况：有些时候li边距会突然增 加很多，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是由于其低级元素ul的padding引 起，padding的上下值对li有影响，左右无影 响。所以只好笨手笨脚地把padding去掉，换成margin。这是能解决问题，但往往不是我们想要的结果，或许 还会引起其他不必要的怪现象。 现在终于发现解决这个问题的方法，其实很简单，既然是有ul引 起的，就设置ul的显示形式为*display:inline-block;即可，前面加*是只 针对IE6/IE7有效，其他浏览器并不渲染这个属性。 2：分页数字 字......查看更多>>

发表在 前端开发bug修复 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 5 条评论