设计 体验 生活 一直在继续

回首页
发表于2008年3月24日  分类于前端技术与RIA开发

稻草刚发布了新版的首页效果,页面看起来很舒服,像时尚杂志。
不过,更吸引我的是他对于</h1>、</span>等标签的运用,以及由这些标签组成的清晰的页面结构。抽空通读了一遍代码,获益匪浅。

先举一例,比如页面logo的处理方式是我没有想过的,之前在搜拍上也见过的这样的处理方式,既达到了logo应具备的内容,同时优化了代码。
HTML结构:

<div id=”logo”>
<a href=”#” title=”这里是logo”>
<h1>这里是logo</h1>
</a>
</div>

这里的</a>下面我经常就放个<img>完事,不去考虑什么</h1>,而从一个页面在搜索引擎下的表现这个角度讲,</h1>是不可或缺的。有人觉得</h1>不适合放在logo下,仁者见仁,智者见智吧,还要看在什么样的页面下,只要保证一个页面只有一个</h1>就好了,稻草同学显然是深知这一点的。

CSS方面也很好理解,背景放在</a>中,让</a>充满整个logo块,把</h1>隐藏掉就可以了。

#logo a{
display:block;
background: url(hope标志图.jpg) no-repeat;
width:200px;
height:72px;
}

#logo h1 {
display:block;
overflow:hidden;
width:0;
height:0;
}

发散一下,我觉得这里#logo h1 {}也可以用text-indent:-999em把文字内容处理掉。暂且不去考虑这样写是否规范了,呵呵。

另外,这样的结构是我没用过的:

<ul>
<li>
<a>
<p>baidu</p>
<p>百度一下</p>
</a>
</li>
</ul>

把</p>放在</a>里,效果不错!这个是以后经常会用到的一个方法。

做项目时间长了,处理页面往往只侧重表现,不去在意代码结构是否合理以及在搜索引擎下的更优化。
还是得多看多学习。

This post is password protected. Enter the password to view comments.


Fatal error: Call to undefined function comment_form_title() in /home/.miwa/komayangtao/uikoma.com/blog/wp-content/themes/rgb/comments.php on line 30