02
2008
06

CSS控制未知高度网页垂直居中

网页垂直居中,水平居中的问题相对很多网页设计者都碰到过。对于一个未知高度和宽度的网页来说,要网页居中对齐,确实是一个棘手的问题,特别在IE7.0和Firefox里面。
以前用CSS弄了些水平居中的网页,很简单,在<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">这个DTD下,只要将DIV赋予一个margin:auto;的样式就可以居中了。但垂直问题,以前没有去注重它,知道今天用到才想到解决的方案。成功后拿出来跟大家分享下,看下面的代码。

...
28
2008
05

csshoues 用CSS+DIV建造的房屋

csshouse?在网上看到一个牛人用CSS+DIV构造了一个房子(如下图),真的太牛了。可以看下原代码,所有都是只用到CSS+DIV。从头到尾没有用过一张图片,最后还说一个字:牛.

CSSHOUSE

有趣的CSS.观看网址http://www.designdetector.com/demos/css-house-2.html

...
10
2008
04

div+css命名规则-增强SEO(转)

页头:header
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
......

10
2008
03

DIV+CSS网页对网站SEO的五大影响

  DIV+CSS网页布局对SEO有哪些影响呢?
  首先看下SEO
  SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使Google等搜索引擎更容易搜索网站的内容,并且让网站的各个网页在GOOGLE等搜索引擎中获得较高的评分,从而获得较好的排名。

  代码精简
  使用DIV+CSS布局,页面代码精简,这一点相信对XHTML有所了解的都知道。代码精简所带来的直接好处有两点:一是提高蜘蛛爬行效率,能在最短的时间内爬完整个页面,这样对收录质量有一定好处;二是由于能高效的爬行,就会受到蜘蛛喜欢,这样对收录数量有一定好处。

  表格的嵌套问题
  很多网站如何推广的文章中称,搜索引擎一般不抓取三层以上的表格嵌套,这一点一直没有得到搜索引擎官方的证实。我的几项实验结果没有完全出来,但根据目前掌握的情况来看,蜘蛛爬行Table布局的页面,遇到多层表格嵌套时,会跳过嵌套的内容或直接放弃整个页面。从而减小了搜索效率。

  使用Table布局,为了达到一定的视觉效果,不得不套用多个表格。如果嵌套的表格中是核心内容,蜘蛛爬行时跳过了这一段没有抓取到页面的核心,这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。

  而DIV+CSS布局基本上不会存在这样的问题,从技术角度来说,XHTML在控制样式时也不需要过多的嵌套

       ........

07
2008
03

新主题出炉

由于以前发布那个Z-BLOG主题模板可能暂时不用到,

昨天晚上赶出来个主题包,也就是我现在网页的样子,初次做Z-blog的主题包不是很在行,呵呵。

特意把这个主题包提供给大家下载,大家可以给点意见,也可以修改了.

现在本主题是用DIV+CSS编写,暂时不兼容火狐,忽忽。得再次修改.IE7.0跟遨游是没有问题的。呵呵.希望有高手给我改进下.

Z-blog主题

下面是下载地址.

29
2008
02

再写CSS三栏布局

CSS三栏布局

为什么是再写呢?以前我在这博客写过三栏布局的文章(http://www.monring.com/post/2008219101824.html),今天在制作过程中,发现了新问题.于是想再写一篇和大家分享一下.

这个问题也是出现在浏览器的兼容性,IE7.0和IE6.0的区别.废话不多讲,先看下IE6.0跟7.0之间的图片的正常效果 查看效果

css三栏布局正常效果

这是正常效果.再让我们来看下CSS和XHTML部分

CSS部分很简单(先简单介绍下)

......

26
2008
02

Xhtml css网站布局

xhtml+css布局,是当今最流行的网页设计技术.无论从速度上还是从构造上都超越了表格布局.
css布局的核心标记是<div></div>,这正对着表格布局的<table><tr><td></td></tr></table>.正是由于这个特点,所以国内很多人把xhtml+css布局说成DIV+CSS布局。
xhtml+css的优点
通过对css布局的学习,我归纳了下它的优点
    1.大大缩减页面代码,提高页面浏览速度,缩减带宽成本;
    2.结构清晰,容易被搜索引擎搜索到,所将起天生就做了SEO优化
    3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
    4.符合WEB标准,使没有一个标签都发挥自己的应有作用

xhtml+css的缺点
    1.最重要的一点是浏览器兼容问题。这点使我们必须使用CSS HACK来解决问题
    2.由于没有很好的可视编辑器,要求设计者的代码编写基础相对比较高。
      现在比较流行的CSS编辑器有Dreamweaver 8和Golive

......

19
2008
02

SEO工具,站长必备

搜索引擎抓取内容模拟器

可以模拟蜘蛛抓取指定网页Text,Link,Keywords及Description信息
http://www.webconfs.com/search-engine-spider-simulator.php

相似页面检测工具

检验两个页面的相似度.如果相似度达80%以上,将可能受到惩罚
http://www.webconfs.com/similar-page-checker.php

Google Sitemaps 在线创建

在线创建 Google Sitemaps 网站地图文件

中文:http://www.xinqj.com/sitemap/sitemap.asp

15
2008
01

css三栏布局浏览器兼容问题

   刚刚用CSS布局制作了一个网页,但在做的过程中确发现一些问题,令人不甚有些头痛.当自己完成好整个完整的网站,心情还沉醉在喜悦中的时候,却发现在同事机器上看到的确实一个乱七八遭的页面。这才发现CSS浏览器兼容问题.

    在用CSS+DIV做三栏布局时,设置两边宽度固定,中间自动适应的时候会出现一个这样的问题,如果中间的栏也给他固定宽度的时候就会在IE6.0以下浏览器中出现中间栏断行的问题.IE7.0和火狐最新版本不会这样子.找了个把小时终于解决。
    下面跟大家分享下网上得到的实例代码跟大家分享下.
 

CSS部分:

body {
 font-family: Verdana, Arial;
 margin: 0;
 font-size: 12px;
}
#dyhead {
 margin-bottom: 5px;
 }
#dyleft {
 float: left;
 width: 200px;
 }
#dycenter {
 margin: 0 210px;
}
#dyright {
 float: right;
 width: 200px;
}
#dyfoot {
 margin-top: 5px;
 clear: both;
}
div {
 background-color: #eee;
 border: dotted 1px green;
}

05
2007
12

列表样式书写规范

由于现在的浏览器版本过多。做网页如果稍微不注意的话,就会出现在本机上完好的网页到其他机器凌乱的局面。今天碰到两个很明显的问题跟大家分享以下。
新建一个简单的HTML测试文件,下面来测试ul li标签
引用
<ul>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
<li><a href="#">菜单一</a></li>
</ul>
测试一,定义css为如下代码,效果如下
引用
body{font-size:12px;margin:0}
ul{list-style:none;margin:0;padding:0;width:120px;}
ul li{background:green;height:20px;}
ul li a{color:#fff;padding:0 0 0 10px;}
发现在IE5和IE5.5下左边都产生了空白,并且在IE5下,LI之间的行距产生空白,如下图
uploads/200704/13_011917_snap3.gif

 
«1»