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

......

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