(x)html+css

(x)html+css

【IE6的疯狂系列】IE6下position:absolute相邻元素margin-top失效的bug

由 愚人码头 撰写  |  2010/08/24 11:11 发表在 (x)html+css  |  评论 (7)

昨天发现了一个ie6的bug，绝对定义(position:absolute)的相邻元素margin-top竟然会失效；

看demo把（请用ie6围观）：http://www.css88.com/demo/absolute-bug/absolute-bug.html

这里有几个条件：

  1. 相邻元素是有width属性的，如果去掉width属性，margin-top又会生效，点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-1.html
  2. 增加相邻元素浮动，margin-top也会又会生效；点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-2.html

如果没有复杂的背景什么的可以使用padding-top替换margin-top；

还可应在相邻元素间插入一个空标签的方法：


<div style="position: absolute; width: 500px; top: 0; left: 0; height: 30px; background-color: #666;">此处显示新 Div 标签的内容</div>
<!--[if IE 6]>
<div></div>
< ![endif]-->
<div style="margin-top: 35px; width: 100px; float: left; background-color: #3fc;">此处eeeeeeeee显示新 Div 标签的内容</div>

点击查看：http://www.css88.com/demo/absolute-bug/absolute-bug-4.html

————————————————
另赠送一个IE6下与float元素相邻的position:absolute元素消失BUG
围观地址：http://blog.dengsa.com/?p=342 http://www.webchina110.cn/?p=105

该日志被浏览614次 标签： | 阅读全文

使<pre>的内容自动换行

由 愚人码头 撰写  |  2010/07/29 00:07 发表在 (x)html+css  |  评论 (9)

<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

而我们经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长，结果会造成页面撑开或者代码超出边界。非常难受，如果用overflow:hidden那么会将原来的代码隐藏掉，用overflow:auto则会出现滚动条，代码也不方便阅读。

点击查看：http://www.css88.com/demo/pre/index-1.html

今天折腾了一个晚上终于搞定<pre>的内容自动换行的问题：

1.先尝试使用：word-wrap: break-word;将内容自动换行，IE，OP，Chrome，Safari都可以，FF就悲剧了。

点击查看：http://www.css88.com/demo/pre/index-2.html

2.查看了pre的浏览器默认样式： Read More »

该日志被浏览2068次 标签：: | 阅读全文

各浏览器的默认CSS

由 愚人码头 撰写  |  2010/07/28 23:18 发表在 (x)html+css  |  评论 (6)

在丸子主编的帮助下终于找到了各浏览器的默认CSS。只要是由于今天解决了一个特殊的问题，依靠的就是看各浏览器的默认CSS，然后重置它，所以很多时候浏览器的默认css还是很有用的。

各浏览器的默认CSS可以在这里http://www.iecss.com/找到，贪心一下，把这些样式都保存了一份：

  1. IE6(下载)
  2. IE7(下载)
  3. IE8(下载) Read More »
该日志被浏览3187次 标签：: | 阅读全文

页面模块化实现的条件和基本实现思路

由 愚人码头 撰写  |  2010/07/10 16:14 发表在 (x)html+css, 前端观察  |  评论 (8)

页面模块化实现的很大的受制于页面的结构和表现；一个统一的页面结构和表现能很好的实现页面的模块话。

比如一个“网友评论”模块这个会在很多地方使用到，比如日志，照片，等等，如果这个“网友评论”模块结果和表现是统一的那么我们就不用重复劳动去重新设计制作页面甚至是行为等等，包括后台的数据存贮。

《页面模块化（设想）》上面总结了页面模块化的优点，《前端模块化设计思路》也提到要做到模块化的前提条件：

为了做到这一点，我们需要有一个设计规则，所有的模块都在这个规则下进 行设计。良好的设计规则，会把耦合密集的设计参数进行归类作为一个模块，并以此划分工作任务。而模块之间彼此通过一个固定的接口（所谓的可见参数）进行交互，除此之外的内部实现（所谓的隐参数）则由模块的开发团队进行自由发挥。

我们应给怎么样建立一套设计规则呢？

首先我们要从页面的表现开始，视觉上我们要采用统一的视觉设计规则，比如：

  1. 应用网页栅格化来确定网页布局；
  2. 页面标题栏，字体大小，文本间距统一；
  3. 表单类的表现统一，比如按钮，文本框等；
  4. 图片规格统一；
  5. 行为类的弹窗，浮层等表现统一；
  6. 等等…

其次为模块编写统一的html结构，

  1. 要合理使用语言化的标签；
  2. 可以保存成代码片段或者单独的html文件等，
  3. 如果需要可以加上适当的注释；
  4. 考虑扩张性和维护性；

Read More »

该日志被浏览2264次 标签：: | 阅读全文

页面模块化（设想）

由 愚人码头 撰写  |  2010/07/09 11:22 发表在 (x)html+css, 前端观察  |  评论 (9)

这段时间做一个项目，其实项目本身很简单，页面表现和结构甚至是交互都是现有的，就是将现有的多个项目页面一些功能做一下重新的拼装组合。

看上去很简单，其实做起来非常痛苦。因为由于历史和前期项目开发的原因其实做这些拼装是很痛苦的事情。现在碰到的一个问题，要开一个C项目，使用A项目的头部、底部、布局，使用B项目的模块功能，同时A项目和B项目本身存在这千丝万缕的联系，很多功能A项目和B项目功能是重叠的，表现上又是很统一、但是又有细微的区别。A项目和B项目都相对独立，css样式也是很独立的，根据每个项目都有一套独立的样式。结果导致在项目维护中A项目改了，B项目也要改，得改2个地方不说。现在有出来一个C项目，又是A项目和B项目合体……，开发时候一些公用样式受到A项目和B项目影响，无法公用不说，维护成本可想而知。这个几乎让我崩溃。

如何既能提高开发效率又能降低维护成本是最为一个前端开发工程师必须考虑的问题。正好前几天程序员和我讨论模板的问题，因为他们在开发C项目的时候也碰到了很多和我类似的问题。模板就是将页面的某部分分装成独立的版块，便于各个使用他的地方调用。那么我们的html和css可不可以按照功能模块或者展现模块来划分呢？答案显然是肯定的，至少在我们公司、我们网站由于页面表现和功能模块比较统一，这无疑给页面模块化提供了很好的萌芽环境。 Read More »

该日志被浏览1931次 标签：: | 阅读全文

WebKit CSS3 动画基础

由 愚人码头 撰写  |  2010/05/19 16:30 发表在 html5+css3  |  评论 (6)

前几天在Qzone上看到css3动画，非常神奇，所以也学习了一下。首先看看效果http://www.css88.com/demo/css3_Animation/

很悲剧的是css3动画现在只有WebKit内核的浏览器（Safari和Chrome）支持，虽然应用还不是时候，但是效果却不可低估。

在哪里定义动画效果？

css3动画一般通过鼠标事件或者说状态定义动画，通常我们可以用CSS中伪类和js中的鼠标事件来定义。

动态伪类 起作用的元素 描述
:link 只有链接 未访问的链接
:visited 只有链接 访问过的链接
:hover 所有元素 鼠标经过元素
:active 所有元素 鼠标点击元素
:focus 所有可被选中的元素 元素被选中

js的事件也可以，比如click，focus，mousemove,mouseover,mouseout等等

transition的基本语法：

css3动画通过transition属性和其他css属性（颜色，宽高，变形，位置等等）配合来实现。

transition的语法：

transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*

当然这是简写，我们也可以完整的写：

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*；

transition-duration ： <time> [, <time>]*

transition-timing-function ： ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]*

transition-delay ： <time> [, <time>]*

Read More »

该日志被浏览2562次 标签：:, , | 阅读全文

模拟input type=file

由 愚人码头 撰写  |  2010/05/05 19:16 发表在 (x)html+css, JS与RIA  |  评论 (6)

表单中的input type=”file”在前端开发中经常会用到，但是很悲剧的是input type=”file”在各个浏览器下表现不统一，样式很难起作用；

通常我的设计师是非常爱美的，如果真的要还原设计稿，只能通过文本框和按钮去模拟一个input type=”file”。

HTML代码如下：


<div class="type-file-box">
<form action="" method="post" name="form1" id="form1">
<input name="fileField" type="file" id="fileField" size="28" />

</form>
</div>

这是一个基本的input type=”file”。当然这里你可能没看到文本框和按钮的代码，我们可以在后面的js中将文本框和按钮追加到html中。

注意：size=”28″是在firefox下input type=”file”的宽高是不能通过样式来定义的，所以用了size属性来控制input type=”file”的宽度

CSS代码如下：


.type-file-box{ position:relative;width:260px}

input{ vertical-align:middle; margin:0; padding:0}

.type-file-text{ height:22px; border:1px solid #cdcdcd; width:180px;}

.type-file-button{ background-color:#FFF; border:1px solid #CDCDCD;height:24px; width:70px;}

.type-file-file{ position:absolute; top:0; right:0; height:24px; filter:alpha(opacity:0);opacity: 0;width:260px }
注意：这里的filter:alpha(opacity:0);opacity: 0是让input type=”file”全透明，这样用户看不到input type=”file”。层级在文本框和按钮之上。这样用户在点击按钮的时侯实际上点击的input type=”file”；
js代码：

$(function(){
var textButton="<input type='text' name='textfield' id='textfield' class='type-file-text' />  <input type='submit' name='button' id='button' value='浏览...' class='type-file-button' />"
$(textButton).insertBefore("#fileField")；
$("#fileField").change(function(){
$("#textfield").val($("#fileField").val());
);
);
这里用了jq当input type=”file”得值onchange的的时侯将文本框的值设置成input type=”file”的值，OK了
该日志被浏览2548次 标签： | 阅读全文

让IE实现CSS3中的border-radius（圆角）

由 愚人码头 撰写  |  2010/04/28 23:56 发表在 (x)html+css, html5+css3  |  评论 (9)

今天网上看到了一个让IE实现CSS3中的border-radius（圆角）:


.box-radius {
border-radius: 15px;
behavior: url(border-radius.htc);
}

演示地址：http://www.css88.com/demo/border-radius/

下载htc文件（源码来自）：http://code.google.com/p/curved-corner/

注意：htc文件是要放在服务器上，放在本地测试是不行的！

该日志被浏览2214次 标签：:, | 阅读全文

让IE 6,7,8支持部分的CSS3属性

由 愚人码头 撰写  |  2010/04/14 15:56 发表在 (x)html+css, html5+css3  |  评论 (8)

大家知道IE 6,7,8不支持CSS3中新加属性，老外写了一个htc，可以让IE 6,7,8模拟部分的CSS3属性,包括：border-radius（圆角），box-shadow（阴影），text-shadow（文本阴影）：

注意：htc文件是要放在服务器上，放在本地测试是不行的！

见代码：


.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

behavior: url(ie-css3.htc); /* 可以让IE 6,7,8模拟部分的CSS3属性 */
}

下载htc文件：http://www.css88.com/demo/ie-css3/ie-css3.htc

原站：http://fetchak.com/ie-css3/

该日志被浏览2383次 标签：: | 阅读全文

CSS3 和 HTML5 兼容速查表

由 愚人码头 撰写  |  2010/04/14 02:23 发表在 (x)html+css, html5+css3  |  评论 (2)

原文地址：http://www.findmebyip.com/litmus/#target-selector

从网页上截了了个图下来：

该日志被浏览1788次 标签：:, | 阅读全文