网页样式制作(拓展)第9章页面排版div标签.docxVIP

网页样式制作(拓展)第9章页面排版div标签.docx

  1. 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
  2. 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载
  3. 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
  4. 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
  5. 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们
  6. 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
  7. 7、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
div标签 格式: div……/ div 功能:定义文档中的分区或节,用来组合文档中的块元素,以便通过样式来格式化它们。 说明:div在CSS定义中属于一个块级元素,div可以包含段落、标题、表格甚至其它部分。这使DIV便于建立不同集成的类,如章节、摘要或备注。在页面效果上,使用div会自动换行。 DIV+CSS进行网站布局是现在被普遍采用,其特点是结构非常整洁,内容更加清晰,更容易让设计人员进行分离,不象表格布局充满各种各样的属性和数字,而且很多CSS文件通常是共用的,从而大大缩减页面代码,提高页面浏览速度,采用DIV+CSS代码进行网站制作对关键词排名优化也是有很多的好处。 采用DIV+CSS进行网站布局,宽度固定且居中的页面是最常见的网页版式。随着网络媒体的更新换代,一个网页版式很难同时兼顾各种不同分辨率的显示终端。一个以不变应万变的方法是将网页放在屏幕中间,并且固定页面的宽度。 常用的DIV+CSS布局样式属性有: 水平对齐 \o CSS font-family 属性 text-align属性,如body{text-align:center;} 位置属性:top、right、bottom、left 相对定位(相对于原来的位置):position:relative; 绝对定位(相对于最近一个已定位的父标签位置):position:absolute; 例7-1:制作如图7-1所示的页面,要求宽度固定并且居中 图7-1宽度固定并且居中效果 本例基本代码如下: div id=container div id=bannerid =banner /div div id=contentid =content/div div id=apDiv1/div div id=footer此处显示 id footer 的内容/div /div /body 用container层作为所有层的最外层,固定宽度为800px,里面4个div元素中,banner层、content层和footer层是普通的div,按先后顺序排列,第三个div是绝对定位的div,它浮在其它div元素的上面,它的位置通过如下样式进行定位: Left:100px;top:200px; 如果container层做了定位,则apdiv1层离container层左边框100px,离container层上边框200px,如果container层没有做定位,则离body(即页面最左边)100px,离body(即页面最上边)200px。为了给container层里面的apDIV(即设置了绝对定位的DIV)提供一个定位依据,container层要设置相对定位 position:relative; 实现居中的方式不同浏览器作不同的处理。IE6-IE7浏览器实现居中的方式是: body{text-align:center;} 然后在container层恢复左对齐 #container{text-align:left;} IE8以后的版本不能用body{text-align:center;}样式为div标签居中,需要设置div标签本身margin{0 auto 0 auto}实现居中。为了使网页能兼容不同版本的浏览器,故设置如下样式作为居中的代码, body{text-align:center;} #container{ text-align:left; width: 800px; margin: 0pxauto; position: relative; } div和span html4规范的一大突破就是引入了一大空元素span和div。所谓空元素,就是说如果单独在页面上插入这两个元素,不会对页面产生影响。这两个属性专门为样式表CSS定义而生,对span和div定义CSS样式表以后,其中内容的样式会随之变化。 div和span最明显的区别在于div是块元素,而span是行内元素(也译作内嵌元素)。所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。div工作于文本块一级,它在它所包含的HTML元素的前面及后面都引入了行分隔。div元素可以嵌套span,span不可以嵌套div。 例7-2:制作如图7-2所示的页面,要求宽度固定并且居中 图7-2“校内新闻”效果 基本代码如下: !DOCTYPE head metacharset=utf-8 / title校内新闻/title style type=text/css div{ color: #FF0; background-color: #999; font-family: 楷体; font-size: 16px; line-height: 24px; } .t3-4 { color: #36C; backgro

文档评论(0)

WanDocx + 关注
实名认证
文档贡献者

大部分文档都有全套资料,如需打包优惠下载,请留言联系。 所有资料均来源于互联网公开下载资源,如有侵权,请联系管理员及时删除。

1亿VIP精品文档

相关文档