DIV+CSS布局中的几个重难点属性

html-css09

DIV+CSS布局中的几个重难点属性,第1张

1、布局时遵循从整体到局部的原则。可以尝试先设计出各个div块之间的关系，包含或者并列。

2、并列的块时，可使用float属性，使用float时要保证这两个块的宽度之和小于其父级块，否则会出现折行。

3、在应用了float属性的块时，该块已脱离正常文档流，所以其下的块会当其不存在一样，此时需要clear

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，编写问题基础代码。

2、在index.html中的<script>标签，输入js代码：$('div').click(function(){$(this).css('color','blue')})。

3、浏览器运行index.html页面，此时点击123所在的div，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>

<style

type="text/css">

.main{width:800pxmargin:0px

auto}

.top{width:100%height:200pxbackground:#232323}

.center{width:100%height:500pxbackground:#E6E6E6}

.bottom{width:100%height:200pxbackground:#C0C0C0}

</style>

</head>

<body>

<div

class="main">

<div

class="top"></div>

<div

class="center"></div>

<div

class="bottom"></div>

</div>

</body>

</html>