显示标签为“Web CSS”的博文。显示所有博文
显示标签为“Web CSS”的博文。显示所有博文

2008年12月30日星期二

IE6 重复字符的bug及解决方法

当多个浮动的元素彼此跟随,中间加注释的时候,最后一个浮动元素内的文本偶尔会复制到最下面去。学名Duplicate Characters Bug

程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>多了一只猪</title>
</head>
<body>
<div style="width:400px">
<div style="float:left"></div>
<!-- -->
<div style="float:right;width:400px">↓这就是多出来的那只猪</div>
</div>
</body>
</html>


可以通过以下的办法来解决:
   
1、不放置注释。最简单、最快捷的解决方法
   
2、注释不要放置于2个浮动的区块之间。
    
3、将文字区块包含在新的<div></div>之间,如:<div style="float:right;width:400px"><div>↓这就是多出来的那只猪</div>& lt;/div>。
   
4、去除文字区块的固定宽度,与3有相似之处。
   
5、有的人在猪后加一个<br />或者空格,但只是消除现象。
   
6、不要给浮动元素设置多宽度,使其不会到达包含元素的底部,或者对最后一个元素设置margin-right: -3px;或者更小。
   
7、注释可以这样写:<!--[if !IE]>Put your commentary in here...<![endif]-->

2008年12月13日星期六

SEO Analysis

Title Tag Analysis
The maximum number of characters we recommend for this Tag is 60.
Meta Description Tag Analysis
The maximum number of characters we recommend for this Tag is 150.
Meta Keywords Tag Analysis
Our recommended maximum number of characters for this tag is 874.

IMG ALT Tag Analysis
This section is available in the Member's area of our site when using the Web Page Analyzer. Many search engines consider this area when indexing and looking for keywords. Optimizing this area is quite easy when you know what search engines are looking for.
Keyword Density Analysis
This section is available in the Member's area of our site when using the Web Page Analyzer. This is probably one of the most important ranking factors of a Web page and is easily optimized with our Keyword Density Manipulizer™. Not all keyword density tools analyze this properly. In fact, virtually all those we have tested are wrong! Having the right tool is a must. Our tools are developed by full text search engine development engineers. Getting the wrong information can mean complete SEO failure.

Top Keyword Phrase Analysis
This section is available in the Member's area of our site when using the Web Page Analyzer. Two and three word phrases account for more than 55% of searches done using major search engines as published by Rackstat.com. Properly optimizing for this can net you a ton of additional traffic you may be missing out on. Our two and three word phrase analysis reports helps you to identify and capitalize on this easly.

2008年12月4日星期四

SEO常用名词

SEO常用名词
与Source Code有关的SEO常用语:
1. Title Tag /Meta Title
<title>Smarter.com Comparison Shopping: Compare Prices, Discounts & Reviews on Millions of Products</title>
2. Meta Description
<Meta NAME="description" content="Shop and save at Smarter.com: Compare prices, coupons and rebates from thousands of online stores to get the lowest price. Before you buy, see products up-close in video reviews. Read shopping blogs, buying guides and unbiased product and website reviews to find out how other consumer's rate their purchases. There are millions of items for sale online. Comparison shop to find the right one for you at the best prices on the Internet." />
3. Meta Keyword
<meta NAME="keywords" content="comparison shopping, compare prices, product reviews, merchant reviews, compare products, shop and compare, best price, purchase and buy online, shop & save, store, shop at home, Smarter.com, site, internet, links, cost, website, consumer information, service" />
4. Other Meta Tag:
<meta content="index,follow" name="robots" />
<META NAME="ROBOTS" CONTENT="NOYDIR">
<META NAME="ROBOTS" CONTENT="NOODP">
<META name="y_key" content="5308ed89f65f99e8" />
<meta content="www.smarter.com" name="copyright" />

5. Meta Tag
Meta Title + Meta Description + Meta Keyword
6. H Tag/Header Tag
<H1>…</H1>, <H2>…</H2> etc.
7. Alt Tag
alt=” ” (适用于图片), title=””(适用于文字链接)
8. List Tag
<ul>, <ol>, <li> and <dl>, <dt>, <dd> etc.
9. Frame Tag
<frame>, <iframe>, <frameset> etc.
10. Nofollow Tag
<a href="/email.php?url=aHR0cDovL3d3dy5zbWFydGVyLmNvbS8=" rel="nofollow" >Email this Page</a>
11. <P> Tag
<p>Monday I came to you with some expiring Dell deals, and if those didn't spark your interest, maybe this HP deal will.</p>

与SEO技术相关的常用语:
SE - 搜索引擎
SERP - 搜索引擎结果页面
Search Engine Ranking/Ranking - 搜索引擎排名
Keyword Density - 关键词密度
Page Rank (简称PR值) - Google衡量网页重要性的工具,测量值范围为从1至10分别表示某网页的重要性。Google工具栏可以随时获得某网页的PR值。
Inbound Link = External Links (外部链接)- 被其他网站链接的数量
Outbound link - 一个网站链接到其他网站的数量
Internal links (内部链接)- 本网站页面之间的链接
Backward Links(反向链接)= Internal Links + External Links - 外部链接与内部链接的总和
Open Directory Project (简称ODP) - 目录索引网站,如Dmoz,Yahoo,Google
Redirection - 跳转,有301,302两种跳转方式
404/Not Found Page
Link Popularity: 链接广度
友情链接/交换链接/Reciprocal Link
One-way Link
Three-way Link
Paid Link
Hidden Link/Text/Content
SPAM = Link Spam + Content Spam - 在SEO领域里,它指的是一种有目的有计划地提高网站在搜索引擎排名的作弊技术,一旦被发现,网站将会被屏弊
Link Spam - 作弊链接/恶意链接(也有称作:link farms 链接工厂)
Keyword Stuffing - 关键词堆砌
Deceptive redirects 欺骗性重定向 - 指把用户访问的第一个页面(争夺排名页)迅速重定向至另一个内容完全不同的页面。
Shadow Domain - 这是最常见的欺骗性重定向技术,通过欺骗性重定向使用户访问另外一个网站或页面。
Doorway Page 门页- 也叫“桥页”。是为某些关键字特别制作的页面,专为搜索引擎设计,目的是提高特定关键词在搜索引擎中的排名所设计的富含目标关键词的域名,且重定向至另一域名的真实网站。搜索引擎的Spiders往往忽略对那些自动重定向到其它页的页面的检索。
Spider = Robot = Bot = Slurp – 搜索引擎爬虫
Mirror Sites/Duplicate Sites (镜象站点) - 通过复制网站的内容并分配以不同域名和服务器,以此欺骗搜索引擎对同一站点或同一页面进行多次索引。现在大多数搜索引擎都提供有能够检测镜象站点的适当的过滤系统,一旦发觉镜象站点,则原站点和镜象站点都会被从索引数据库中删除。
Duplicate Content - 複製的內容通常指的是一個頁面上的內容是從網上別的地方COPY來的,不努力工作 就想得到好排名。GOOGLE有一套很出名的過濾機制去尋找複製文本,一旦它發現兩個或更多同樣的文本它就會評估這些文檔去看哪一個是他們收錄時間最長 的,最新的網頁會被刪除或排在比較靠後的結果中。

2008年11月30日星期日

CSS调试工具Multiple IE - IE5 IE6 IE7 多版本共存

Web标准是一个潮流与趋势,现在很多网站已经非常重视网站的构建方式,但我们需要面对兼容各版本浏览器的问题,这是一个非常让我们头疼的问题,微软 IE7的推出,在网页设计时需要同时考虑兼容ie7前面的IE5/IE5.5/IE6各个版本。这给我们的CSS调试测试增加了难度,我们一台PC,如何 才能集成所有的这些浏览器环境呢?最近终于找到IE版本合集软件包Multiple_IE。强烈推荐给大家,大家升级到IE7后也可方便测试网页的兼容 性!



  过多的浏览器给 Web开发造成了困难,颇有抱怨的味道。不过抱怨归抱怨,对于安装有 IE7 的电脑,除非卸载 IE7,否则只能靠虚拟机的方式来运行 IE 的其它版本。有了 Multiple IE就可以在现有的系统上同时运行 IE 3 - IE7。这对网站设计者来说好处是不言而喻的。及大的方便了我们的开发工作,提高工作效率。

  Web标准是一个潮流与趋势,现在很多网 站已经非常重视网站的构建方式,但我们需要面对兼容各版本浏览器的问题,这是一个非常让我们头疼的问题,微软IE7的推出,在网页设计时需要同时考虑兼容 ie7前面的IE5/IE5.5/IE6各个版本。这给我们的CSS调试测试增加了难度,我们一台PC,如何才能集成所有的这些浏览器环境呢?最近终于找 到IE版本合集软件包Multiple_IE。强烈推荐给大家,大家升级到IE7后也可方便测试网页的兼容性!

  过多的浏览器给 Web开发造成了困难,颇有抱怨的味道。不过抱怨归抱怨,对于安装有 IE7 的电脑,除非卸载 IE7,否则只能靠虚拟机的方式来运行 IE 的其它版本。有了 Multiple IE就可以在现有的系统上同时运行 IE 3 - IE7。这对网站设计者来说好处是不言而喻的。及大的方便了我们的开发工作,提高工作效率。



  Mutiple IE确实是一个非常好的测试工具,强烈推荐的同时感谢!Mutiple IE非常好用,体积也不大,才10.3M,里面包括从IE3.0到IE6.0的所有版本,安装时可以根据您的需要自由选择,而且和IE7也没有冲突!对 WEB开发人员来说这个工具是不可或缺的!

  官方网站地址:http://tredosoft.com/Multiple_IE
  下载地址如下:http://tredosoft.com/files/multi-ie/multiple-ie-setup.exe

2008年11月16日星期日

301重定向和302跳转的区别

301和302 Http状态有啥区别?

301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于:
301 redirect: 301 代表永久性重定向(Permanently Moved),
302 redirect: 302 代表临时性重定向(Temporarily Moved ),
当然 Http 状态 200 标示没有任何问题发生。

301 重定向是网页更改地址后对搜索引擎友好的最好方法,只要不是暂时搬移的情况,都建议使用301来做转址。

301重定向是目前Chris.DL在对每个客户提供SEO服务时,必定会讲到的东西,过程中,往往会发现大家使用的都是302跳转,虽然最终看到的效果是一样的,但对搜索引擎来讲,301和302还是有区别的。

那么为什么不能用302呢?下面摘自Zac的一段文章内容


302重定向和网址劫持(URL hijacking)有什么关系呢?这要从搜索引擎如何处理302转向说起。从定义来说,从网址A做一个302重定向到网址B时,主机服务器的隐含意思是网址A随时有可能改主意,重新显示本身的内容或转向其他的地方。大部分的搜索引擎在大部分情况下,当收到302重定向时,一般只要去抓取目标网址就可以了,也就是说网址B。

实际上如果搜索引擎在遇到302转向时,百分之百的都抓取目标网址B的话,就不用担心网址URL劫持了。

问题就在于,有的时候搜索引擎,尤其是Google,并不能总是抓取目标网址。为什么呢?比如说,有的时候A网址很短,但是它做了一个302重定向到B网址,而B网址是一个很长的乱七八糟的URL网址,甚至还有可能包含一些问号之类的参数。很自然的,A网址更加用户友好,而B网址既难看,又不用户友好。这时Google很有可能会仍然显示网址A。

由于搜索引擎排名算法只是程序而不是人,在遇到302重定向的时候,并不能像人一样的去准确判定哪一个网址更适当,这就造成了网址URL劫持的可能性。也就是说,一个不道德的人在他自己的网址A做一个302重定向到你的网址B,出于某种原因, Google搜索结果所显示的仍然是网址A,但是所用的网页内容却是你的网址B上的内容,这种情况就叫做网址URL劫持。你辛辛苦苦所写的内容就这样被别人偷走了。



其实302的跳转本身是没有错的,但因为被一些作弊者用多了,Google当然对这个就比较敏感了,毕竟Google面对的是如此海量的数据,你难道不怕被误杀吗?

Google的官方内容一再强调用301来转移内容,况且,301和302在程序上的设置相差很小,既然如此,何必要冒险用302呢?

2008年11月15日星期六

解决 firefox 中不支持 cursor:hand (超连接小手)

firefox 中不支持 cursor:hand

style="cursor:hand;"

在IE中支持能正常显示成手;在firefox中却不能正常显示

使用下面方法可以支持 IE & Firefox两种浏览器:
style="cursor:pointer;"

用CSS 实现 image按钮 详解 带实例

今天遇到一个问题,写下来方便大家以后遇到同样的总是,不用再浪费时间去研究.
image button可以<input type="image" src="some.jpg" />来简单地实现。
但由于某些原因(比如下面的原因),我们可能希望使用CSS来实现image按钮。
原由:
<input type="image" ... 提交时会发现URL后面跟着x,y这样参数,看上去很不爽,对SEO来说更不爽,于是改成用 <input id="submit"....
下面就用了CSS实现 image 按扭:

////////////css //////////////////
.submitGo{
background-color: transparent;
border: 0px;
padding: 0px;
overflow: hidden;
font-size:0px; /* 把文字的大小设置为0,不显示文字 */
width: 82px; /* backgroud-image width */
height: 40px; /* backgroud-image height */
margin-left: 10px; /* 可以不用,我用来表示与前面输入框的距离的 */
cursor:pointer; /* 兼容IE,FF 放上去出现小手 */
background-image: url(../img/go.gif);
}
//////////// End css //////////////////
<input id="submit" value="Go" type="submit" class="submitGo">

以上代码,CSS图像按钮就完成了。提交时不会出现不想要的参数了.
如果不希望显示图片时,只需注释CSS定义或是把class去掉就可以了

2008年11月6日星期四

什么是跨站攻击?跨站攻击是什么意思?

跨站攻击,即Cross Site Script Execution(通常简写为XSS)是指攻击者利用网站程序对用户输入过滤不足,输入可以显示在页面上对其他用户造成影响的HTML代码,从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。

业界对跨站攻击的定义如下:“跨站攻击是指入侵者在远程WEB页面的HTML代码中插入具有恶意目的的数据,用户认为该页面是可信赖的,但是当浏览器下载该页面,嵌入其中的脚本将被解释执行。”由于HTML语言允许使用脚本进行简单交互,入侵者便通过技术手段在某个页面里插入一个恶意HTML代码,例如记录论坛保存的用户信息(Cookie),由于Cookie保存了完整的用户名和密码资料,用户就会遭受安全损失。如这句简单的Java脚本就能轻易获取用户信息:alert(document.cookie),它会弹出一个包含用户信息的消息框。入侵者运用脚本就能把用户信息发送到他们自己的记录页面中,稍做分析便获取了用户的敏感信息。

跨站攻击有多种方式,典型的方式有两种:

其一,由于HTML语言允许使用脚本进行简单交互,入侵者便通过技术手段在某个页面里插入一个恶意HTML代码——例如记录论坛保存的用户信息(Cookie),由于Cookie保存了完整的用户名和密码资料,用户就会遭受安全损失。

其二,XST攻击描述:攻击者将恶意代码嵌入一台已经被控制的主机上的web文件,当访问者浏览时恶意代码在浏览器中执行,然后访问者的 cookie、http基本验证以及ntlm验证信息将被发送到已经被控制的主机,同时传送Trace请求给目标主机,导致cookie欺骗或者是中间人攻击。

XST攻击条件:

1、需要目标web服务器允许Trace参数;

2、需要一个用来插入XST代码的地方;

3、目标站点存在跨域漏洞。

XST与XSS的比较:

相同点:都具有很大的欺骗性,可以对受害主机产生危害,而且这种攻击是多平台多技术的,我们还可以利用Active控件、Flash、Java等来进行XST和XSS攻击。

优点:可以绕过一般的http验证以及NTLM验证

用apache+mysql+php在win2003架设web服务器,扫描服务器:

提示 www (80/tcp)

http TRACE 跨站攻击

你的webserver支持TRACE 和/或 TRACK 方式。 TRACE和TRACK是用来调试web服务器连接的HTTP方式。

支持该方式的服务器存在跨站脚本漏洞,通常在描述各种浏览器缺陷的时候,把"Cross-Site-Tracing"简称为XST。

攻击者可以利用此漏洞欺骗合法用户并得到他们的私人信息。

解决方案: 禁用这些方式。

如果你使用的是Apache, 在各虚拟主机的配置文件里添加如下语句:

RewriteEngine on

RewriteCond %{REQUEST_METHOD} ^(TRACE|TRACK)

RewriteRule .* - [F]

XSS和脚本注射的区别?

并非任何可利用脚本插入实现攻击的漏洞都被称为XSS,因为还有另一种攻击方式:“Injection”,即脚本注入或者是讲脚本注射,他们之间是有区别的,他们的区别在以下两点:

1、( Injection)脚本插入攻击会把我们插入的脚本保存在被修改的远程WEB页面里,如:sql injection,XPath injection.这个很常见,好象前几个月很多安全网站被黑就是因为脚本里存在注入漏洞,而被一些人利用的。

2、跨站脚本是临时的,执行后就消失了。这个就不同于我们现在讨论的XSS/CSS 了,今天讲的是在页面中插入脚本,这样谁来访问谁的浏览器就执行,如果不被删掉或者是修改编辑的话,就一直存在的。

什么类型的脚本可以被插入远程页面?

主流脚本包括以下几种:

HTML

Java

VB

ActiveX

Flash

如何防范XSS跨站攻击?

在你的WEB浏览器上禁用java脚本,具体方法,先打开你的IE的internet选项,切换到“安全”页,有个“自定义”级别,点他出现如下窗口,禁用就可以了。但是好象不太可能,因为一旦禁用,很多功能就丧失了,这个方法是下策。

还有不要访问包含〈〉字符的连接,当然一些官方的URL不会包括任何脚本元素。

如果你的站点程序含论坛,留言板,以及其他程序中含提交数据格式的,没有很好过滤机制,请马上下载升级程序或是停止使用ubb这样的功能,避免造成更多的问题。

跨站脚本执行漏洞的成因,形式,危害,利用方式,隐藏技巧

【漏洞成因】

原因很简单,就是因为CGI程序没有对用户提交的变量中的HTML代码进行过滤或转换。

【漏洞形式】

这里所说的形式,实际上是指CGI输入的形式,主要分为两种:

1.显示输入

2.隐式输入

其中显示输入明确要求用户输入数据,而隐式输入则本来并不要求用户输入数据,但是用户却可以通过输入数据来进行干涉。

显示输入又可以分为两种:

1. 输入完成立刻输出结果

2. 输入完成先存储在文本文件或数据库中,然后再输出结果

注意:后者可能会让你的网站面目全非!

而隐式输入除了一些正常的情况外,还可以利用服务器或CGI程序处理错误信息的方式来实施。

【漏洞危害】

大家最关心的大概就要算这个问题了,下面列举的可能并不全面,也不系统,但是我想应该是比较典型的吧。

1. 获取其他用户Cookie中的敏感数据

2. 屏蔽页面特定信息

3. 伪造页面信息

4. 拒绝服务攻击

5. 突破外网内网不同安全设置

6. 与其它漏洞结合,修改系统设置,查看系统文件,执行系统命令等

7. 其它

一般来说,上面的危害还经常伴随着页面变形的情况。而所谓跨站脚本执行漏洞,也就是通过别人的网站达到攻击的效果,也就是说,这种攻击能在一定程度上隐藏身份。

【隐藏技巧】

出于时间的考虑,我在这里将主要讲一下理论了,相信不是很难懂,如果实在有问题,那么去找本书看吧。

1. URL编码

比较一下:

http://www.5460.net/txl/login/login.pl?username= &passwd=&ok.x=28&ok.y=6

http://www.5460.net/txl/login/login.pl?username=%3C%68%31%3E&passwd=&ok.x=28&ok.y=6

你觉得哪个更有隐蔽性?!

2. 隐藏在其它对象之下

与直接给别人一个链接相比,你是否决定把该链接隐藏在按钮以下更好些呢?

3. 嵌入页面中

让别人访问一个地址(注意这里的地址不同于上面提到的URL),是不是又要比让别人按一个按钮容易得多,借助于Iframe,你可以把这种攻击变得更隐蔽。

4. 合理利用事件

合理使用事件,在某些情况上可以绕过CGI程序对输入的限制,比如说前些日子的SecurityFocus的跨站脚本执行漏洞。

【注意事项】

一般情况下直接进行类似alert(document.cookie)之类的攻击没有什么问题,但是有时 CGI程序对用户的输入进行了一些处理,比如说包含在’’或””之内,这时我们就需要使用一些小技巧来绕过这些限制。

如果你对HTML语言比较熟悉的话,绕过这些限制应该不成问题。

【解决方法】

要避免受到跨站脚本执行漏洞的攻击,需要程序员和用户两方面共同努力:

程序员:

1. 过滤或转换用户提交数据中的HTML代码

2. 限制用户提交数据的长度

用户:

1. 不要轻易访问别人给你的链接

2. 禁止浏览器运行JavaScript和ActiveX代码

附:常见浏览器修改设置的位置为:

Internet Explorer:

工具->Internet选项->安全->Internet->自定义级别

工具->Internet选项->安全->Intranet->自定义级别

Opera:>文件->快速参数->允许使用Java

文件->快速参数->允许使用插件

文件->快速参数->允许使用JavaScript

【常见问题】

Q:跨站脚本执行漏洞在哪里存在?

A:只要是CGI程序,只要允许用户输入,就可能存在跨站脚本执行漏洞。

Q:跨站脚本执行漏洞是不是只能偷别人的Cookie?

A:当然不是!HTML代码能做的,跨站脚本执行漏洞基本都能做。

2008年11月5日星期三

轻松制作Favicon。非常好用的一个工具!

轻松制作Favicon。非常好用的一个工具!

Favicon的使用已经成为了一种流行,是网站个性的标志。

我们可以使用下面的地址轻松制作Favicon。

http://www.chami.com/html-kit/services/favicon/


调用favicon的方法

   浏览器调用Favicon的原则是首先在网页所在的目录下寻找Favicon.ico文件,如果没有,便到网站的根目录下寻找。

   因此,在网页中使用Favicon最简单的办法便是将制作好的图标文件命名为Favicon.ico,然后将其上传到网站的根目录即可。

   如果您需要将Favicon.ico放到其他目录下,或者希望让不同的网页显示不同的Favicon,就需要在网页Html文件中做设定了,具体设置也很简单,在Html中的<head>部分加入如下的代码:

程序代码

<link rel=”icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>

<link rel=”shortcut icon” href=”/dir/favicon.ico” mce_href=”/dir/favicon.ico” type=”image/x-icon”>

2008年10月27日星期一

如何让 li 的内容在一行显示,超出部分隐藏

定义CSS

li {
height:20px;
overflow:hidden;
}

就可以了。