- 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
- 2024年度大蒜精油产品研发与创新资助合同3篇.docx
- 2024年度网络安全技术知识产权保密协议合同3篇.docx
- 2024年知识产权许可与转让合同标的及许可范围.docx
- 亲子活动主题拓展主题森林剧本杀研学团建活动策划【侦探集结+案件破解+迷雾追击+真相之光+自然探索】.pptx
- 文旅项目景区景点文旅小镇春季互动露营商会团建拓展年度活动策划方案【亲子研学】【文旅研学】【文旅游学】.pptx
- 婚礼婚庆行业汉制传统中式婚礼主题活动策划案【婚庆策划】【古风婚庆】 .pptx
- 地产项目综合体商业广场四月春日百花集市主题活动策划方案【春季活动】.pptx
- 文旅项目景区景点城市公园商业定位开发运营策划服务及招商运营方案【城市地标】【城市规划】.pptx
- 三农行业文旅小镇乡村振兴田园生态示范区康养项目战略定位及全方位规划运营概念案【健康养老】【乡村旅游】【文旅】 .pptx
- 陕西省咸阳市重点中学2023-2024学年高考冲刺押题(最后一卷)英语试卷含解析.doc
最近下载
- 钳工理论考试题库...doc VIP
- 煤矿心理健康教育培训.pptx VIP
- 新型咪唑类离子液体的合成及反应性能的研究的开题报告.docx VIP
- 国家标准16火力发电厂与变电站设计防火规范.pdf VIP
- 《城镇排水管渠污泥处理处置技术标准》DBJ50T-492-2024.pdf VIP
- (高清版)B-T 37047-2022 基于雷电定位系统(LLS)的地闪密度 总则.pdf VIP
- 道路运输企业 各岗位安全责任制考核表.pdf VIP
- 公共卫生工作台帐.doc
- 小学生反邪教ppt课件.pptx
- 小学英语湘少版四年级上册《Unit 4 These are flowers》教案.docx VIP
文档评论(0)