WebDev

DIV CSS网页布局中常用的列表元素ul ol li dl dt dd 释义

块级元素div尽量少用,和table一样,嵌套越少越好.

ol有序列表,表现为内容前面是数字
  1. <ol>
  2. <li>内容</li>
  3. <li>内容</li>
  4. </ol>
ul无序列表,表现为内容前面是圆点而不是数字
  1. <ul>
  2. <li>内容</li>
  3. <li>内容</li>
  4. </ul>
dl dt dd的用法
  1. <dl>
  2. <dt>标题</dt>
  3. <dd>内容1</dd>
  4. <dd>内容2</dd>
  5. </dl>

dl 内容块;dt 内容块的标题;dd 内容。dt 和dd中可以再加入 ol ul li和p。
理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。

Tags: div , 布局

支持中文的Web2.0 Logo制作工具

web2.0 logoCreator非常的不错,支持中文(目前只有一种中文字体)。它还提供多种Logo样式,并可随意定义Logo文字的颜色。
地址:http://creatr.cc/creatr/。我的演示:

Tags: logo , web2.0

发现一个还不错的feed托管站

官方介绍:对用户的feed进行托管、统计、定制和广告服务。
托管可以保证用户使用永久的feed地址,即便是用户必须变更feed源地址的时候也不不必每个用户都通知到,只需登录FeedTea.com的后台,修改源地址,就这么简单的操作就可以保证订阅用户不需要做任何操作仍然可以拿到最新的更新内容。http://www.feedtea.com目前貌似还处于测试阶段。我的演示:http://fantxi.feedtea.com/

弄了几个feed托管了,http://feed.fantxi.com/(用的feedsky的),http://feeds.feedburner.com/fantxi。多的我自己都快忘记了。。

Tags: rss , feed

CSS HACK 整理

HACK1 #example {

margin:5px!important/* for Firefox */

margin:10px/* for IE6 */

margin /**/:11px/* for IE5 */

}

*+
html #example{margin:15px!important; }/* for IE7 */

说明:!important声明可以提升指定样式规则的应用优先权。上面“for Firefox” 有“!important”,“for IE7” 也要加“!important”,否则实际出来后IE7依然使用第一个maring值5px。
HACK2 #example {margin:5px; }/* for Firefox */

html #example {margin:10px;} /* for IE6 */

*+html #abc{margin:15px!important;} /* for IE7 */

说明:“for IE7”要加“!important”,“+html”能被ie7与ie5.01所识别,但ie5.01不识别important,所以*+html 再加!important 才只能被ie7识别。
HACK3 #example {

margin:5px/* For Firefox */

*margin:10px/* For IE7 & IE6*/

_margin:15px/* For IE6*/

}

说明:这样写css文件无法通过验证,但是代码可以写的比较少。
HACK4:使用IE专用的条件注释 <!--其他浏览器 -->

<
link rel="stylesheet" type="text/css" href="css.css" />

<!--[if 
IE 7]>

<!-- 
适合于IE7 -->

<
link rel="stylesheet" type="text/css" href="ie7.css" />

<![endif]-->

<!--[if 
lte IE 6]>

<!-- 
适合于IE6及以下 -->

<
link rel="stylesheet" type="text/css" href="ie.css" />

<![endif]-->

说明:条件注释的语法:
[*]gt /Greater than/大于/<!--[if gt IE 5.5]>
[*]gte /Greater than or equal to/大于等于/<!--[if gte IE 5.5]>
[*]lt /Less than/小于/<!--[if lt IE 5.5]>
[*]lte /Less than or equal to/小于等于/<!--[if lte IE 5.5]>
[*]! /Note/不等于/<!--[if !IE 5.5]>        
HACK5 example{

margin5px;/*FF*/

>margin10px;/*IE5*/

}

example/*IE5.5 */{

>
/*IE only*/margin15px;/*IE6*/

>/*IE only*/margin /*IE5.5*/20px;

}

说明:“margin”定义的顺序不能改变,即FF-IE5-IE6-IE5.5。对于IE的定义在属性前要加“>”,因为“example/**/{}”这个HACK在FF中可以识别。

Tags: css

CSS实现简单的图片防盗链代码

css中添加以下代码:

/*=========图片防盗链===========*/
img {
 filter:expression(
 this.不能去掉 ? "" :
 (
 (!this.complete) ? "" :
 this.runtimeStyle.filter = ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "')") +
 String(this.不能去掉 = true).substr(0, 0) +
 (this.src = "http://www.xxx.com/xxx.gif").substr(0, 0)
 )
 );
}

然后随便找个图替换上面的图片路径,就OK了.PS:看源代码图片还是能保存的.

Tags: 盗链 , 代码 , css