<!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>无标题文档</title>
<style type="text/css">
body{margin:0px;padding:0px;}
*{margin:0px;padding:0px;}
#mainDiv{width:596px;height:595px;margin:5px auto;}
.block{overflow:hidden;display:inline;width:64px;height:64px;}
.block01{overflow:hidden;display:inline;width:134px;height:134px;}
.block02{overflow:hidden;display:inline;width:198px;height:198px;}
.fl{float:left;}
.fr{float:right;}
.cls{clear:both;height:0px;overflow:hidden;}
</style>
</head>
<body>
<div id="mainDiv">
<div style="background:#ffcc66;margin-left:268px;" class="block fl"></div>
<div style="background:#ff9999;" class="block fl"></div>
<div class="cls"></div>
<div style="background:#99cccc;margin-left:64px;margin-right:70px;" class="block fl"></div>
<div style="background:#cc6666;margin-top:70px;margin-right:66px;" class="block fr"></div>
<div style="background:#cc3333;" class="block01 fr"></div>
<div style="background:#eb9f07;" class="block01 fr"></div>
<div style="background:#99cccc;" class="block fl"></div>
<div style="background:#006666;" class="block01 fl"></div>
<div style="background:#cc99cc;margin-right:2px;" class="block fr"></div>
<div style="background:#663366;" class="block01 fr"></div>
<div style="background:#333399;" class="block02 fr"></div>
<div style="background:#9999cc;margin-left:134px;" class="block fl"></div>
<div style="background:#6699cc;" class="block fl"></div>
<div style="background:#336699;" class="block01 fl"></div>
<div style="background:#996699;margin-top:-64px;margin-right:130px;width:70px;" class="block fr"></div>
<div style="background:#ff6600;" class="block01 fl"></div>
<div style="background:#006600;" class="block01 fl"></div>
<div class="cls"></div>
<div style="background:#ff9966;margin-left:268px;" class="block fl"></div>
<div style="background:#99cc99;" class="block fl"></div>
</div>
</body>
</html>
或许有人会说这个用绝对定位就可以很容易的实现,可是我要说这个小页面不是为了展示页面有多炫,而是完成的一个功能,css+div 可能会让你全部绝对定位去实现么?至少自动撑高度就不能实现。 这个例子如果你可以写出来,那所有的css+div布局的页面基本就不成问题了
分享到:
相关推荐
1. **灵活性**:CSS+DIV布局能实现各种复杂的网页结构,如两列、三列甚至多列布局,以及自适应屏幕尺寸的设计。 2. **可维护性**:将样式与内容分离,便于后期修改和优化,降低维护成本。 3. **易扩展性**:使用CSS+...
《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar
CSS+Div布局的优势在于其灵活性和可维护性,使得网页结构清晰,代码更易于管理和修改。这种布局方式相比传统的表格布局,能更好地实现响应式设计,适应不同设备的屏幕尺寸。 Div元素,全称为“division”,即分区,...
第10章 理解CSS定位与div布局 10.1 div 标记与 span 标记 10.2 盒子模型 10.3 元素的定位 10.4 定位实例一:轻轻松松给图片签名 10.5 定位实例二:文字阴影效果 第11章 CSS+div布局...
精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局....
在css+div布局中,jQuery可以: 1. 动态修改样式:使用`.css()`方法,可以动态改变元素的样式属性,如颜色、大小、位置等。 2. 选择和操作元素:`$()`函数是jQuery的核心,它可以选取DOM元素,然后执行一系列操作...
正在学习css+div的朋友应该都知道这几本书吧,《精通css+div 网页样式与布局》还有《css设计彻底研究》这些书都非常好,现在将《精通css+div 网页样式与布局》的ppt文件传上来,这样大家就可以不用买实体书了,至于...
漫画图说CSS+DIV网页布局(中)
漫画图说CSS+DIV网页布局(上)
【描述】:这是一份以PPT(演示文稿)形式呈现的CSS+div建站基本教程,内容涵盖了从零开始到熟练运用CSS和div进行网页布局的全过程。PPT作为一种直观的教学工具,通常包含清晰的步骤、示例和解释,便于学习者理解和...
CSS+DIV网页样式与布局案例 对于网页入门有些许帮助
CSS布局技术包括流体布局、网格系统、Flexbox和Grid布局,其中Flexbox适用于一维布局,Grid则更适合二维布局。 2. **CSS选择器和属性**: 源码中包含了各种CSS选择器,如类选择器、ID选择器、元素选择器以及属性选择...
【CSS+DIV布局详解】 CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它通过控制元素的样式,如字体、颜色、大小、位置等,来实现网页的布局和...
5个完整网站的CSS+DIV布局和美化方案,具体可能包括电商网站、博客系统、新闻门户、企业官网等多种类型的网站。每个网站的案例都会涉及不同的设计挑战,如导航菜单的制作、图片轮播效果、响应式设计的实现等。通过...
《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript...
《CSS+DIV网页样式与布局》是一本深入探讨如何使用CSS(层叠样式表)和HTML的DIV元素来实现高效、灵活的网页设计的书籍。源码提供了书中各个实例的实际代码,供读者学习和实践。以下是对这些知识点的详细解释: 1. ...
三、CSS+DIV布局基础 1. 浮动布局:早期的`CSS+DIV`布局常使用`float`属性,让元素在容器中浮动,实现左右排列或自适应布局。 2. 盒模型:理解盒模型是布局的关键,它包括元素的内容、内边距、边框和外边距,影响...
9. 实例解析:书中实例可能涵盖了上述所有知识点的应用,通过实际操作,读者可以加深对理论的理解,掌握CSS+DIV布局技巧。 总之,《精通CSS+DIV网页布局》这本书旨在帮助读者全面掌握使用CSS和DIV进行网页布局的...
3. **CSS+div布局**:CSS+div布局方式摒弃了传统的表格布局,采用更灵活的流式布局,使得网页可以适应不同屏幕尺寸和设备,增强了响应式设计的能力。这种布局方式可以实现像素级精确控制,同时提高了页面加载速度和...
《CSS+DIV网页布局和样式》是一本专为学习WEB开发的人士编写的教程,它深入浅出地讲解了如何利用CSS(层叠样式表)和DIV(文档分割元素)来构建美观、响应式的网页布局。CSS是网页设计中不可或缺的一部分,它允许...