存档

‘HTML/CSS’ 分类的存档

block 和 inline

2009年8月17日

block-level elements (块级元素)

inline elements (内联元素)

所有允许被 BODY 元素包含的元素,要么是块级的;要么是内联的;要么既可以算作块级的,也可以算作内联的。但是绝对不存在一个能被BODY包含,但即非块级,又非内联的元素。

更直白点说块级元素就是元素本身会占据一个矩形的位置,是一个 box,默认一个块级元素会占用一行的位置,而内联元素是只在一行内占据一个或者几个字符的位置。

块级元素实例

<div>这里是测试文本</div>

内联元素实例

<div>这里是测试文本<span>这里是内联样式的文本</span></div>

常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等等。

常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等等。

另外,SCRIPT, OBJECT, MAP, BUTTON, DEL, INS 这些元素,既可以作为块级元素,也可以作为内联元素。

kingabird HTML/CSS

2009 CSS Naked Day – 2009网页裸奔节

2009年4月9日
CSS Naked Day 2009

今天一大早起来就看到 twitter 好多人在讲 CSS Naked Day,以前还真是不知道这是个什么东西,就顺便搜索了一下。

看来自己落伍了很多啊。

以下转自:http://blog.taoxian.info/2009-css-naked-day.html

CSS Naked Day 的来历

CSS Naked Day,也称CSS裸奔节或CSS裸奔日,

在裸奔节这天,参加裸奔节的Blog 将会去除页面上所有的 CSS 样式和广告裸奔整整一天,通过这个节日来重视CSS的重要性.当然你的网站如果是用table来布局的话这个节日对你来说并不是很合适.在2006年有将近800个国际知名网站参与这个节日.

CSS Naked Day 的目的

推动Web标准、提倡简洁为美、使用正确的 (x)html语义标记、良好的层次结构。暂时把页面设计抛弃,直接展示<body>内容!

历届CSS Naked Day的举办时间

第一届CSS裸奔节:2006年4月5日

第二届CSS裸奔节:2007年4月5日

第三届CSS裸奔节:2008年4月9日

第四届CSS裸奔节:2009年4月9日

如何加入CSS Naked Day

使用如下的PHP代码

<?php
function is_naked_day($d) {
$start = date(’U', mktime(-12, 0, 0, 04, $d, date(’Y')));
$end = date(’U', mktime(36, 0, 0, 04, $d, date(’Y')));
$z = date(’Z') * -1;
$now = time() + $z;
if ( $now >= $start && $now <= $end ) {
return true;
}
return false;
}
?>

在你的head头文件中这样调用

<head>

<?php
if ( is_naked_day(9) ) {
echo ‘<!– naked day has no styles –>’;
} else {
echo ‘<link rel=”stylesheet” type=”text/css” href=”styles.css” />’;
}
?>

</head>

有关CSS Naked Day的插件

当然,如果你使用的是WordPress,且像我一样不喜欢麻烦的话,这里有专门的CSS Naked Day 的插件帮你完成这项功能,非常简单!点击打开WordPress CSS Naked Day插件页面下载后启用即可.

除了WordPress,还会有其他开源程序的插件,可以在CSS Naked Day的官方页面查看.

除此之外,你还可以在在CSS Naked Day的官方页面提交你的网站地址,据作者的介绍,你的网址将会在一个工作日之内出现在页面的裸奔网站列表中,当然,列表的现实将是随机的.因为相应这个CSS Naked Day活动的网站实在是太多了.

kingabird HTML/CSS