div+css.doc

Div+CSS标准的优点:1.大大缩减页面代码，提高页面浏览速度,缩减带宽成本;2.结构清晰，容易被搜索引擎搜索到，天生优化了seo3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。6.提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。7.可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。8.更好的控制页面布局。不用多说。9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。11.Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li 但标准语法最好有序的写。12.另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。13.Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。14.在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。16.使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。17.你可以轻松地控制页面的布局 。18.你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。1）文档类型这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitio这句话就是告诉浏览器你用的html代码是哪一个版本w3c根据你声明的版本来检查你的代码是否符合w3c规范XHTML 1.0 Transitio 是过渡型，现在大部分用的都是这个 DTD用来对xml文档进行语义约束的因为html的document标准是w3c制定的，http后面是w3c的dtd页面地址。这是标准的申明写法，代表这个网页符合w3c的dtd要求，没什么特别的意思2）语言编码它表示强制浏览器编码设为简体中文(GB2312)。这一句的作用是相当关键的，在制作网页的过程中千万不可省略。它可以加在网页中的任意部分，最好加在与之间。(FrontPage和Dreamweaver在创建的新网页当中已包含这句) 在过去，省略这句网页也往往可正常显示。但是现在WindowsXP的IE6.0又支持简体中文(GB18030)，是采用1/2/4 Bytes混合编码，但它并不会完全兼容GB2312。若网页中省略了这句，WinXP浏览器会默认为GB18030，网页中会出现部分乱码.要注意的就是，这句不能写在js文件中，否则仍不起作用，浏览器编码会默认为GB18030。 但是样式表语句可写在js文件中，唯独语句不可以meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们可以看到类似下面这段的html代码： head meta http-equiv=content-Type content=text/html; charset=gb2312 /head 也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。 一、meta标签的组成 meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 1、name属性 name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 meta标签的name属性语法格式是：meta name=参数 content=具体的参数值 。 其中name属性主要有以下几种参数： A、Keywords(关键字) 说明：keywords用来告诉搜索引擎你网页的关键字是什么。 举例：meta name =keywords content=science, education,culture,politics,ecnomics，relationships, entertaiment, human B、description(网站内容描述) 说明：description用来告诉搜索引擎你的网站主要内容。 举例：meta name=description content=This page is about the meaning of science, education,culture. C、robots(机器人向导) 说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 content的参数有all,none,index,noindex,follow,nofollow。默认是all。 举例：meta name=robots content=none D、author(作者) 说明：标注网页的作者 举例：meta name=author contentroot,一、语法：二、参数解析：1）name项：常用的选项有Keywords(关键字) ，description(网站内容描述)，author(作者)，robots(机器人向导)等。2）http-equiv项：可用于代替name项，常用的选项有Expires(期限)，Pragma(cache模式)，Refresh(刷新)，Set-Cookie(cookie设定)，Window-target(显示窗口的设定)，content-Type(显示字符集的设定)等。3）content项：根据name项或http-equiv项的定义来决定此项填写什么样的字符串。三、应用1、告诉浏览器网页所识别的文件类型及语言类型，比如说，我们要让浏览器识别HTM/HTML类型的简体中文网面，我们可以这样写： 2、让一些搜索引擎搜索到你的网页，代码可以这样写： 要达到自动搜索引擎真正能方便地搜索到你的网页还得注意以下几点：A、既要定义meta标记项，又要将首页正文的前200个字符定义成反映主页主题的文字。因为有些导航台在标引meta项中的关键词的同时，还要标引正文中的前200个字符。如：altavista。所以，有些人在注册完导航台后去检查注册结果时，发现导航台中的描述并不是你所希望的，而是诸如版权说明之类的文字。产生这一现象的原因就是没有注意到这一点。B、将定义关键词的meta标记项放在定义描述的meta项之前。如：C、将最重要的关键词放在最前面，让相关的关键词相邻。全小写与首字母大写并存，因为有的导航台在标引时对字符的大小写是敏感的。包括标点符号不要超过250个单词D、首页最好不用frame结构，因为frame将屏幕划分成多个窗口后，导航台不能智能地选择正确的窗口中的主页去标引。3、让一个页面过上一定的时间，自动转到另一个页面或者站点去，如： content中的6表示时间，单位为秒，url=后面是你要转向的网址，若是与你当前网页在同一目录下，可以直接写上文件名，如： 4、让网页每隔一段时间刷新一次，若要10秒刷新一次，代码这样写：5、通过Meta可以让你进入页面时产生一些特殊效果，具体应用如下： 其中，n的取值范围为0-23，具体的意义如下： 0 矩形缩小 1 矩形扩大 2 圆形缩小 3 圆形扩大 4 下到上 5 上到下 6 左到右 7 右到左 8 竖百叶窗 9 横百叶窗 10 错位横百叶窗 11 错位竖百叶窗 12 点 13 左右到中间 14 中间到左右 15 中间到上下 16 上下到中间 17 右下到左上 18 右上到左下 19 左上到右下 20 左下到右上 21 横条 22 竖条 23 以上 24种随机选择一种 6、标注作者：7、控制页面缓冲，如不要页面缓冲的代码这样写：3）html标签html标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。还需说明一点的是按xhtml规范，标签必须用小写4）css样式加载css样式有以下四种外部样式 内部样式 行内样式 导入样式 这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。h2 color:#f00;这种形式是内部样式表，它是以和结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。内部样式这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。import url(/css/global.css);链接样式是以import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以import url(/css/global.css)的形式链接全局样式，这样就使代码达到很好的重用性。5）css优先级id优先级高于class 后面的样式覆盖前面的 指定的高于继承 行内样式高于内部或外部样式 总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的 6）css盒模型组成这里的盒模型是和table布局的一个不同点。学习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。l 可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。l 在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。l 3像素bug是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现。IE6会在两个div中间加上3px的空隙，那么要解决这个问题，请在#side上加上_margin-right:-3px;记住，前边加上一下划线，这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。但它不能通过W3C验证。当两列固定宽度时，最好把#main也固定宽度且向右浮动，这样就可以避免IE6的3像素bug了。l hover和前边说的链接一样，同属于伪类，但有一点注意，目前IE6只支持a的伪类，其它标签的伪类不支持，所以要想在IE6下也显示正确，需要借助js来实现，我们定义一个类.current （自己命名，需和JS中相同）的属性为display:block;然后当鼠标划过后，用JS给当前li添加上这个样式上，根据css的优先级：指定的高于继承的原则，就实现了IE6下的正确显示。所以需要加上JS和样式#menu ul li.current ul display:block;。!-startList = function() if (document.all&document.getElementById) navRoot = document.getElementById(menu);var allli = navRoot.getElementsByTagName(li)for (i=0; il 相对定位和绝对定位定位标签：position包含属性：relative（相对） absolute（绝对）1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素相对于它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍