`
devil13th
  • 浏览: 43398 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css+div 经典布局

阅读更多
<!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布局的页面基本就不成问题了

分享到:
评论

相关推荐

    CSS+DIV网页布局实例40例.rar

    1. **灵活性**:CSS+DIV布局能实现各种复杂的网页结构,如两列、三列甚至多列布局,以及自适应屏幕尺寸的设计。 2. **可维护性**:将样式与内容分离,便于后期修改和优化,降低维护成本。 3. **易扩展性**:使用CSS+...

    《精通CSS+DIV网页样式与布局》源码.rar

    《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar 《精通CSS+DIV网页样式与布局》源码.rar

    css+div网页模板整站

    CSS+Div布局的优势在于其灵活性和可维护性,使得网页结构清晰,代码更易于管理和修改。这种布局方式相比传统的表格布局,能更好地实现响应式设计,适应不同设备的屏幕尺寸。 Div元素,全称为“division”,即分区,...

    《精通CSS+DIV网页样式与布局》光盘源码

     第10章 理解CSS定位与div布局   10.1 div 标记与 span 标记  10.2 盒子模型  10.3 元素的定位   10.4 定位实例一:轻轻松松给图片签名   10.5 定位实例二:文字阴影效果   第11章 CSS+div布局...

    精通CSS+DIV网页样式与布局

    精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局.rar精通CSS+DIV网页样式与布局....

    css+div 经典问题

    在css+div布局中,jQuery可以: 1. 动态修改样式:使用`.css()`方法,可以动态改变元素的样式属性,如颜色、大小、位置等。 2. 选择和操作元素:`$()`函数是jQuery的核心,它可以选取DOM元素,然后执行一系列操作...

    精通css+div 网页样式与布局 ppt文件

    正在学习css+div的朋友应该都知道这几本书吧,《精通css+div 网页样式与布局》还有《css设计彻底研究》这些书都非常好,现在将《精通css+div 网页样式与布局》的ppt文件传上来,这样大家就可以不用买实体书了,至于...

    漫画图说CSS+DIV网页布局(中)

    漫画图说CSS+DIV网页布局(中)

    漫画图说CSS+DIV网页布局(上)

    漫画图说CSS+DIV网页布局(上)

    十步学会用css+div建站

    【描述】:这是一份以PPT(演示文稿)形式呈现的CSS+div建站基本教程,内容涵盖了从零开始到熟练运用CSS和div进行网页布局的全过程。PPT作为一种直观的教学工具,通常包含清晰的步骤、示例和解释,便于学习者理解和...

    CSS+DIV网页样式与布局案例

    CSS+DIV网页样式与布局案例 对于网页入门有些许帮助

    精美css+div网站实例源码

    CSS布局技术包括流体布局、网格系统、Flexbox和Grid布局,其中Flexbox适用于一维布局,Grid则更适合二维布局。 2. **CSS选择器和属性**: 源码中包含了各种CSS选择器,如类选择器、ID选择器、元素选择器以及属性选择...

    用CSS+DIV做的网上书店模板

    【CSS+DIV布局详解】 CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它通过控制元素的样式,如字体、颜色、大小、位置等,来实现网页的布局和...

    精通CSS+DIV 书中实例和源代码

    5个完整网站的CSS+DIV布局和美化方案,具体可能包括电商网站、博客系统、新闻门户、企业官网等多种类型的网站。每个网站的案例都会涉及不同的设计挑战,如导航菜单的制作、图片轮播效果、响应式设计的实现等。通过...

    精通css+div网页样式与布局

    《精通CSS+DIV网页样式与布局》从零开始,细致介绍CSS的语法规则,透彻讲解CSS应用于各种网页元素的步骤和技巧深入剖析,CSS+DIV布局的思路和方法比较,IE和Firefox浏览器对CSS支持的不同效果,扩展CSS与JavaScript...

    《CSS+DIV网页样式与布局》源码

    《CSS+DIV网页样式与布局》是一本深入探讨如何使用CSS(层叠样式表)和HTML的DIV元素来实现高效、灵活的网页设计的书籍。源码提供了书中各个实例的实际代码,供读者学习和实践。以下是对这些知识点的详细解释: 1. ...

    CSS+DIV实例

    三、CSS+DIV布局基础 1. 浮动布局:早期的`CSS+DIV`布局常使用`float`属性,让元素在容器中浮动,实现左右排列或自适应布局。 2. 盒模型:理解盒模型是布局的关键,它包括元素的内容、内边距、边框和外边距,影响...

    精通CSS+DIV网页布局

    9. 实例解析:书中实例可能涵盖了上述所有知识点的应用,通过实际操作,读者可以加深对理论的理解,掌握CSS+DIV布局技巧。 总之,《精通CSS+DIV网页布局》这本书旨在帮助读者全面掌握使用CSS和DIV进行网页布局的...

    CSS+div网站模板

    3. **CSS+div布局**:CSS+div布局方式摒弃了传统的表格布局,采用更灵活的流式布局,使得网页可以适应不同屏幕尺寸和设备,增强了响应式设计的能力。这种布局方式可以实现像素级精确控制,同时提高了页面加载速度和...

    CSS+DIV网页布局和样式

    《CSS+DIV网页布局和样式》是一本专为学习WEB开发的人士编写的教程,它深入浅出地讲解了如何利用CSS(层叠样式表)和DIV(文档分割元素)来构建美观、响应式的网页布局。CSS是网页设计中不可或缺的一部分,它允许...

Global site tag (gtag.js) - Google Analytics