第5章 Div+CSS布局技术 经济管理学院.

Slides:



Advertisements
Similar presentations
商管群科科主任 盧錦春 年 3 月份初階建置、 4 月份進階建置、 5 月份試賣與對外營業。
Advertisements

第5章 表格的设计与 制作. 内容提要 表格的创建、编辑 表格的属性设置 特效表格的制作 布局表格的基本操作 表格和布局表格的应用.
Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
HyperText Markup Language
讲故事训练 授课人:田轶.
校本选修课 第三专题 西藏问题 北京师大二附中 李文燕.
教学内容 1、演示并讲解用表格布局制作的网页 2、用表格制作网页.
团队介绍 (1)西湖区社区街道挂职社会实践基地 (2)武义、缙云、双浦乡镇挂职社会实践基地 (3)BOX企业实习社会实践基地
网页 设计与制作.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
“深入推进依法行政加快建设法治政府” -《法治政府建设实施纲要》解读
XML 第05讲 使用CSS显示XML.
第五单元课1-3 层叠样式表.
第六节 可降阶的二阶微分方程 一、 型的微分方程 二、 型的微分方程 三、 型的微分方程.
CSS – 進階 IDIC.
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
第6章 网页图像处理 通过本章学习,应该掌握以下内容: 能够选择合适的网页颜色 了解网页图像的基本格式 掌握使用网页图像的要点
No Zuo No Die Why Not Try ? ——做更好的前端 技术中心 黄家权/mss.
RWD網頁設計實務 李欣螢 以誠研發有限公司.
第四章 样式表CSS CSS技术是一种格式化网页的标准方式,它通过设置CSS属性债周页元素获得各种不同效果。本章共分9个实例,主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。
CSS简介 WEB前端三剑客之二.
顏色與背景CSS樣式.
CSS 徐于晉 陳政樺 陳郁蘋 黃麒錕 劉芳賓.
定位的CSS樣式.
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
Web前端开发技术与实践 第12章 布局 阮晓龙 /
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
CSS 教學 下載並修改自: 資工系涂世俊老師教學網站.
第 13 章 用CSS 設定 文字顏色與背景.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
Css全教程 边框背景轮廓 群号: 韬略课堂:何韬.
Web前端开发技术与实践 第10章:盒子模型 阮晓龙 /
HTML5全栈开发序列课程 《前端入门》之CSS3新特性 余鹏作品.
Web前端开发技术与实践 第11章:背景与边框 阮晓龙 /
动态专题制作 凤凰网技术中心 应用管理部.
CSS 钟晖云 QQ:
CHAPTER 18 CSS樣式表的動態效果.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
HTML & CSS.
CSS樣式 靜宜大學 資管系 楊子青.
基礎程式設計範例 -網頁名片.
主讲:陶建平 华中科技大学网络与计算中心
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
CSS技术 蒋玉华.
Web前端开发技术与实践 第9章:文字样式 阮晓龙 /
UI 软件 设计 页面布局(二).
大家所认为的电子商务行业有哪些途径来赚钱?
聖文德書院 ST BONAVENTURE COLLEGE & HIGH SCHOOL
UI 软件 设计 页面布局(三).
网页设计与制作 Dreamweaver CS6 标准教程
網路程式設計期末project 指導教授:馬尚彬 學生:楊依林 學號:B
Web Programming 網際網路程式設計
计算机网络与网页制作 Chapter 11:用CSS作页面布局
主讲:陶建平 华中科技大学网络与计算中心
武汉纺织大学传媒学院 cm.wtu.edu.cn
網路程式設計 期末專案 棒球明星介紹 資工2B B 沈冠宇.
第12章 APDiv 对于有Dreamweaver基础的读者来说,初识APDiv或 许会感到即熟悉又陌生。熟悉于它的Div标识符, 陌生于他在CS3版本中的含义及作用。其实,APDiv 在Dreamweaver CS4中仍等同于前期版本的层,又 称为AP元素或CSS-P元素,本文以下简称AP层。 什么是层?有什么作用?前面我们学习过了表格,
布局大师——表格.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
武汉纺织大学传媒学院 cm.wtu.edu.cn
第5章 Div+CSS布局技术 主讲人:刘泰然 经济管理学院.
第7章 使用CSS设置链接与导航菜单 经济管理学院.
網路商店裝修之二 CSS樣式編輯.
CSS基礎 靜宜大學 資管系 楊子青.
第6章 层次原理图设计和多通道技术: 重点内容: 掌握自上而下的层次原理图设计方法 掌握自下而上的层次原理图设计方法
第2章 块级标签 经济管理学院.
使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師
第4章 JSP动态网页设计基础 教学目标 教学重点 教学过程 2019年10月21日.
Presentation transcript:

第5章 Div+CSS布局技术 经济管理学院

内 容 概 览 Div布局理念 CSS盒模型 盒子的定位 盒子的浮动 CSS常用布局样式

5.1 Div布局理念 5.1.1 Div布局页面的优点 传统的HTML标签中,既有控制结构的标签(如<title>标签和<p>标签),又有控制表现的标签(如<font>标签和<b>标签),还有本意用于结构后来被滥用于控制表现的标签(如<h1>标签和<table>标签)。页面的整个结构标签与表现标签混合在一起。 相对于其他HTML继承而来的元素,Div标签的特性就是它是一种块级元素,更容易被CSS代码控制样式。

5.1 Div布局理念 5.1.2 使用嵌套的Div实现页面排版 Div标签是可以被嵌套的,这种嵌套的Div主要用于实现更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的关系。 【演练 5-1】未嵌套的Div容器。 【演练 5-2】嵌套的Div容器 。

5.1 Div布局理念 【演练 5-1】未嵌套的Div容器。 【演练 5-2】嵌套的Div容器 。

5.2 CSS盒模型 5.2.1 盒模型的概念 盒模型将页面中的每个元素看做一个矩形框,这个框由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成,如图5-3所示。对象的尺寸与边框等样式表属性的关系,如图5-4所示。

5.2 CSS盒模型 5.2.2 盒模型的属性 1.外边距 外边距也称为外补丁。外边距设置属性有:margin-top、margin-right、margin-bottom、margin-left,可分别设置,也可以用margin属性,一次设置所有边距。 2.边框 常用的边框属性有7项:border-top、border-right、border-bottom、border-left、border-width、border-color、border-style。其中border-width可以一次性设置所有的边框宽度,border-color同时设置四面边框的颜色时,可以连续写上4种颜色,并用空格分隔。上述连续设置的边框都是按border-top、border-right、border-bottom、border-left的顺序(顺时针)。

5.2 CSS盒模型 5.2.2 盒模型的属性 3.内边距 内边距也称内补丁,位于对象边框和对象之间,包括了4项属性:padding-top(上内边距)、padding-right(右内边距)、padding-bottom(下内边距)、padding-left(左内边距),内边距属性不允许负值。与外边距类似,内边距也可以用padding一次性设置所有的对象间隙,格式也和margin相似,这里不再一一列举。

5.2 CSS盒模型 【演练5-3】使用外边距(margin)属性实现某个分区的缩进 及位置的居中。

5.2 CSS盒模型 【演练5-4】文字垂直居中效果。

5.2 CSS盒模型 【演练5-5】使用内边距属性设置分区的内容与边框之间的距离。

5.2 CSS盒模型 5.2.3 盒模型的宽度与高度 盒模型的宽度与高度是元素内容、内边距、边框和外边距这4部分的属性值之和。 5.2.3 盒模型的宽度与高度 盒模型的宽度与高度是元素内容、内边距、边框和外边距这4部分的属性值之和。 1.盒模型的宽度 盒模型的宽度=左外边距(margin-left)+左边框(border-left)+左内边距(padding-left)+内容宽度(width)+右内边距(padding-right)+右边框(border-right)+右外边距(margin-right) 2.盒模型的高度 盒模型的高度=上外边距(margin-top)+上边框(border-top)+上内边距(padding-top)+内容高度(height)+下内边距(padding-bottom)+下边框(border-bottom)+下外边距(margin-bottom)

5.2 CSS盒模型 5.2.4 外边距的叠加 外边距合并是指当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。 1.两个元素垂直相遇时叠加 当两个元素垂直相遇时,第一个元素的下外边距与第二个元素的上外边距会发生叠加合并,合并后的外边距的高度等于这两个元素的外边距值的较大者。 2.两个元素包含时叠加 假设两个元素没有内边距和边框,且一个元素包含另一个元素,它们的上外边距或下外边距也会发生叠加合并。

5.2 CSS盒模型 5.2.5 案例——制作网络鞋城关于页的局部信息 5.2.5 案例——制作网络鞋城关于页的局部信息 【演练5-6】使用盒模型技术修饰网络鞋城关于页的局部信息,通过设置边框和边距美化页面。

5.2 CSS盒模型

5.2 CSS盒模型 【演练5-7】网络鞋城页面顶部的布局,本例文件5-7.html的显示效果如图5-11所示。

5.3 盒子的定位 5.3.1 静态定位 静态定位是position属性的默认值,即该元素出现在文档的常规位置,不会重新定位。通常此属性可以不设置,除非是要覆盖以前的定义。 【演练5-8】静态定位。编写相应的CSS样式,生成的文件5-6.html在浏览器中显示的效果如图5-12所示。

5.3 盒子的定位 5.3.2 相对定位 相对定位(position:relative;)指的是通过设置水平或垂直位置的值,让这个元素“相对于”它原始的起点进行移动。 【演练5-9】相对定位 。使用上面的示例深入讨论,将id="box"的块级元素向下移动50px,向右移动50px。编写相应的CSS样式,生成的文件5-9.html的显示效果如图5-15所示。

5.3 盒子的定位 5.3.3 绝对定位 用“position:absolute;”表示绝对定位,使用绝对定位的对象可以被放置在文档中任何位置,位置将依据浏览器左上角的0点开始计算。 【演练5-10】绝对定位。继续使用上面的示例深入讨论,将id="box-1"的块级元素进行绝对定位,向下移动50px,向右移动200px。编写相应的CSS样式,生成的文件5-10.html在浏览器中显示的效果如图所示。

5.3 盒子的定位 5.3.4 相对定位与绝对定位的混合使用 【演练 5-11】相对定位与绝对定位的混合使用。编写相应的CSS样式,生成的文件5-9.html在浏览器中显示的效果如图所示。

5.3 盒子的定位 5.3.5 固定定位 固定定位(position:fixed;)其实是绝对定位的子类别。 5.3 盒子的定位 5.3.5 固定定位 固定定位(position:fixed;)其实是绝对定位的子类别。 【演练5-12】固定定位。为了对固定定位演示得更加清楚,将id="box1"的块级元素进行固定定位,将id="box2"的块级元素的高度设置得尽量大,以便能看到固定定位的效果。

5.4 盒子的浮动 5.4.1 浮动 浮动(float)是使用率较高的一种定位方式。浮动元素可以向左或向右移动,直到它的外边距边缘碰到包含块内边距边缘或另一个浮动元素的外边距边缘为止。 语法:float : none | left |right 【演练 5-13】向右浮动的元素。本例页面5-13.html的布局的初始状态如图5-17(a)所示,元素box-1向右浮动后的结果如图5-17(b)所示。

5.4 盒子的浮动 5.4.1 浮动 【演练5-14】向左浮动的元素。使用上面的示例继续讨论,本例页面5-14.html的页面布局如图5-20(a)所示,所有元素向左浮动后的结果如图5-20(b)所示。

5.4 盒子的浮动 5.4.1 浮动 【演练 5-15】空间不够时的元素浮动。使用上面的示例继续讨论,如果id="box"的块级元素宽度不够,无法容纳3个浮动元素box-1、box-2和box-3并排放置,那么部分浮动元素将会向下移动,直到有足够的空间放置它们,本例页面5-15.html的显示效果如图5-19(a)所示。如果浮动元素的高度彼此不同,那么当它们向下移动时可能会被其他浮动元素“挡住”,如图5-19(b)所示。 (a)块级元素宽度不够时的状态 (b)块级元素宽度不够且不同高度的浮动元素

5.4 盒子的浮动 5.4.2 清除浮动 在页面布局时,当容器的高度设置为auto且容器的内容中有浮动元素时,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面导致页面出现错位,这个现象称为浮动溢出。为了防止这个现象的出现而进行的CSS处理,就叫清除浮动。 语法:clear : none | left |right | both 【演练5-16】清除浮动。

5.5 CSS常用布局样式 5.5.1 两列布局样式 许多网站都有一些共同的特点,即顶部放置一个大的导航或广告条,右侧是链接或图片,左侧放置主要内容,页面底部放置版权信息等,如图所示的布局就是经典的两列布局。

5.5 CSS常用布局样式 5.5.2 三列布局样式 三列布局在网页设计时更为常用,如图所示。对于这种类型的布局,浏览者的注意力最容易集中在中栏的信息区域,其次才是左右两侧的信息。