- 1、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。。
- 2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 4、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 5、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 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
您可能关注的文档
- 网球综合训练0418强化练习网前截击隔网多球.doc
- 网球综合训练0419强化练习网前截击隔网多球.doc
- 网球综合训练0420强化练习网前截击隔网多球.doc
- 网页设计素材《轮滑》教学团队《轮滑》教学团队.doc
- 网页设计习题习题13.docx
- 网页设计与制作网页制作基础知识项目3“网上花店”专题页制作答案.doc
- 网页设计与制作网页制作基础知识项目6“千年之恋”注册页面制作答案.doc
- 网页设计与制作网页制作基础知识项目7“赶快回家网”首页面制作答案.doc
- 网页设计与制作网页制作基础知识项目8“学好英语网”首页面制作答案.doc
- 网页样式制作(拓展)0.4.CSS的控制方式、第0章CSS3.0概述0.4.CSS的控制方式.docx
最近下载
- 求阴影面积的常用方法.pdf VIP
- 2024年广东省深圳市盐田区梅沙街道招聘社区工作者真题含答案详解.docx VIP
- 英、美、中三国会计师事务所组织形式演变研究.pdf VIP
- 工会经费管理与内部审计问题分析及改进建议.docx VIP
- 电气管理课件.pptx VIP
- 2025中国现代文学史自考真题及答案 .pdf VIP
- 2025努力锻造忠诚干净担当的新时代政法铁军党课PPT课件.pptx VIP
- 富士达电梯MLVF-T无机房(CP40)电气原理图.pdf VIP
- 国家建筑标准设计图集-12S101 矩形给水箱.pdf VIP
- Pico Pico Neo 3 VR头盔 Pico Neo 3 0207 用户手册.pdf
文档评论(0)