谁有DIV+CSS教程分享一下啊-领先建站CMS提供服务商我们专注于CMS建站产品的研发

7182 查看	10 回复

主题：[求助]谁有DIV+CSS教程分享一下啊 [收藏主题]

转到：

人小鬼大当前离线

109 主题	0 广播	0 粉丝

级别:一年级

用户积分:919 分
登录次数:48 次
注册时间:2006/8/5
最后登录:2009/2/10

人小鬼大发表于：2006/11/2 18:59:00 | 显示全部帖子查看该作者主题楼主

做官网就用科汛智能建站系统!

通俗易懂的Div+CSS布局入门教程

一、页面布局与规划

　　好久没有认真写点东西了，想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题，其实归根结底还是由于没有入门造成的。那么接下来的这篇文章就带领大家入门吧...

　　在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

　　所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。

　　下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：
　　1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；
　　2、内容部分又可分为侧边栏、主体内容；
　　3、底部，包括一些版权信息。
　　有了以上的分析，我们就可以很容易的布局了，我们设计层如下图：

　　根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。

　　DIV结构如下：
　　│body {}　/*这是一个HTML元素，具体我就不说明了*/
　　└#Container {}　/*页面层容器*/
　　　　　├#Header {}　/*页面头部*/
　　　　　├#PageBody {}　/*页面主体*/
　　　　　│　├#Sidebar {}　/*侧边栏*/
　　　　　│　└#MainBody {}　/*主体内容*/
　　　　　└#Footer {}　/*页面底部*/
　　至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。

二、写入整体层结构与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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>

<body>
</body>
</html>

　　这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。

　　下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下：

程序代码

　　为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：

程序代码

/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}

/*页面层容器*/
#container {width:100%}

/*页面头部*/
#Header {width:800px;margin:0 auto;height:100px;background:#FFCC99}

/*页面主体*/
#PageBody {width:800px;margin:0 auto;height:400px;background:#CCFF00}

/*页面底部*/
#Footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}

　　把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的框架了。
　　关于以上CSS的说明（详细请参考CSS2.0中文手册，网上有下载）：

　　1、请养成良好的注释习惯，这是非常重要的；

　　2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；

　　3、讲解一些常用的CSS代码的含义：

　　　　font:12px Tahoma；
　　　　这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；

　　　　margin:0px；
　　　　也使用了缩写，完整的应该是：

　　　　margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px
　　　　或
　　　　margin:0px 0px 0px 0px

　　　　顺序是上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；
　　　　以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，
　　　　另外还有以下几种写法：
　　　　margin:0px auto；
　　　　说明上下边距为0px，左右为自动调整；
　　　　我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，
　　　　只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。

　　　　text-align:center
　　　　文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。

　　　　background:#FFF
　　　　设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。
　　　　background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：
　　　　background:#ccc url('bg.gif') top left no-repeat；
　　　　表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，
　　　　top left
　　　　表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。
　　　　top/right/left/bottom/center
　　　　用于定位背景图片，分别表示上 / 右 / 下 / 左 / 中；还可以使用
　　　　background:url('bg.gif') 20px 100px;
　　　　表示X座标为20像素，Y座标为100像素的精确定位；
　　　　repeat/no-repeat/repeat-x/repeat-y
　　　　分别表示填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。

　　　　height / width / color
　　　　分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。

　　4、如何使页面居中？
　　　　大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？
　　　　是因为我们在#container中使用了以下属性：
　　　　margin:0 auto;
　　　　按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。
　　　　如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。
　　　　通过margin:auto我们就可以轻易地使层自动居中了。

　　5、这里我只介绍这些常用的CSS属性了，其他的请参看CSS2.0中文手册。
三、页面顶部制作(1)

　　当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。

　　在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写入以下样式代码：

程序代码

/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}

/*页面层容器*/
#container {width:800px;margin:10px auto}

　　样式说明：

　　a:link,a:visited {font-size:12px;text-decoration:none;}
　　a:hover {}

　　这两项分别是控制页面中超链接的样式，具体我就不说明了，请大家参阅手册。

　　#container {width:800px;margin:10px auto}

　　指定整个页面的显示区域。
　　width:800px指定宽度为800像素，这里根据实际所需设定。
　　margin:10px auto，则是页面上、下边距为10个像素，并且居中显示。
　　上一章中我们讲过，对层的margin属性的左右边距设置为auto可以让层居中显示。

　　接下来，我们开始制作TOP部分，TOP部分包括了LOGO、菜单和Banner，首先我们要做的就是对设计好的图片进行切片，以下是在FW下完成的切片：

　　我将TOP部分切片为两部分，第一部分包括了LOGO和一条横线。由于LOGO图片并没有太多的颜色，这里我于是将这一部分保存为GIF格式，调色板选择为精确，选择Alpha透明度，色版为白色(此处颜色应与背景色相同)，导出为logo.gif，图像宽度为800px。

　　到这里，有的朋友就说了，* 为什么要使用GIF格式？使用JPEG不是更好吗？
　　因为GIF格式的图片文件更小，这样能使页面载入的速度更快，当然使用此格式之前必须确定图片并没有使用太多的颜色，当我们使用了GIF格式时，从肉眼上并不能看出图片有什么太大的变化，因此这是可行的。

　　* 接下来的Banner部分还能使用GIF格式吗？
　　答案是不能，因为Banner部分是一个细致的图片，如果使用GIF格式颜色会有太大的损失，所以必须使用JPEG格式，将文件导出为banner.jpg。

　　* 合理的切片是非常之重要的，因为切片的方法正确与否决定了CSS书写的简易程度以及页面载入速度。

　　切好片后，我们还需要对TOP部分进行分析并将DIV结构写入Header中代码如下：

程序代码

　　为什么要这么写呢，因为对菜单使用列表<li>形式，可以在以后方便对菜单定制样式。

　　而为什么要添加以下代码呢？
　　<li class="menuDiv"></li>
　　插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线分隔。

　　然后我们在css.css中再写入以下样式：

程序代码

/*页面头部*/
#header {background:url(logo.gif) no-repeat}

　　样式说明：
　　#header {background:url(logo.gif) no-repeat}
　　给页面头部分加入一个背景图片LOGO，并且不作填充。

　　这里，我们没有指定header层的高度，为什么不指定呢？

　　因为header层中还有菜单和banner项，所以层的高度暂时是未知的，而层的属性又可以让层根据内容自动设定调整，因此我们并不需要指定高度。

三、页面顶部制作(2)----使用列表<li>制作菜单

　　开始此节的学习前，请确认你已经参照之前的几节内容写入了DIV、CSS到index.htm和css.css文件中。
　　这一节我将告诉大家如何用列表<li>来制作菜单。

程序代码

　　以上是这部分的结构，有关于<ul></ul>、<li></li>这两个HTML元素大家自己去参考相关的内容吧，它们最主要的作用就是在HTML中以列表的形式来显示一些信息。

　　还有一点需要大家一定要分清楚的，当在HTML中定义为id="divID"时，在CSS对应的设置语法则是#divID{} ，如果在HTML中定义为class="divID"时，则在CSS中对应的设置语法是.divID。
　　如果id="divID"这个层中包括了一个<img></img>，则这个img在CSS中对应的设置语法应该是#divID img {}，同样，如果是包含在class="divID"这个层中时，则设置语法应该是.divID img {}，这一点希望大家要分清楚了。
　　另外，HTML中的一切元素都是可以定义的，例如table、tr、td、th、form、img、input...等等，如果你要在CSS中设置它们，则直接写入元素的名称加上一对大括号{}就可以了。所有的CSS代码都应该写在大括号{}中。

　　按照上面的介绍，我们先在css.css中写入以下代码：
程序代码

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;}

　　解释一下：
　　#menu ul {list-style:none;margin:0px;}
　　list-style:none，这一句是取消列表前点，因为我们不需要这些点。
　　margin:0px，这一句是删除UL的缩进，这样做可以使所有的列表内容都不缩进。

　　#menu ul li {float:left;}
　　这里的 float:left 的左右是让内容都在同一行显示，因此使用了浮动属性(float)。

　　到这一步，建议大家先保存预览一下效果，我们再添加下面的内容，效果如下：

　　这时，列表内容是排列在一行，我们在#menu ul li {}再加入代码margin:0 10px：

程序代码

#menu ul {list-style:none;margin:0px;}
#menu ul li {float:left;margin:0 10px}

　　margin:0 10px的作用就是让列表内容之间产生一个20像素的距离(左：10px，右：10px)，预览的效果如下：

　　现在，雏形已经出来了，我们再来固定菜单的位置，把代码改成如下：

程序代码

#menu {padding:20px 20px 0 0}
/*利用padding:20px 20px 0 0来固定菜单位置*/
#menu ul {float:right;list-style:none;margin:0px;}
/*添加了float:right使得菜单位于页面右侧*/
#menu ul li {float:left;margin:0 10px}

　　这时，位置已经确定了，可是构思图中，菜单选项之间还有一条竖线，怎么办呢？
　　别忘了，我们早就已经留好了一个空的<li class="menuDiv"></li>，要想加入竖线就使用它了。
　　按照上面说的方法，我们再添加以下代码：

程序代码

.menuDiv {width:1px;height:28px;background:#999}

，保存预览一下，竖线是否已经出来了？关于这段代码就不多讲了，应该是很容易理解的。

　　不过，菜单选项的文字却在顶部，我们再修改成以下代码：

程序代码

#menu ul li {float:left;margin:0 10px;display:block;line-height:28px}

　　关于display:block;line-height:28px大家可以去参阅一下手册，我就不多讲了。

　　效果基本上已经实现了，剩下的就是修改菜单的超链接样式，在css.css中添加以下代码：

程序代码

#menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666}
#menu ul li a:hover{}

　　这个也不多说了，没什么好说的了，最后的效果如下：

　　这一节到这里就完毕了，顺便把素材提供给大家：
　　构思图：下载文件点击下载
　　HTML和CSS源文件：点击下载

四、页面制作(1)----用好border和clear

　　由于找工作找房子的原因，隔了这么久才能开始写教程，心里感觉很对不起一直在关注本站的朋友，今天是找到房子的第二天，于是赶快继续写教程。

　　这一节里面，主要就是想告诉大家如何使用好border和clear这两个属性。

　　首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在<td></td>中加入这么一段就可以了，你可以试试：
　　<div style="border-bottom:1px dashed #ccc"></div>

　　大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。

程序代码

　　以上代码便可以实现设计草图中的banner，在css.css中加入以下样式：

程序代码

#banner {
    background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
    width:730px; /*设定层的宽度*/
    margin:auto; /*层居中*/
    height:240px; /*设定高度*/
    border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
    clear:both /*清除浮动*/
}

　　通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。

　　另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动，如果不清除则会影响banner层位置的设定。

程序代码

　　以上是页面主体部分，我们在css.css中添加以下样式：

程序代码

#pagebody {
    width:730px; /*设定宽度*/
    margin:8px auto; /*居中*/
}
#sidebar {
    width:160px; /*设定宽度*/
    text-align:left; /*文字左对齐*/
    float:left; /*浮动居左*/
    clear:left; /*不允许左侧存在浮动*/
    overflow:hidden; /*超出宽度部分隐藏*/
}
#mainbody {
    width:570px;
    text-align:left;
    float:right; /*浮动居右*/
    clear:right; /*不允许右侧存在浮动*/
    overflow:hidden
}

　　为了可以查看到效果，建议在#sidebar和#mainbody中加入以下代码，预览完成后可以删除这段代码：

程序代码

border:1px solid #E00;
height:200px

　　保存预览效果，可以发现这两个层完美的浮动，在达到了我们布局的要求，而两个层的实际宽度应该160+2(border)+570+2=734px，已经超出了父层的宽度，由于clear的原因，这两个层才不会出现错位的情况，这样可以使我们布局的页面不会因为内容太长（例如图片）而导致错位。

　　而之后添加的overflow:hidden则可以使内容太长（例如图片）的部份自动被隐藏。通常我们会看到一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加overflow:hidden就可以解决这个问题。

　　CSS中每一个属性运用得当，就可以解决许多问题，或许它们与你在布局的页并没有太大的关系，但是你必须知道这些属性的作用，在遇到难题的时候，可以尝试使用这些属性去解决问题。

做官网就用科汛智能建站系统!

支持(0) |

反对(0)

顶端

底部

人小鬼大当前离线

109 主题	0 广播	0 粉丝

级别:一年级

用户积分:919 分
登录次数:48 次
注册时间:2006/8/5
最后登录:2009/2/10

人小鬼大发表于：2006/11/2 18:59:00 | 显示全部帖子查看该作者主题沙发

有生源找课程就上科汛课堂街!

什么是DIV+CSS?－浅谈DIV+CSS

我们都知道，在网页上利用HTML定位文字和图象是一件“令人心痛”的事情。我们必须使用表格标签和隐式GIF图象，即使这样也不能保证定位的精确，因为浏览器和操作平台的不同会使显示的结果发生变化。

而CSS能使你看到希望的曙光。利用今天我们即将学到的CSS属性，你可以精确地设定要素的位置，还能将定位的要素叠放在彼此之上，还有...还有......你自己慢慢看吧！

Cascading Style Sheets（CSS）是 DHTML 的基础。CSS 用来设定你网页上的元素是如何展示的。Cascading Style Sheets Positioning（CSS-P）是 CSS 的一个扩展，它可用来控制任何东西在网页上或是说在窗口中的位置。请你记住这两个名词：CSS 和 CSS－P。下面四个英文网址提供了详细的关于 CSS 和 CSS-P 的文件和解释。

● 1．使用 DIV 标签（div）

当我们使用 CSS-P 的时候，我们主要把它用在 DIV（division）tag 上。当你把文字，图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。所以当你以后看到这些名词的时候，你就知道它们是指一段在 DIV 中的 HTML。

使用 DIV 的方法跟使用其他 tag 的方法一样：

<DIV>This is a DIV tag .</DIV>

如果单独使用 DIV 而不加任何 CSS-P, 那么它在网页中的效果和使用 <P></P> 是一样的。

但当我们把 CSS-P 用到 DIV 中去以后，我么就可以严格设定它的位置。首先我们需要给这个可以被 CSS-P 控制的 DIV 一个 ID 或说是它的名字。比如说我们给下面这个 DIV 的名字是 truck。给名字的目的是我们以后可用 JavaScript 来控制它，比如说移动它或改变它的一些性质等等。

<DIV ID="truck">

This is a truck

</DIV>

给层次取什么名字是随意的，名字可以是任何英文字母和数字，但第一个必须是字母。有两种把 CSS-P 应用到 DIV 的方法。

Inline CSS：Inline 是最常用的方法。

<DIV ID="truck" STYLE="styles go here">

This is a truck .

</DIV>

External STYLE tag：使用 External 方法的结果是一样的。我们会在以后的课程里再详细解释这种方法。现在我们主要讨论Inline 方法。请注意在 External 方法里，在 STYLE 里的 ID 和 DIV 里的关系。

<STYLE TYPE="text/css">



</STYLE>

<DIV ID="truck">This is a truck .</DIV>

Cross-Browser CSS 性质：

我们这个课程的主要目的是让你写出的网页在 NS4 和 IE4 上都能工作，所以我们主要讨论那些对俩者都通用的性质。下面这些性质符合由 W3C 给出的标准。

position 决定 DIV tag 是如何放置的。“relative”意思是DIV的位置是相对于其他 tag 的，而“absolute”是说 DIV tag 的位置是相对于它所在的窗口。

left 相对于窗口左边的位置

top 相对于窗口上边的位置

width DIV tag 的宽度。所有在 DIV 里的文字或html都在里面。

height DIV tag 的高度。这个性质很少用除非你想 Clip 层次。

clip 给出 layer 的 clipping（可看的见的）部分。Clip 可使得 DIV 显示为一个可以定义的很准确的方块。你可以用以下的四个值来给出这个方块的在 DIV 位置和大小。

clip:rect(top,right,bottom,left);

visibility 隐蔽或展现DIV 根据它的值“visible”，“hidden”，“inherit”。

z-index DIV tag 的立体位置。值越大 DIV 的位置越高。

background-color DIV 背景的颜色。

layer-background-color Netscape 的 DIV 背景颜色。

background-image DIV 的背景图象。

layer-background-image Netscape 的 DIV 的背景图象。

● 2．绝对定位和相对定位（position）

绝对定位：

定位属性将是网虫们打开幸福之门的钥匙：

H4 { position: absolute; left: 100px; top: 43px }

这项CSS规则让浏览器将<H4>的起始位置精确地定在距离浏览器左边100象素，距离其顶部43象素的位置。注意这里唯一设置了的是左边和顶部，也就说，文字将从左到右，从上到下载入浏览窗口。

左边和顶部属性很直观，左边（left）设定要素距浏览器窗口左边的距离，顶部（top）设定距离浏览器窗口顶部的距离。设定这些距离时，你可以使用所学过的各种度单位或比例值。使用比例值时，比例值的是相对于母体要素的尺寸。

你可以定位什么呢？任何东西！段落、单词、GIF和JPEG图象、QUICKTIME电影等等。

相对定位：

绝对定位使你能精确地定位要素在页面的独立位置，而不考虑页面其它要素的定位设置。相对定位指你所定位的要素的位置相对于在文件中所分配的位置。例：

I { position: relative; left: 40px; top: 10px }

相对定位的关键在于定位了的要素的位置是相对于它通常应在的位置进行定位。相对定位单元出现在普通的静态定位单元的行间，定位时没有把自己和静态定位单元完全分开。如果你停止使用相对定位，则文字的显示位置将恢复正常。使用相对定位时要小心，否则容易将页面弄得非常乱。

除了相对定位和绝对定位，你还可以使用static（静止）参数值。Static 是 position 特性的缺省值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位设置。也就是说，除了边距特性，或通过使用 float 特性来浮动单元可影响单元的定位外，其它均不可以。

● 3．定位单元的控制（width、height、visiblility）

除了控制定位单元的左上角位置，你还可以控制单元的宽度和高度，及单元在页面的可视性。

宽度：定位了的要素在页面上显示时仍然会从左到右一直显示。利用宽度属性就可以设定字符向右流动的限制，即设定要素的宽度。

DIV { position: absolute; left: 200px; top: 40px; width: 150px }

浏览器接到这项规则时，它将文字按照规则规定的效果显示，还将段落的最大水平尺寸限制在150象素。

宽度属性只适用于绝对定位的要素。你可以使用我们学过的任何一种长度单位，或使用比例值设定宽度，比例值指相对于母体要素的比例。IE 4中，这项属性还可用于图象。你可以通过宽度设置人为地拉宽或压缩图象。

高度：理论上讲，高度应该和宽度的设置类似，只不过是在垂直方向上：

DIV { position: absolute; left: 200px; top: 40px; height: 150px }

这里我用了“理论上讲”，因为有些浏览器不支持高度属性。

可视性：利用CSS，你可以隐藏要素，使其在页面上看不见。这条属性对于定位了的和未定位的要素都适用。

H4 { visibility: hidden }

选项：

visible 使要素可以被看见

hidden 使要素被隐藏

inherit 指它将继承母体要素的可视性设置。

值 inherit 为缺省值。这使单元继承父单元的可见性。所以，如果某一段是隐藏的，则它包含的任何行间单元也都被隐藏。这一继承性可被明确指定的可见性取代。例如，段内的 EM 单元被指定为可见，这时如果该段被隐藏，则段内的所有其它内容都将消失，而唯有 EM 单元中的文本是可见的。

当一个要素被隐藏后，它仍然要占据浏览器窗口中的原有空间。所以，如果你将文字包围在一幅被隐藏的图象周围，那么，其显示效果将是文字包围着一块空白区域。此新闻

这条属性在编写语言和使用动态HTML时很有用，比如你可以使某段落或图象只在鼠标滑过时才显示。

● 4．单元层次（z-index）

特性 z-index 用于堆叠屏幕上的单元。缺省情况下，单元堆叠的顺序为它们出现在HTML标记的顺序——也就是说，后出现单元堆叠在早出现单元的上面。Z-index 特性实际上定义同属（sibling）单元的堆叠顺序以及单元相对父单元的堆叠。按照规范草案，具有正 z-index 值的单元群都堆叠在父单元之上，它们自己的堆叠顺序则按其取值的大小来决定（值大的单元在上层）。同样，具有负 z-index 值的单元群都堆叠在父单元之下，它们自己的堆叠顺序也按取值的大小来定（值大的单元在上层，例如值为 -1 的单元在值为 -2 的单元的上面）。

该参数值使用纯整数。z-index用于绝对定位或相对定位了的要素。你也可以给图象设定z-index。（对于Communicator，最好将 <IMG>标签包在<SPAN>或 <DIV>标签内，然后将z-index应用到<SPAN>或 <DIV>。）

● 5．剪辑绝对定位单元（clip）

绝对定位单元可以被剪辑——也即剪辑显示给用户的区域，只显示单元的一部分而把其余部分作透明处理。对于传统的基于文本和图像的网络页面，这并不是一个很有用的特征。但若要求多媒体页面，这是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支持多媒体页面，它们通过文档的脚本接口动态地调整单元周围的剪辑区，从而实线文本“划入”和图像渐显等显示特征。

在CSS中，剪辑通过 clip 特性来控制，这一特性只能用于绝对定位单元，其缺省值为 auto，按单元的外边缘来剪辑单元（实际上等于没有剪辑）。另外，可通过如下表达式设置剪辑框：

clip : rect(top,right.bottom,left) ;

其中 top、right、bottom 和 left 分别是矩形剪辑框的上边、右边、下边和左边相对于被剪辑单元左上角的位置。Top、right、bottom 和 left 的值可以为任意绝对或相对长度值（但不能为百分比值），或者是关键字 auto。取值为 auto 意味着剪辑区域的各边放好以后，被剪辑单元中的任何内容都不会超出这个区域。

● 6．控制单元溢出（overflow）

固定绝对或相对定位单元的 width 和 height，很可能会因为指定的区域不能满足单元实际内容的需要，而造成单元内容溢出。这时可使用 overflow 来指定浏览器如何处理溢出：值 none（缺省值）允许浏览器显示溢出的内容，因此单元可溢出指定的区域。而值 clip 要求浏览器在单元底部和右边剪辑单元内容，这样，超出指定区域的单元内容将不显示。值 scroll 也同样要求浏览器在单元底部和右边剪辑单元内容（同 clip），不过，浏览器应该（如果可能的话）为单元提供滚动条以使用户能通过滚动来浏览被剪辑的内容。

CSS布局：

你正在学习CSS布局吗？是不是还不能完全掌握纯CSS布局？通常有两种情况阻碍你的学习：

　　第一种可能是你还没有理解CSS处理页面的原理。在你考虑你的页面整体表现效果前，你应当先考虑内容的语义和结构，然后再针对语义、结构添加CSS。这篇文章将告诉你应该怎样把HTML结构化。

　　另一种原因是你对那些非常熟悉的表现层属性(例如：cellpadding,、hspace、align="left"等等)束手无策，不知道该转换成对应的什么CSS语句。当你解决了第一种问题，知道了如何结构化你的HTML，我再给出一个列表，详细列出原来的表现属性用什么CSS来代替。

　　结构化HTML

　　我们在刚学习网页制作时，总是先考虑怎么设计，考虑那些图片、字体、颜色、以及布局方案。然后我们用Photoshop或者Fireworks画出来、切割成小图。最后再通过编辑HTML将所有设计还原表现在页面上。

　　如果你希望你的HTML页面用CSS布局(是CSS-friendly的)，你需要回头重来，先不考虑“外观”，要先思考你的页面内容的语义和结构。

　　外观并不是最重要的。一个结构良好的HTML页面可以以任何外观表现出来，CSS Zen Garden是一个典型的例子。CSS Zen Garden帮助我们最终认识到CSS的强大力量。

　　HTML不仅仅只在电脑屏幕上阅读。你用photoshop精心设计的画面可能不能显示在PDA、移动电话和屏幕阅读机上。但是一个结构良好的HTML页面可以通过CSS的不同定义，显示在任何地方，任何网络设备上。
开始思考

　　首先要学习什么是"结构"，一些作家也称之为"语义"。这个术语的意思是你需要分析你的内容块，以及每块内容服务的目的，然后再根据这些内容目的建立起相应的HTML结构。

　　如果你坐下来仔细分析和规划你的页面结构，你可能得到类似这样的几块：

　　标志和站点名称
　　主页面内容
　　站点导航(主菜单)
　　子菜单
　　搜索框
　　功能区(例如购物车、收银台)
　　页脚(版权和有关法律声明)

　　我们通常采用DIV元素来将这些结构定义出来，类似这样：

　　<div id="header"></div>

　　<div id="content"></div>

　　<div id="globalnav"></div>

　　<div id="subnav"></div>

　　<div id="search"></div>

　　<div id="shop"></div>

　　<div id="footer"></div>

　　这不是布局，是结构。这是一个对内容块的语义说明。当你理解了你的结构，就可以加对应的ID在DIV上。DIV容器中可以包含任何内容块，也可以嵌套另一个DIV。内容块可以包含任意的HTML元素---标题、段落、图片、表格、列表等等。

　　根据上面讲述的，你已经知道如何结构化HTML，现在你可以进行布局和样式定义了。每一个内容块都可以放在页面上任何地方，再指定这个块的颜色、字体、边框、背景以及对齐属性等等。

用CSS替换传统方法
　　下面的列表将帮助你用CSS替换传统方法：

　　HTML属性以及相对应的CSS方法
　　HTML属性

　　CSS方法说明
　　align="left"

　　align="right" float: left;

　　float: right; 使用CSS可以浮动任何元素:图片、段落、div、标题、表格、列表等等

　　当你使用float属性，必须给这个浮动元素定义一个宽度。

　　marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" margin: 0; 使用CSS, margin可以设置在任何元素上, 不仅仅是body元素.更重要的，你可以分别指定元素的top, right, bottom和left的margin值。

　　vlink="#333399" alink="#000000" link="#3333FF" a:link #3ff;

　　a:visited: #339;

　　a:hover: #999;

　　a:active: #00f;
　　在HTML中，链接的颜色作为body的一个属性值定义。整个页面的链接风格都一样。使用CSS的选择器，页面不同部分的链接样式可以不一样。

bgcolor="#FFFFFF" background-color: #fff; 在CSS中，任何元素都可以定义背景颜色，不仅仅局限于body和table元素。

bordercolor="#FFFFFF" border-color: #fff; 任何元素都可以设置边框(boeder)，你可以分别定义top, right, bottom和left

border="3"　cellspacing="3" border-width: 3px; 用CSS，你可以定义table的边框为统一样式，也可以分别定义top, right, bottom and left边框的颜色、尺寸和样式。

　　你可以使用 table, td or th 这些选择器.

　　如果你需要设置无边框效果，可以使用CSS定义： border-collapse: collapse;

　　<br clear="left">
　　
　　<br clear="right">

　　<br clear="all">
　　clear: left;

　　clear: right;

　　clear: both;
　　许多2列或者3列布局都使用 float属性来定位。如果你在浮动层中定义了背景颜色或者背景图片，你可以使用clear属性.

　　cellpadding="3"

　　vspace="3"

　　hspace="3" padding: 3px; 用CSS，任何元素都可以设定padding属性，同样，padding可以分别设置top, right, bottom and left。padding是透明的。

　　align="center" text-align: center;

　　margin-right: auto; margin-left: auto;
　　Text-align 只适用于文本.

　　象div，p这样的块级可以通过margin-right: auto; 和margin-left: auto;来水平居中

科汛商学院助您快速入门

支持(0) |

反对(0)

顶端

底部

人小鬼大当前离线

109 主题	0 广播	0 粉丝

级别:一年级

用户积分:919 分
登录次数:48 次
注册时间:2006/8/5
最后登录:2009/2/10

人小鬼大发表于：2006/11/2 18:58:00 | 显示全部帖子查看该作者主题藤椅

一分钟快速开通线上知识店铺

什么是CSS＋DIVCSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css+div的方式实现各种定位。
　　CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。
　　DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。


科汛商学院助您快速入门

支持(0) |

反对(0)

顶端

底部

人小鬼大当前离线

109 主题	0 广播	0 粉丝

级别:一年级

用户积分:919 分
登录次数:48 次
注册时间:2006/8/5
最后登录:2009/2/10

人小鬼大发表于：2006/11/2 18:57:00 | 显示全部帖子查看该作者主题板凳

做官网就用科汛智能建站系统!

给你找一下资料:

div+css布局漫谈

1.CSS布局常用的方法：
float : none | left | right

取值：
none : 默认值。对象不飘浮
left : 文本流向对象的右边
right : 文本流向对象的左边

它是怎样工作的，看个一行两列的例子

xhtml:

<div id="warp">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>

CSS:

#wrap{ width:100%; height:auto;}
#column1{ float:left; width:40%;}
#column2{ float:right; width:60%;}
.clear{ clear:both;}

position : static | absolute | fixed | relative

取值：

static : 默认值。无特殊定位，对象遵循HTML定位规则
absolute : 将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义
fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative : 对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

它来实现一行两列的例子

xhtml:

<div id="warp">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
</div>

CSS:

#wrap{ position:relative;/*相对定位*/width:770px;}
#column1{ position:absolute; top:0; left:0; width:300px;}
#column2{position:absolute; top:0; right:0; width:470px;}

他们的区别在哪?

显然，float是相对定位的，会随着浏览器的大小和分辨率的变化而改变，而position就不行了，所以一般情况下还是float布局！

2.CSS常用布局实例

一列
单行一列

body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px;}

两行一列

body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; }
#content-end {margin-left:auto; margin-right:auto; width: 400px; }

三行一列

body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px;}
#content-mid { margin-left:auto; margin-right:auto; width: 400px;}
#content-end { margin-left:auto; margin-right:auto; width: 400px; }

两列
单行两列

#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}

两行两列

#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}

三行两列

#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 410px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }

三列
单行三列
绝对定位

#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}

float定位

xhtml:

<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>

CSS:

#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

做考试题库就用#科汛在线考试系统!

支持(0) |

反对(0)

顶端

底部

＜上一主题 | 下一主题＞

首页 1 2 末页下一页