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

经典DIV+CSS案例 两列高度自适应


相信很多人都非常喜欢用div+css布局,无论你是前端开发者,还是后台程序员,因为它的好处实在太多,可以用很少的代码来控制布局,然后用CSS表现其形态,表现和样式分离。而且在SEO方面,它还能提供30%的优化,我们何乐而不为呢。
很多人都会碰到如题的布局问题,解决方案很多,可以用背景图来填充,或用js来控制,但终不是最佳方案,最好还是从DIV,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=gb2312" />
<title>两列高度自适应</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
#top{background:#dcdcdc;height:30px;}
#main{overflow:hidden;}
.sidebar{float:left;width:150px;background:#ff0000;}
.content{background:#333333;overflow:hidden;_float:left;/*兼容IE6*/}
.row{margin-bottom:-10000px;padding-bottom:10000px;/*内外补丁是关键*/}
#footer{clear:both;height:30px;background:#0000ff;}
-->
</style>
</head>
<body>
<div id="container">
<div id="top"></div>
<div id="main">
<div class="sidebar row">
我在左边<br /> 
我在左边<br /> 
我在左边<br />
我在左边<br /> 
我在左边<br /> 
我在左边<br /> 
我在左边<br />
我在左边<br />
我在左边<br /> 
我在左边<br />
我在左边<br /> 
我在左边<br />
我在左边<br />
我在左边<br />
我在左边<br />
我在左边<br /> 
我在左边<br />
</div>
<div class="content row">
我在正文<br />
我在正文<br />
我在正文<br /&g


相关文档:

css颜色代码对照

现在给大家献上颜色对照码:


FFFFFF
#DDDDDD
#AAAAAA
#888888
#666666
#444444
#000000


#FFB7DD
#FF88C2
#FF44AA 
#FF0088&n ......

css的dl dt dd的应用

css的dl dt dd的应用:
<!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= ......

jQuery使用手册之CSS操作

Jquery对css的操作相当方便,能很方便我们去通过js修改css。传统javascript对css的操作相当繁琐,比如
<div id="a" style="background:blue">css</div>
取它的background语法是:
document.getElementById("a").style.background
而jQuery对css更方便的操作:
$("#a").background();$("#a").background ......

CSS公用文件

由于各浏览器的默认CSS样式不一样,我们必须写一个CSS Reset统一起来。
通常我的做法是在common.css里写全局控制,这里面也包括header和footer,其它CSS文件就通过@import url(”
common.css”);引用。
body{padding:10px;margin:0;background:#fff;font-size:12px;line-height:14px;color:#333;font-
family ......

用css让图片自动适应大小

图片自动适应大小的问题在平时制作的时候是比较常见的问题,下面提供一个比较简单的解决方法:
div img {
max-width:600px;
//IE7、FF等其他非IE浏览器下最大宽度为600px;
width:600px;
//所有浏览器中图片的大小为600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
//当图片大小大于6 ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号