DIV和CSS什么关系?

html-css010

DIV和CSS什么关系?,第1张

div是块,与photoshop的层大意差不多,它只是一个容器,而容器里的内容就是CSS构建的……

而调用CSS样式表有几种形式。你可以看看CSS中文站的说明,一般表现为:div id=×××{1}或者.p{1}(1就是具体的CSS代码)……一般网页中是利用指向形式来指定CSS样式,所以你只会在后面看见{DIV ID="×××"}{/div}这样的指向代码而看不见它的CSS样式,因为它的样式表是放在另一个地方……

推荐你去看看《精通CSS.DIV网页样式与布局》,电驴上有视频教程,自己认真照着做一遍就基本入门了……认真学大概一星期就可以学完……

DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。

CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。

HTML语言自HTML4.01以来,不再发布新版本,原因就在于HTML语言正变得越来越复杂化、专用化。即标记越来越多,甚至各个浏览器生产商也开发出只适合于其特定浏览器的HTML标记,这显然有碍于HTML网页的兼容性。于是W3C组织进而重新从SGML中获取营养,随后,发布了XML,XML是一种比HTML更加严格的标记语言,全称是可扩展标记语言(EXtensible Markup Language http://www.seoyouhua.net/)。但是XML过于复杂,且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场,XHTML语言就是一种可以将HTML语言标准化,用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展,适合自动数据交换,并且更加规整。说了这么多,现在该说正题了——CSS。其实CSS单独使用除了麻烦一点之外,我个人觉得并无明显的优于HTML的好处。而关键就在于其与脚本语言(如Javascript)及XML技术的融合,即CSS+Javascript+XML(实际上有一种更好的融合:XML+XSL+Javascript)——但XSL,即可扩展样式表语言相较于CSS过于复杂,不太容易上手。自从CSS出现之后,HTML终于摆脱了杂乱无章的恶梦,开始将页面内容与样式分离。说了这么多,其实,个中真谛,还得使用过后才知道,所以,现在就开始学习使用吧。

DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。

在可以预计的将来,table的地位依然十分重要,于是,如google之流依然会生意兴隆。但是div代表的是网络世界发展的方向。它们一个简单,一个先进,萝卜白菜,您选什么都是有可取只处的.我们都很按您的要求认真服务的!

div是html(超文本语言)中的一个元素,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了w3c内容与表现相分离.

div 是标签 css是层叠样式表

DIV+CSS高级布局已逐渐流行,但面对所谓DIV+CSS布局的叫法让人更为担心,不要让DIV成为Table的替代品,多层嵌套的DIV会严重影响代码的可阅读性,活用HTML为我们提供的标签吧。

什么时候应该用DIV?

虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位.例如我们要定义一块头部的区域,一般会这样定义一个DIV:

这里就是头部框架里要写的内容

当然,可以用class来定义,但一般来讲如不是在同一页面会重复的元素,用id能更好的区别开来.

查看如下定义代码

<ul id="navbar">

<li id="articles">

Articles</li>

<li id="topics">

Topics</li>

<li id="about">

About</li>

<li id="contact">

Contact</li>

<li id="contribute">

Contribute</li>

<li id="feed">

Feed</li>

</ul>

<h1 id="masthead">

<a href="/">

<img src="/pix/alalogo.gif" alt="A LIST Apart: For People Who Make Websites" />

</h1>

No. 214

定义了最上面的导航(ul部分),左边的大logo和那个圆圆的No.xxxx的标记.

他没有使用DIV来做顶部的框架,但却很好的说明了这些代码的用途,为什么?因为他活用了HTML提供的标签,以及样式名称的定义

其它最常用的布局标签

h1

这个标签或许真正会去用的人很少,因为它显示的字体真的是太"大"了,但我们是CSSer,有什么标签样式不能改呢?而且它所能表达的意思就如同它原先的作用一样明显(大标题)我想你已经知道怎么去用它了 ^_^

ul

这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分吧,所以还是用ul来的比较确切(去掉CSS后效果更明显)

b

这个已经不再推荐使用的标签,在布局上却能带来不少的方便(因为短),虽然我不是太赞成使用这个标签,但有些时候(比如细小地方的布局定义)还是不错的选择

h2

h2使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p

楼主,您要用DIV+CSS制作网页其实不是很难的,先说下步骤:

首先您先看设计效果图大概了解下布局,div+css其实就是N个盒子(块)组成一个网页,所以您先把网页基本的机各块给定下来再逐一加上内容也就是分解

如下:

#box (这个是最外边的DIV包含所有内容的盒子)

#top (这个是网页头部)

#main (这个是网页主体)

#links (这个是侧栏)

#footer (底部注释)

一般都分成这几个块,接下来如何做呢?

就拿头部来说吧TOP包含LOGO、banner、menu等等几个块

那我们就把TOP再分解掉:分成3部分

这里就用class类来定义了

.logo

.banner

.menu

其他的也是这样做。

总结:就是内容逐步的分开再逐步的加进去

把整个网页看做一个盒子把他再分成几个小盒子也就是最上面的那5个

然后再把TOP看成是一个大盒子把他分成.logo.banner.menu 3个小盒子

如果还有其他内容的话我们就再分下去,回过头来看以下哦~!原来就是

盒子套盒子啊呵呵其实就是这么简单,所以您得先理解盒子模型后再来

制作的话他比表格要好做多了(熟悉CSS哦)好了很晚了就这样吧,还有不明白的话就HI下我。

这样的回答您满意吧?加油~!说不定以后还一起工作呢哈哈