div+css排版的样例- CSS样式表 - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > div+css排版的样例

CSS样式表: Web设计中的黄金分割分析; 简单的CSS 下拉导航菜单实现代码; Float 菜单水平居中简单方法; 网页设计中常用的19个Web安全字体; 网页设计中的中国传统色彩速查表颜色值; css 清除浮动的新方法; CSS 字体单位em简介; CSS下10个节约开发时间的技巧; css 等宽导航栏设计技巧; CSS reflow实例教程; IE6下Select元素被div等元素覆盖的解决办法; 需要知道的CSS3动画技术; 一个很有用的Firefox和IE插件; IE6,IE7下实现white-space:pre-wrap; CSS 圆角框进行JS封装版; 基于链接关系的微格式使用rel属性; css 微格式 XFN规范; 网页简历结构和语义信息 hResume微格式; hCalendar微格式关于事件和基于时间或地点的活; CSS下!important属性

No. « ‹ 111 112 113 114 › »

技术文章搜索

关键字

CSS样式表中的 div+css排版的样例

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 49 ::

收藏到网摘: n/a

word-wrap HTML结构化：实践DIV＋CSS网页布局入门指南

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"; lang="gb2312">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="Author" content="huobazi@aspxboy.com ,活靶子" />
<meta name="Copyright" content="www.AspxBoy.Com,自由版权,任意转载." />
<meta name="Description" content="www.AspxBoy.Com" />
<meta name="Keywords" content="www.AspxBoy.Com,活靶子,huobazi" />
<title> Div布局 </title>
<style>
body{text-align:center;margin:0;padding:0}
/*text-align:center是ie中必须要有的*/
div
{ height:200px; color:red;
}
.title
{ margin:0 auto; width:776px; background-color:#abcdef;
}
.middle
{ margin:0 auto; width:776px;
}
.left
{ float:left; clear:right; width:20%; background-color:#eeefff;
}
.center
{ float:left; clear:right; width:50%; background-color:#CCC000;
}
.right
{ float:left; clear:right; width:30%; background-color:#fff000;
}
.both
{ clear:both; width:100%; background-color:#666999;
}
.footer
{ margin:0 auto; width:776px; clear:both; background-color:#000fff;
}
</style>
</head>
<body>
<div class="title">顶部</div>
<div class="middle"> <div class="left">左侧</div> <div class="center">中部</div> <div class="right">右侧</div> <div class="both">全行</div> <div class="left">左侧</div> <div class="center">中部</div> <div class="right">右侧</div> <div class="both">全行</div> <div class="left">左侧</div> <div class="center">中侧</div> <div class="right">右侧</div>
</div>
<div class="footer">底部</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

word-wrap HTML结构化：实践DIV＋CSS网页布局入门指南

CSS样式表 中的 div+css排版的样例

评论 (0) All

CSS样式表中的 div+css排版的样例