Posts Tagged DIV+CSS

关于HTML标记语言-锚点(#井号)

博客的评论链接经常看到类似如下地址:

http://www.crazylemon.net/crazylemon/xxxx.html/comment-page-1#comment-xxxx

此链接不公可跳转至指定页面,还可以定位到具体的段落位置,即HTML标记语言-锚点的使用

说明如下:

HTML中的链接,正确的说法应该称作”锚点”,它不仅让我们能指向文档,还能指向页面里的特定段落,更能当作”精准链接”的便利工具.让链接对象接近焦点.在这一章里,我们将看到四种不同的锚点做法,说明每个方法的优点,也会介绍title属性如何能提升链接的易用性,另外也将使用CSS为链接设计样式.

在需要指定到页面的特定部分时,标记锚点是最佳的方法

这是在设计网站时经常遇到的情况,你想链接到某个页面的特定部分,可是使用者正在阅读的可能是在另外的一个页面,接下来讨论的四种方法之中任选一种都能让你达成目标.

在示例中,假设我们打算链接到同一个页面中的特定标题:

方法A:空洞的名称

<p><a href=”#oranges”>About Oranges</a></p>

…一些文字…

<a name=”oranges”></a>

<h2>Oranges Are Tasty</h2>

…更多文字…

效果不错,但是浪费一个内容空白的标签来标识链接位置有点不合语义,方法B能改进这点.

方法B:全部在名称之内

<p><a href=”#oranges”>About Oranges</a></p>

…一些文字…

<h2><a name=”oranges”>Oranges Are Tasty</a></h2>

…更多文字…

与方法A一样,我们仍然使用<a>标签配上name属性,但这次我们把它包在我想要链接的标题外面,这么做看起来的确比较符合语义,在方法A里头,我们的连接对象是…恩,什么都没有,但是在方法B里,我们不仅说明了这段文字是标题标签的一部分,同时也是这个页面的连接锚点之一.

注意:小心<a>的全局样式!

还有更多方法,请参考网站资料

奇怪的是,我的其它网站在特定因素下,如用theworld或IE7以下浏览时,地址后会跟个#号,晕死,没有参数的

这个暂时不明原因,应该是html代码兼容性问题,而且应该不影响SEO

  • Share/Bookmark

Tags: , , , , ,

CSS隐藏代码”Display:none;”是SEO作弊么?

今天要找个隐藏代码来隐藏cnzz流量统计的图标,想到了CSS隐藏代码”Display:none;”,代码如下:

<span style=”display:none”><script src=”http://s88.cnzz.com/stat.php?id=xxxxxx&web_id=xxxxxx&show=pic1″ language=”JavaScript” charset=”gb2312″></script>
</span>

挺好用的,完全不显示了,CNZZ也挺好用的

关于CSS隐藏代码”Display:none;”与SEO作弊,有网友作如下说明:

Display:none;是一把双刃剑,以前被过多地用于seo作弊,所以搜索引擎对它比较敏感。

为CSS代码的表现样式DISPLAY本身并无过错,许多大型网站的导航系统,为了实现简洁而良好的用户体验,都使用了Display:none;隐藏部分内容,当用户点击了某个链接、按钮时,再通过js代码把隐藏的内容显示出来。

隐藏内容的css方法一般有三种:1、css代码Display:none;;2、visibility: hidden 可见性为隐藏;3、overflow:hidden设置。其中,第一种和第三种方法曾经大量地被使用在SEO作弊上,很多早期有着黑帽SEO历史的SEOER们应该都知道这样的方法。

当然,搜索引擎也不是傻子,在作弊与反作弊的较量上几乎就没有停止过;如果现在再使用上面的隐藏方法来作弊的话,比如在隐藏内容里堆叠大量的关键词,大量的链接等,搜索引擎K你是没商量。

是否正常使用了Display:none;这样的隐藏代码,是否利用它来对搜索引擎作弊有一个很简单的判断方法:隐藏的内容如果搜索引擎看得到,用户也看得到的为正常使用隐藏;如果用户看不到,而搜索引擎看得到就可以定性为作弊。像上面提到的网易、新浪等网站使用的隐藏效果就是完全正常的,使用了隐藏是为了更好地用户体验,更好的利用有限的空间,搜索引擎也不会机械到一刀切的地步。

总之,用户喜欢的就是搜索引擎喜欢的

  • Share/Bookmark

Tags: , , , , , , , , ,

CSS之TR标签无法加border的解决办法

类似如下代码:

.thickBorder {
border-style : solid;
border-width:2 px;
border-color : black;
}

<table border=0 width=100% align=center cellpadding=’0′ cellspacing=’0′ class=’propList’>
<tr class=’thickBorder’>
<td>

</td>
<td>

</td>
</tr>
</table>

在tr的class里定义的border会无效,只能定义backgrount等属性

解决方法是,将CSS样式定义在td标签里,如下:

.thickBorder td {
border-style : solid;
border-width:2 px;
border-color : black;
}

即OK

  • Share/Bookmark

Tags: , , , ,

被IE8给XX了

改了一天的CSS样式表,在IE6中正常,结果对方说IE8下一塌糊涂,晕菜,客户基本上用的IE8

没办法,换IE8,然后再改,该死的兼容性

被IE8给XX了,装完要重启,感觉自变小变模糊了,而且傲游的和IE8显示上还是有点不一样

以后一定得先考虑兼容性了,否则做无用功

  • Share/Bookmark

Tags:

深究Nginx502 bad gateway, 504 Gateway Time-out的彻底解决(转)

我的VPS是256M的内存,CPU是四核心的,所以更多的我会在乎内存。而在我调试服务器的时候通常会遇到Nginx502 bad gateway和504 Gateway Time-out的错误。分析nginx.conf我发现server和fastcgi的buffers过多,导致fastcgi请求的数量过大,php-fpm无法及时处理而出错。循此思路我们可以再总体buffers不变的情况下减少请求数量,具体的ningx.conf改动细节如下:
                server_names_hash_bucket_size 128;
                client_header_buffer_size 32k;
                large_client_header_buffers 1 128k;# 4 32k
                client_max_body_size 8m;

                sendfile on;
                tcp_nopush     on;

                keepalive_timeout 60;

                tcp_nodelay on;

                fastcgi_connect_timeout 300;
                fastcgi_send_timeout 300;
                fastcgi_read_timeout 300;
                fastcgi_buffer_size 128k;
                fastcgi_buffers 2 256k;#8 128
                fastcgi_busy_buffers_size 256k;
                fastcgi_temp_file_write_size 256k;
                fastcgi_intercept_errors on;

                gzip on;
                gzip_min_length  1k;
                gzip_buffers     1 64k; #4 16
                gzip_http_version 1.0;
                gzip_comp_level 2;
                gzip_types       text/plain application/x-javascript text/css application/xml;
                gzip_vary on;

另外,php-fpm的默认静态处理方式会使得php-cgi的进程长期占用内存而无法释放,这也是导致nginx出错的原因之一,因此可以将php-fpm的处理方式改成apache模式。
        <value name=”style”>apache-like</value>

从更改完毕到现在的测试表明上述方式的效果还是很明显的,并没有发现一次Nginx502 bad gateway或504 Gateway Time-out错误。当然,如果你的VPS或者服务器的性能足够好可以根据具体情况不必做无谓的改动。

 

以上摘自疯人醉语

测试一下,有效果的话会更新

  • Share/Bookmark

Tags: , , , , , , , , , , , , , , ,

13个测试网站访问速度的服务网站

Pingdom:http://tools.pingdom.com/ 非常专业的网页测速服务,可对该网页中众多元素一一测速,清楚地看到是哪些托了你的后腿。提供该网页速度的综合测评分析,看看会对你博客的设计有些启发。


Websiteoptimization:http://www.websiteoptimization.com/services/analyze/]功能十分强大的网站速度测试服务,可通过URL、HTM、JAVA代码三种方式进行测试,结果十分齐全,包括HTML、Images、CSS、Javascript等各个类别的访问速度,难能可贵的是还会根据你的结果给出一些建设性意见。

 
Webslug 是一个在线网速测定的服务,所不同的是,它用于比较任意两个网站的访问速度,你输入想要比较的两个网站的地址,Webslug 通过服务器进行访问速度测试,最后给出结果。


Webwait:http://www.webwait.com/ 简单的网页测速工具,比较大的特点是不仅可以测定某一点的访问速度,而且可以根据你的设置实时的监测速度。

 
Website speedtester:http://www.linkvendor.com/seo-tools/speedtester.htm 是linkvendor旗下的一个服务,可对网站全方位监测速度,给出综合报告,有java代码、图片访问速度的细致报告。
  

Internetsupervision:http://internetsupervision.com/scripts/urlcheck/check.aspx 可从世界10余个主要的网络节点来测是你的网页速度,包括:美国华盛顿、美国圣迭戈、德国多特蒙德、俄罗斯圣彼得堡、澳洲悉尼、中国北京等等。


Selfseo:http://www.selfseo.com/website_speed_test.php 所提供的网站访问速度测试功能并不强大,只提供简单的load时间,但可同时检测多个网站的速度以作比较。用它来检测你和竞争对手的速度,会对你的改进有所帮助。


Website speed test:http://www.iwebtool.com/speed_test 是webtool提供的简单网站速度测试,和Selfseo 一样,最多可以同时测试10个网站的访问速度。

另外还有几个:
Websitegoodies:http://www.websitegoodies.com/tools/speed-test.php 提供的简单网站速度测试服务,提供大小和总load时间两个参数。
web-hosting-top.com: 提供与Selfseo 一样的测速服务。
global-weblinks:http://www.global-weblinks.com/websitespeed.asp 提供与Selfseo 一样的测速服务。
世界网络:http://www.linkwan.com/gb/broadmeter/speed/responsespeedtest.asp 提供的最简单的网站速度测试,只提供访问秒数结果。

  • Share/Bookmark

Tags: , , , , , , , , , , , , , , ,

div+css去掉超链接的下划线

我们可以用CSS语法来控制超链接的形式、颜色变化。

  下面我们做一个这样的链接:未被点击时超链接文字无下划线,显示为蓝色;当鼠标在链接上时有下划线,链接文字显示为红色;当点击链接后,链接无下划线,显示为绿色。

  实现方法很简单,在源代码的<head>和<head>之间加上如下的CSS语法控制:

   <style type=”text/css”>
   <!–
   a:link { text-decoration: none;color: blue}
   a:active { text-decoration:blink}
   a:hover { text-decoration:underline;color: red}
   a:visited { text-decoration: none;color: green}
   -->
   </style>

  其中:
  a:link 指正常的未被访问过的链接;
  a:active 指正在点的链接;
  a:hover 指鼠标在链接上;
  a:visited 指已经访问过的链接;
  text-decoration是文字修饰效果的意思;
  none参数表示超链接文字不显示下划线;
  underline参数表示超链接的文字有下划线

  • Share/Bookmark

Tags: , , , , ,

SEO插件 – 20个最好的Wordpress SEO 插件

2008年底,全球互联网博客的数量已经超过1亿2000万,人们如何才能在浩瀚的互联网上找到你的博客呢?社会化媒体营销是一个方法,当然你需要付出大量的时间和精力。也许你对社会化网络没有什么兴趣,你只想专心的为你的博客创作最好的内容,就跟我一样,那么SEO也许是让人们发现你的优秀文章的最简单和快捷的方法,对于博客而言尤其是这样。

搜索引擎喜欢博客,对于wordpress博客平台而言,你不需要具备一些基本的SEO技能,wordpress对搜索引擎非常友好,它天生就是为不懂SEO的bloggers而设计的。本文不是为那些搜索引擎优化专家准备的,如果你拥有自己的博客,你只希望专心的投入到博客的文章创新和写作中去,又不想在搜索引擎优化上面耗费你宝贵的时间和精力,那么本文为你介绍的20个wordpress SEO插件可以帮助你获得更多的流量和读者。

什么是Wordpress SEO插件?

Wordpress SEO插件是简单的搜索引擎优化工具,它可以帮助你选择正确的tags,告诉搜索引擎蜘蛛如何在你的博客上工作,优化你的文章标题,以及优化你的博客内部链接……使用SEO插件可以让你无须考虑过多的搜索引擎优化细节和SEO技巧,同时它们能让你的博客构架对搜索引擎更加友好,从而让你的博客文章更快被搜索引擎索引,并获得不错的搜索引擎排名。

20个最好的Wordpress搜索引擎优化插件

All in One SEO Pack – wordpress平台上最受欢迎的插件之一,该Wordpress 插件可以帮助你选择最好的文章标题和关键词,以及让你避免发布重复内容。利用该插件,你可以给每篇页面添加独立的关键词和摘要,还可以防止存档页面被抓取以免被 Google 降权。

Automatic SEO Links – Automatic SEO Links允许你选择一个关键词或者文章标题来自动进行链接,比如我们可以设置“疯狂的柠檬”的自动链接URL为“http://www.crazylemon.net”,那么在你post的文章中出现“疯狂的柠檬”这个词的时候,插件会将该关键词自动添加链接。你可以为关键词设置为内部或者外部链接,设置锚文本,选择是否为链接添加 “nofollow” 等等。该插件还有个特色就是一篇文章中只会出现一次相同的自动链接,避免过度优化而造成搜索引擎惩罚。

Google XML Sitemaps – 个人认为这个是每个wordpress博客都必须的SEO插件工具。虽然说的是google xml站点地图生成工具,但实际上该插件生成的XML-sitmap也可以被ask,msn,yahoo等搜索引擎蜘蛛读取。

HeadSpace2 – 该插件让你可以安装各种类型的meta-data,为页面添加特别的javascript和css代码,以及tags提示等,也是一个非常有用的SEO插件。

Meta Robots WordPress plugin – 可以为你博客的任何页面添加针对搜索引擎机器人的metadata。为页面和目录添加nofollow属性,这对一些利用web service的会员计划来建立的博客商店来说非常重要,可以避免搜索引擎索引重复内容。你还可以防止登陆页,归档页等被索引。

Nofollow Case by Case – 该插件让你去除在文章评论中的nofollow属性,你可以选择在哪个文章中支持评论的dofollow,避免全站都采用dofollow的评论,防止垃圾评论。

Platinum SEO Plugin – Platinum SEO Plugin 支持永久链接的自动301重定向,自动生成meta tags,以及post slug优化等,还可以帮助你避免副本内容。

Redirection – 在很多时候,你因为一些不同的原因需要对博客文章进行移动或者修改,这很容易造成原有页面在搜索引擎的排名下降。Redirection插件可以通过301重定向帮助你捕获404错误日志,因此你可以发现并修改这些错误,你还可以设置一个错误RSS feed。

SEO Blogroll – 如果你担心你的blogroll中的博客链接分享你的PageRank,那么使用SEOBlogroll,你可以对链接分组进行分别设置,并为一些链接组分配nofollow属性,避免该链接组中的博客分享你的网站权重。

SEO for Paged Comments – WordPress 2.7评论分页功能有效的降低了页面体积,增加页面载入速度,尤其对于留言较多的博客确实很实用,但WordPress默认的评论分页随着带来的SEO问题–内容重复,正文页面与评论分页页面内容一样。该插件将评论分页页面的post正文显示摘要,再加上一个至post的permalink链接,从而区分了正文页面,避免重复内容,完全达到了SEO的要求。

SEO friendly and HTML valid subheadings – 该插件会自动修改你页面中的子标题,使之更加SEO友好。对于一些设计不合理的wordpress主题模板来说非常有用,自动将h2变为h3,h3变为h4等等。

SEO Friendly Images – 当人们搜索不同科目的图片时,图片会是一个非常重要的流量来源,SEO图象友好插件将帮助你为博客中的图片添加 “alt” and “title” 标签,帮助搜索引擎正确的索引这些图片。

SEO No Duplicate WordPress Plugin – 一款刚刚推出的WordPress SEO型插件,主要功能就是告诉搜索引擎爬虫一篇日志页面的首选版本。因为许多黑帽SEO会滥用副本内容来获取搜索引擎排名,而搜索引擎很难检测和处罚他们,该插件帮助你告诉搜索引擎你才是该文章的原创。

SEO Post Link – post slug是你在浏览器的url输入框中看到的博客标题,有时候由于标题过长造成文章的post slug也很长,搜索引擎不喜欢太长的URL。该插件让你的post slug合理减肥,只保留重要的关键词,让你的文章地址对搜索引擎更加友好。你可以设置包含的字符数量,去除不必要的字词。

SEO Smart Links – 内部链接对于SEO来说也是一个非常重要的技巧,同时适当的内部链接还可以让更多的人阅读到你更多的相关文章,提高网站的page view,但是如果手动添加链接则会花费你大量的时间和精力。通过SEO Smart Links插件,你可以指定什么关键词自动链接到哪个URL,以及允许你为链接设置nofollow,open in new window等属性。

SEO Tag Cloud Widget – 有许多朋友喜欢在他们的博客上面使用标签云,本插件让你的tags cloud更容易被搜索引擎阅读, 更加SEO友好。

SEO Title Tag – 标签是一个非常重要的部分,它让搜索引擎了解你的文章都如何放置,很多人都很讨厌wordpress标题栏那里的那个有点像括号的符号——“»”,因为它在很多的中文搜索引擎里面显示为乱码,非常地不利于搜索引擎优化(SEO),用SEO Title Tag这个插件则可以方便地把这个符号消除。同时,还可以自定义文章名和网站名中间的那个符号,如使用“-”或者“|”等。另外,你还可以在首页的title里面加上网站的描述,而在其它的页面则不显示网站的描述,这对SEO非常有利。

Simple Tags – 一个极度受欢迎的tags建议插件,帮助你为你的博客文章选择最好的tag标签,包括标签建议,tags自动完成,批量编辑等众多功能。

Sitemap Generator – 一个支持多级分类目录和页面的可定制的站点地图生成插件,有许多可定制选项。把这个插件当成wordpress blog存档插件来使用也是非常不错的选择。

TGFInet SEO Wordpress Plugin – 该插件可以可以做大多数常见的SEO工作,比如标题优化,关键词优化等,对于了解一定SEO技巧的blogger来说非常适用。实际上该插件是all-in-one-seo-pack的修改版本,在原插件的基础上进行了部分增强,对于想把博客做得像CMS一样的朋友来说,可以试用一下这个插件。

以上就是我们为大家总结的20个wordpress seo 插件,如果您还有更好的,也拿出来给大家分享一下吧!

  • Share/Bookmark

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , ,

Nginx服务器安装Magento

参考张晏的Nginx 0.7.x + PHP 5.2.8(FastCGI)搭建胜过Apache十倍的Web服务器(第4版)[原创] 配置完服务器之后,安装Magento时老是提示404错误,到网站搜了一下,主要参考拓森网络-run Magento with Nginx,终于成功

现将经验分享如下:

系统环境:CentOS5.2
Nginx版本:0.7.30
Magento版本:1.3.0

1、修改fcgi.conf
vi /usr/local/webserver/nginx/conf/fcgi.conf

fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param SCRIPT_NAME $fastcgi_script_name;
修改为
#fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
#fastcgi_param SCRIPT_NAME $fastcgi_script_name;

2、修改nginx.conf
在虚拟主机设置:server{…}内添加如下内容
# media
location ~* \.(png|gif|jpg|jpeg|css|js|swf|ico)$ {
root /data0/htdocs/www/;
access_log off;
expires 30d;
}
# pass the PHP scripts to FastCGI socket
location ~ \.php$ {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_NAME $fastcgi_script_name;
fastcgi_param SCRIPT_FILENAME /data0/htdocs/www$fastcgi_script_name;
include fcgi.conf;
}
location ^~ /js/proxy.php {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_NAME $fastcgi_script_name;
fastcgi_param SCRIPT_FILENAME /data0/htdocs/www$fastcgi_script_name;
include fcgi.conf;
access_log off;
expires 30d;
}
location / {
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_NAME index.php;
fastcgi_param SCRIPT_FILENAME /data0/htdocs/www/index.php;
include fcgi.conf;
}

3、重启Nginx,使配置生效
kill -HUP `cat /usr/local/nginx/nginx.pid`

  • Share/Bookmark

Tags: , , , , , , , , , , , , , , , , , , , , , ,

nginx配置详细说明

配置说明—————————-
#运行用户
user nobody nobody;
#启动进程
worker_processes 2;
#全局错误日志及PID文档
error_log logs/error.log notice;
pid        logs/nginx.pid;
#工作模式及连接数上限
events {
use epoll;
worker_connections      1024;
}
#设定http服务器,利用他的反向代理功能提供负载均衡支持
http {
#设定mime类型
include      conf/mime.types;
default_type application/octet-stream;
#设定日志格式
log_format main        ’$remote_addr – $remote_user [$time_local] ‘
‘”$request” $status $bytes_sent ‘
‘”$http_referer” “$http_user_agent” ‘
‘”$gzip_ratio”‘;
log_format download ‘$remote_addr – $remote_user [$time_local] ‘
‘”$request” $status $bytes_sent ‘
‘”$http_referer” “$http_user_agent” ‘
‘”$http_range” “$sent_http_content_range”‘;
#设定请求缓冲
client_header_buffer_size    1k;
large_client_header_buffers 4 4k;
#开启gzip模块
gzip on;
gzip_min_length 1100;
gzip_buffers    4 8k;
gzip_types      text/plain;
output_buffers 1 32k;
postpone_output 1460;
#设定access log
access_log logs/access.log main;
client_header_timeout 3m;
client_body_timeout    3m;
send_timeout          3m;
sendfile                on;
tcp_nopush              on;
tcp_nodelay            on;
keepalive_timeout 65;
#设定负载均衡的服务器列表
upstream mysvr {
#weigth参数表示权值,权值越高被分配到的几率越大
#本机上的Squid开启3128端口
server 192.168.8.1:3128 weight=5;
server 192.168.8.2:80 weight=1;
server 192.168.8.3:80 weight=6;
}
#设定虚拟主机
server {
listen          80;
server_name    192.168.8.1
www.yejr.com
;
charset gb2312;
#设定本虚拟主机的访问日志
access_log logs/www.yejr.com.access.log main;
#假如访问 /img/*, /js/*, /css/* 资源,则直接取本地文档,不通过squid
#假如这些文档较多,不推荐这种方式,因为通过squid的缓存效果更好
location ~ ^/(img|js|css)/ {
root    /data3/Html;
expires 24h;
}
#对 “/” 启用负载均衡
location / {
proxy_pass      http://mysvr;
proxy_redirect          off;
proxy_set_header        Host $host;
proxy_set_header        X-Real-IP $remote_addr;
proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size    10m;
client_body_buffer_size 128k;
proxy_connect_timeout 90;
proxy_send_timeout      90;
proxy_read_timeout      90;
proxy_buffer_size      4k;
proxy_buffers          4 32k;
proxy_busy_buffers_size 64k;
proxy_temp_file_write_size 64k;
}
#设定查看Nginx状态的地址
location /NginxStatus {
stub_status            on;
access_log              on;
auth_basic              ”NginxStatus”;
auth_basic_user_file conf/htpasswd;
}
}
}
备注:conf/htpasswd 文档的内容用 apache 提供的 htpasswd 工具来产生即可,内容大致如下:
3.) 查看 Nginx 运行状态
输入地址
http://192.168.8.1/NginxStatus/
,输入验证帐号密码,即可看到类似如下内容:
Active connections: 328
server accepts handled requests
9309    8982        28890
Reading: 1 Writing: 3 Waiting: 324
第一行表示现在活跃的连接数
第三行的第三个数字表示Nginx运行到

  • Share/Bookmark

Tags: , , , , , , , , , , , , , , , , , , , ,