Archive for 十一月, 2009

网页截屏3

ciudadesycostas.com

ciudadesycostas.com

ciudadesycostas.com

ciudadesycostas.com


body标签到底是个啥?

和head一样,如果页面没有这个标签,浏览器会自动加上去。

1
2
3
4
5
6
7
<html>
<script type=“text/javascript”>
    window.onload = function(){
        alert(“Body个数是:”+document.getElementsByTagName(“body”).length);
    }
</script>
</html>

那么当页面中出现好几个body,浏览器又会怎么处理呢?
只会保留第一对出现的body,其他的都会删掉,但其他body里的内容仍然会保留,你也可以自己去测试一下,比较有意思。
body在各浏览器中都非常诡异,尤其是IE,问题多多。body除了像其他标签一样可以加class加id加事件,还有一些特性的性质,也可称之为bug。

一、IE中body默认的margin值为”15px 10px 15px 10px”,非IE的浏览器默认值为”8px 8px 8px 8px”。

二、body在默认情况下,背景色会突破border,不是它该占有的区域也会有它的背景。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>
<style type=“text/css”>
    html {border:1px solid green;}
    body {border:1px solid red;background:#FFFFCC;}
</style>
</head>
<body>
    A
</body>
</html>

三、如果给html一个背景,body的背景就会回到正常的区域,不再冲破border(你也可以发现html的背景也冲破了它自己的border)。可以利用这个性质,把body当成普通的标签来用,这样有时就能节省”wrap”之类的外包标签。可以给body宽度/高度,加背景,让它水平垂直居中等,都是可以做到的。

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>
<style type=“text/css”>
    html {background:#CCFFFF;border:1px solid green;}
    body {border:1px solid red;width:500px;margin:0 auto;background:#FFFFCC;}
</style>
</head>
<body>
    HTML加了背景
</body>
</html>

四、在IE中,如果给html和body都加上背景,如果给body设置”width:500px;margin:0 auto;”,你会发现body中的position值为relative的元素在你改变浏览器窗口大小时,并不会随着body移动(其他浏览器正常),刷新一下才会跑过去。解决这个问题需要给body也加上position:relative,为什么这样就不知道了,或许可这样回答:“因为这是IE!”。

五、IE中body的默认z-index值为“0”,而其他浏览器为“auto”。这个还不能怪body,因为IE给所有标签的z-index默认值都是0,而其他浏览器都是给auto,除了Safari和Chrome(html为0,其他标签为auto)。

六、IE中光给body“overflow:hidden”是隐藏不了滚动条的,其他浏览器可以。这个貌似是body搞的鬼,事实上不是body的错,IE默认给了html“overflow:scroll”,其他浏览器都给visible,所以在IE中想要屏蔽滚动条的话,需要给html加上“oveflow:hidden”。

七、如果把html和body的overflow都设为visible,那么在IE就不会有滚动条,算正常的。但其他浏览器中,还是有滚动条,把其中任意一个改成hidden都会屏蔽滚动条,难道html和body还公用滚动条?

转自:xhlv童鞋


我是个感性的人,我要做理性的事

@huairen :每天阅读国外的有关一些交互产品的文章,和看他们的一些截图。发现国外的bloger更多的是数据,实验,结果的对比,和对现象的动机原理分析,而国内的可用性体验博客,多是一家之言,感觉,认为和用户是xxxx。 体验和细节,要沉淀和整理要挖掘后面的现象和规律。
via:不许联想 :贵国人一向不爱用数据说话,干什么都喜欢拍脑袋,很感性,他认为他喜欢米高·集训,就觉得全国人民就都喜欢。

以上是我今天在twitter上的两条RT,随后看到蓝色理想网站上讨论display:none;和visibility:hidden;区别的帖子,由这个帖子引入到《图片的HTTP请求》这篇博文。一路下来感受颇深,要亲身做到自己赞同的观点不是那么容易的事。两条推说的是事理,我百分百赞同,看论坛里的帖子某一楼层用两个英文单词的意思来解释它们的不同,我心说这样多么简单明了,何必像某位大侠盖了一层一层楼,写了一遍又遍代码,待看到《图片的HTTP请求》一文,我服了,这才是真正做事情的,像考究学问一样研究代码和浏览器之间的差异。一次次为贬低中国填鸭教育,推崇美式实践教育的做法背书毫无用处,一点点的强迫自己改变,清楚的认识我是个感性的人,我要做理性的事。

1 Comment more...

what beautiful HTML looks like

请看原文:http://css-tricks.com/what-beautiful-html-code-looks-like/

  • HTML5 – HTML5 and it’s new elements make for the most beautiful HTML yet.
  • DOCTYPE – HTML5 has the best DOCTYPE ever
  • Indentation – Code is indented to show parent/child relationships and emphasize hierarchy.
  • Charset – Declared as first thing in the head, before any content.
  • Title – Title of the site is simple and clean. Purpose of page is first, a separator is used, and ends with title of the site.
  • CSS – Only one single stylesheet is used (media types declared inside stylesheet), and only served to good browsers. IE 6 and below are served a universal stylesheet.
  • Body – ID applied to body to allow for unique page styling without any additional markup.
  • JavaScript – jQuery (the most beautiful JavaScript library) is served from Google. Only a single JavaScript file is loaded. Both scripts are referenced at the bottom of the page.
  • File Paths – Site resources use relative file paths for efficiency. Content file paths are absolute, assuming content is syndicated.
  • Image Attributes – Images include alternate text, mostly for visually impaired uses but also for validation. Height and width applied for rendering efficiency.
  • Main Content First – The main content of the page comes after basic identity and navigation but before any ancillary content like sidebar material.
  • Appropriate Descriptive Block-Level Elements – Header, Nav, Section, Article, Aside… all appropriately describe the content they contain better than the divs of old.
  • Hierarchy – Title tags are reserved for real content, and follow a clear hierarchy.
  • Appropriate Descriptive Tags – Lists are marked up as lists, depending on the needs of the list: unordered, ordered, and the underused definition list.
  • Common Content Included – Things common across multiple pages are inserted via server side includes (via whatever method, language, or CMS that works for you)
  • Semantic Classes – Beyond appropriate element names, classes and IDs are semantic: they describe without specifying. (e.g. “col” is much better than “left”)
  • Classes – Are used any time similar styling needs to be applied to multiple elements.
  • IDs – Are used any time an element appears only once on the page and cannot be targeted reasonably any other way.
  • Dynamic Elements – Things that need to be dynamic, are dynamic.
  • Characters Encoded – If it’s a special character, it’s encoded.
  • Free From Styling – Nothing on the page applies styling or even implies what the styling might be. Everything on the page is either a required site resource, content, or describing content.
  • Comments – Comments are included for things that may not be immediately obvious upon reviewing the code.
  • Valid – The code should adhere to W3C guidelines. Tags are closed, required attributes used, nothing deprecated, etc.
1 Comment more...

在不添加标签的情况下解决浮动问题

在不添加标签的情况下解决浮动问题:

<div id=”A”>

<div id=”B” style=”float:left”></div>

</div>

================回答问题的分割线==================

#A { overflow:hidden; zoom:1;}

#A:after { content:”.”; height:0; display:block;clear: both;visibility:hidden;}

================答案解释的分割线==================

对于 IE 浏览器:使用了 zoom:1 来触发 haslayout

zoom语法:
zoom : normal | number
参数:
normal :  使用对象的实际尺寸
number : 百分数|无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值 
说明:
设置或检索对象的缩放比例。
示例:
div {zoom : 0.5; }

—————————-通俗语言—分割线—————————-

用css中的zoom属性可以让网页实现IE7世界之窗遨游中的放大缩小功能。
比如你想让你的网页缩小为原来的一半,那么就在body中加入style=”zoom:0.5″,如:
<body style=”zoom:0.5″>

对非 IE 浏览器:使用:after 伪元素在元素之后添加内容。

  1. 用content属性添加用于清除的额外内容,一般为“.”。
  2. 设display:block;因为display的默认值是”inline”, 不能收到clear的特性。
  3. 将清除容器的高度设为零,height:0。
  4. 清除浮动。
  5. 可见度设为隐藏。

:after 伪元素通常和content配合使用,IE不支持此伪元素,非IE 浏览器支持,所以并不影响IE/WIN浏览器。( IE 8 支持 content 属性,但对:after 伪元素的支持并不完全。)

—————————什么是:after———————————

:after伪元素允许在元素内容的最后面插入生成内容。默认地,这个伪元素是行内元素,不过可以使用属性 display 改变这一点。

此样式会在每个 h1 元素之后插入一张图片:
h1:after{
content:url(image.gif);}

================额外话的分割线==================

<div id=”A”>

<div id=”B” style=”float:left;float:none;”></div>

</div>

这样虽然可以真的,完完全全的清除浮动,但并非我们所需要的。


Copyright © 2008-2012 Chesanqi's Web World. All rights reserved.
Jarrah theme by Templates Next | Powered by WordPress