- 1、本文档共34页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
第14章 DIV+CSS布局基础 在对CSS技术的基础知识有了一定的掌握后就可以开始 学习DIV+CSS的布局的方法。DIV+CSS的布局方法简单来 说就是使用div标签作为容器,使用CSS技术来排布div标签 的布局方法。常用的CSS布局方式有浮动、定位等。 本章是学习CSS技术最重要的一个部分,读者应多实践 本章内各个实例。 本章内容包括: 了解DIV+CSS布局的流程 学习盒模型以及盒模型的基本元素 学习页面元素的布局方式 实例制作歌曲专辑列表 实例制作给图片加入信息 14.1 初识DIV+CSS布局的流程 本节通过分析一 个企业主页的排 布方式来讲解初 步了解DIV+CSS 布局的方法。该 网页的效果图显 示如图所示。 14.2 了解盒模型 盒模型是DIV+CSS布局的基础,要实现DIV+CSS布局 必需了解盒模型的原理。在页面上的每个元素都能看做一个 容器,这个容器就是一个盒子。例如,p标签是一个能装文 字的容器,它的高度就是所承载文字的高度。使用 DIV+CSS布局,div标签就是布局中所用到的容器。大部分 人认为只有div标签能作为容器来安排布局。其实在XHTML 页面中几乎所用的标签都是容器,都能被当作容器来使用。 页面上的每个容器都占有一定的位置,有一定的大小。页面 上的每个容器都会影响其他容器的排布,它们相互作用,而 形成一个页面的布局。 14.2.1 div标签的盒模型例子 以下以div标签的盒模型为例子,讲述基本盒模型的基 本概念。【示例】本例子讲述基本盒模型的概念。 14.2.2 基本盒模型 下图所示为基本盒模型。在页面中的所有元素都遵 循该模型的设置方式。 14.2.3 边距 边距用于设置页面元素与其它元素的距离。CSS的 margin属性用于设置边距距离。 1.用长度单位设定margin的值 例14-3 2.用百分比设定margin的值 例14-4 3.边距值的缩写: 如果提供全部四个参数值,将按上-右-下-左的顺 序作用于四边。 如果只提供一个,将用于全部的四边。 如果提供两个,第一个用于上-下,第二个用于左- 右。 如果提供三个,第一个用于上,第二个用于左-右, 第三个用于下。例14-5 4.单边距值:margin-top 、margin-right 、margin-bottom 、margin-left 5.边距重叠 例14-6 注:在边距重叠时,会淘汰边距较小的一个。边距重叠 只发生在边距属性中,补白和边框都不会出现重叠现象。 14.2.4 补白 补白用于增加页面元素边框与内容之间的空间。CSS的 padding属性用于设置补白。 1.用长度单位设定padding的值 例14-7 2.用百分比设定padding的值,其计算标准是以该元素的父元素宽高为基准。 例14-8 3.补白值的缩写: 如果提供全部四个参数值,将按上-右-下-左的顺序 作用于四边。 如果只提供一个,将用于全部的四条边。 如果提供两个,第一个用于上-下,第二个用于左-右。如果提供三个,第一个用于上,第二个用于左-右,第三个用 于下。 4.单补白值:padding-top 、padding-right 、padding-bottom 、padding-left 14.2.5 边框 边框是页面元素可视范围的最外圈。边框包围的范围包 括页面元素的补白和内容。CSS中提供以下三个设置边框的 属性: 1.边框样式border-style 参数: none : 无边框。与任何指定的border-width值无关 hidden : 隐藏边框。IE不支持 dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线 dashed : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线 solid : 实线边框 double : 双线边框。两条单线与其间隔的和等于指定的border-width值 groove : 根据border-color的值画3D凹槽 ridge : 根据border-color的值画菱形边框 inset : 根据border-color的值画3D凹边 outset : 根据border-color的值画3D凸边 border-style也包括border-top-style 、border-right-style 、 border-bottom-style 、bo
您可能关注的文档
- 一年级课前2分钟成语.ppt
- 人教版三年级语文上册21课望天门山-1.ppt
- 第02章:平面力系.ppt
- 人教版三年级语文上册29.《掌声》课件.ppt
- 人教版三年级语文上册一幅名扬中外的画课件3.ppt
- 第03课-3月08日.ppt
- 一张图一句话诉说人生哲理..ppt
- 一座城池演讲稿.ppt
- 人教版三年级语文上册富饶的西沙群岛课件4.ppt
- 一张图一句话诉说人生哲理超经典.ppt
- [专精特新]金华永和氟化工有限公司行业竞争力评级分析报告(2023版).pdf
- [专精特新]重庆升光电力印务有限公司行业竞争力评级分析报告(2023版).pdf
- [专精特新]无锡巨力重工股份有限公司行业竞争力评级分析报告(2023版).pdf
- [专精特新]江西凯安新材料集团股份有限公司行业竞争力评级分析报告(2023版).pdf
- [专精特新]浙江永昌电气股份有限公司行业竞争力评级分析报告(2023版).pdf
- [专精特新]苏州中创铝业有限公司行业竞争力评级分析报告(2023版).pdf
- [专精特新]杭州汽轮铸锻有限公司行业竞争力评级分析报告(2023版).pdf
- [专精特新]浙江美声智能系统有限公司行业竞争力评级分析报告(2023版).pdf
- [专精特新]汕头市虹桥包装实业有限公司行业竞争力评级分析报告(2023版).pdf
- [专精特新]江西亚中电子科技股份有限公司行业竞争力评级分析报告(2023版).pdf
最近下载
- 江苏省2021年中学生生物学奥林匹克初赛理论试题答案.doc
- 2025年哈尔滨应用职业技术学院单招语文测试题库附答案.docx VIP
- 2025年安徽水利水电职业技术学院高职单招职业技能测试近5年常考版参考题库含答案解析.docx
- 【道氏理论】(完全版).doc
- 分娩镇痛的现状和临床应用课件.ppt
- 学科中心教研组管理方案.docx VIP
- 五年级下册数学单元测试-3长方体和正方体 人教版(含答案).docx
- 2024年安徽水利水电职业技术学院单招职业技能测试题库(考试直接用).docx VIP
- 23S516 混凝土排水管道基础及接口图集.docx VIP
- 数控系统(CNC)系列:Fanuc 31i-B_(6).G代码和M代码详解.docx
文档评论(0)