易截截图软件、单文件、免安装、纯绿色、仅160KB

CSS网站布局div高度自适应 解决

很多的Web
designer在刚接触W3C标准的时候,都遇到过高度自适应的问题。因为div等对象的height:100%;并不能够直接产生实际效果,于是开始
怀疑浏览器是否支持height:100%;的编写方法?当然不是,最明显的例子就是table
height="100"是没有任何问题的。这是很令人烦恼的问题。我浏览了很多网站,包括www.w3cn.org等,有的解决办法是不断地修改
height的固定值,或者利用页面背景和div背景相同来欺骗浏览者的视觉,但都没有从根本上解决问题。今天从一本《CSS网站布局实录》上终于找到最
完美的解决办法,来看一下这段高度自适应的CSS代码:
html,body{
     margin:0px;
     height:100%;
}
#left {
     background-color:#CCC;
     width:300px;
     height:100%;
     float:left;
}
代码已经到了不能再简单的地步,对#left对象设置了height:100%;,然而也能够看见,同时设置了HTML与body的height:100%;,而这个就是高度自适应问题的关键所在。
分析:
一个对象高度是否可以使用百分比显示,取决于对象的父级

象,#left在页面中直接旋转在body之中,因此它的父级是body,而浏览器默认状态下,是没有给body一个高度属性的,因此当我们直接设
置#left为height:100%;时,不会产生任何效果,而当我们给body设置了100%之后,它的子级对象#left的
height:100%;便发生作用了,这便是浏览器解析规则引发的高度自适应问题。而代码中除了给body应用之外,还给HTML对象也应用相同的样式
设计,这样做的好处是使IE与firefox浏览器都能够实现高度自适应,而body却不是。另外,Firefox中的HTML标签不是100%高度,因
此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。


相关文档:

目前比较全的CSS重设(reset)方法总结

  在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美
世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,我们并没有生活在这个完美的世界,现实中发生的失
窃却总是恰恰相反,很多CSS样式在 ......

css 媒介类型

媒介类型(Media Types)允许你定义以何种媒介来提交文档,文档可以被显示在显示器、打印机或者听觉浏览器等等。
实例
下面这个例子中的样式告知浏览器在显示器上显示 14 像素的 Verdana 字体。但是假如页面需要被打印,将使用 10 个像素的 Times 字体。注意:font-weight 被设置为粗体,不论显示器还是纸媒介:
<%@ pa ......

我写div+css过程

这是原先我写的 备忘的 尽管写的很烂
frame.css
Java代码
CHARSET "UTF-八";
html,body{
margin: 零px;
padding: 零px;
height: 100%;
/*font-size: 12px;
color: #666666;
background: #ffffff;*/
}
*{
margin: 零px;
padding: 零px;
}
/*由于用了相对位置格局,应分辨率太大时,图片和文 ......

CSS仿淘宝首页导航条布局效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TAO BAO TEST 2&l ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号