资源简介

(共67张PPT)
05盒子模型的使用任务 1 制作注册网页任务 2 制作登录网页制作注册网页任务 1● 1. 了解盒子模型的概念。● 2. 熟练运用盒子模型相关属性对网页进行布局。本任务主要通过设置盒子的内外边距、边框等属性，布局缤购乐食电子商务网站注册网页表单模块，并对盒子进行定位设置，完成缤购乐食电子商务网站注册网页。该注册网页包括 login-header、login-banner、login-footer 三个盒子。图所示为缤购乐食电子商务网站注册网页。缤购乐食电子商务网站注册网页步骤一：在 body 标签中新建网页顶部的大盒子 div，命名为 login-header，利用 img 标签在盒子中加入电商网站 logo 图片。代码如图所示。运行上图中的代码，效果如图所示。加入 logo 图片效果步骤二：在 body 标签的下部新建一个底部盒子并命名为 login-footer，盒子包含 2 行内容，上面一行命名为 login-ftop，下面一行命名为 login-fbottom，代码如图所示。加入 html 内容加入 html 内容使用 CSS 代码为底部盒子中的元素设置字体颜色和字符间距，如图所示。设置文字颜色和文字间距步骤三：在body标签中，在login-header的下方、login-footer的上方新建一个盒子并命名为login-banner，盒子包含三个子盒子，第一个子盒子命名为login-main，login-main 盒子下又包含两个子盒子，分别命名为 login-mleft、login-mright。首先在 login-mleft 盒子中使用 img标签引入背景大图，然后在 login-mright 盒子中添加 form 表单，在 form 表单中添加多个不同的 input 表单控件。代码如图所示。加入 login-banner 盒子中的内容加入 login-banner 盒子中的内容步骤四：使用 CSS 代码设置 login-banner 的宽度与浏览器同宽，高度为 470 像素；设置 login-main 的宽度为 1 000 像素，居于 login-banner 的水平中间位置；盛放表单的盒子 login-mright的宽度设置为 360 像素，高度设置为 430 像素。表单中每个 input 控件左侧的图标都是通过使用 background 属性设置的背景图片。代码如图所示。设置中间部分样式设置中间部分样式设置中间部分样式设置中间部分样式一、盒子模型什么是 CSS 的盒子模型呢？为什么称为盒子？在网页设计中常见的属性名有内容（content）、填充（padding）、边框（border）、边界（margin），CSS 盒子模型具备以上这些属性，通常又称填充为内边距、称边界为外边距。盒子模型平面图如图所示。盒子模型平面图盒子模型层次 3D 示意图二、盒子模型相关属性1. 边框属性为了分割网页中不同的盒子，常常需要给元素设置边框效果。在 CSS 中边框属性包括边框样式属性（border-style）、边框宽度属性（border-width）、边框颜色属性（border-color）、单侧边框的属性、边框的综合属性，CSS 边框类型及属性见表。CSS 边框类型及属性在上表中列出了所有的边框属性，对于初学者来说比较难以理解，下面对上表中的边框属性进行具体讲解。（1）设置边框样式边框样式用于定义网页中边框的风格，常用属性值如下。none：没有边框，即忽略所有边框的宽度（默认值）。solid：边框为单实线。dashed：边框为虚线。dotted：边框为点线。double：边框为双实线。在设置边框样式时，既可以对盒子的单边进行设置，又可以综合设置四条边的样式，具体情况如下。border-top-style：上边框样式。border-right-style：右边框样式。border-bottom-style：下边框样式。border-left-style：左边框样式。border-style：上边框样式 右边框样式 下边框样式 左边框样式。border-style：上边框样式 左右边框样式 下边框样式。border-style：上下左右边框样式。使用 border-style 属性综合设置四条边样式时有两个原则，一是必须按上右下左的顺时针顺序；二是省略时采用值复制的原则，即一个值为四条边，两个值为上下 / 左右，三个值为上 / 左右 / 下。（2）设置边框宽度border-width 属性用于设置边框的宽度，其常用取值单位为像素 px。同边框样式一样，边框宽度也可以针对四条边分别设置，或综合设置四条边的宽度，具体情况如下。border-top-width：上边框宽度。border-right-width：右边框宽度。border-bottom-width：下边框宽度。border-left-width：左边框宽度。border-width：上边框宽度 右边框宽度 下边框宽度 左边框宽度。（3）设置边框颜色border-color 属性用于设置边框的颜色，其取值可以为预定义的颜色值、十六进制#RRGGBB 或 RGB 格式 rgb（r, g, b）、rgb（r%, g%, b%），实际工作中最常用的是十六进制#RRGGBB。边框的默认颜色为元素本身的文本颜色，对于没有文本的元素，其默认边框颜色为父元素的文本颜色。边框颜色的单边与综合设置如下。border-top-color：上边框颜色。border-right-color：右边框颜色。border-bottom-color：下边框颜色。border-left-color：左边框颜色。border-color：上边框颜色 右边框颜色 下边框颜色 左边框颜色。综合设置边框四条边的颜色时，必须按照上右下左的顺时针顺序，省略时采用值复制的原则，即一个值为四条边，两个值为上下 / 左右，三个值为上 / 左右 / 下。（4）综合设置边框使用 border-style、border-width、border-color 虽然可以实现丰富的边框效果，但是采用这种方式书写的代码比较烦琐，且不便于阅读，为此 CSS 提供了更简单的边框设置方式，其基本格式如下。采用上述设置方式时，宽度、样式、颜色的顺序不分先后，可以只指定需要设置的属性，省略的部分将取默认值（样式不能省略）。当每一侧的边框样式都不相同，或者只需单独定义某一侧的边框时，可以使用单侧边框的综合属性 border-top、border-bottom、border-left 或 border-right 进行设置。例如，单独定义上边框，代码如图所示。当四条边的边框样式都相同时，可以使用 border 属性进行综合设置。单独定义上边框代码若要将二级标题的边框设置为双实线、红色、3 像素宽，操作代码如图所示。能够用一个属性定义元素的多种样式，如 border、border-top 等，在 CSS 中称为复合属性。常用的复合属性有 font、border、margin、padding 和 background 等。实际工作中常使用复合属性，它可以简化代码，提高网页的运行速度。设置二级标题的边框代码2. 内边距属性在网页设计中，为了调整内容在盒子中的显示位置，常常需要给元素设置内边距，所谓内边距指的是元素内容之间的距离，也常常称为内填充。在 CSS 中，padding 属性之间的距离也常常被称为内填充。在 CSS 中，padding 属性用于设置内边距，同边框属性 border 一样，padding 也是复合属性，其相关设置方法如下。padding-top：上内边距。padding-right：右内边距。padding-bottom：下内边距。padding-left：左内边距。padding：上内边距 右内边距 下内边距 左内边距。在上面的设置中，padding 相关属性的取值可为 auto（默认值）、不同单位的数值、相对于父元素（或浏览器）宽度的百分比（%），实际工作中最常用的是像素值（px），不允许使用负值。同边框相关属性一样，使用复合属性 padding 定义内边距时，必须按照顺时针顺序，省略时采用值复制的原则，一个值为四条边，两个值为上下 / 左右，三个值为上 / 左右 / 下。3. 外边距属性网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就要为盒子设置外边距。所谓外边距，指的是元素边框与相邻元素之间的距离。在 CSS 中，margin 属性用于设置外边距，它是一个复合属性，与内边距 padding 的用法类似，设置外边距的具体方法如下。margin-top：上外边距。margin-right：右外边距。margin-bottom：下外边距。margin-left：左外边距。margin：上外边距 右外边距 下外边距 左外边距。margin 相关属性的值以及复合属性 margin 取 1 ～ 4 个值的情况与 padding 相同。但是外边距可以使用负值，使相邻元素重叠。4. 背景属性网页能通过背景图像给读者留下深刻的印象，如节日主题的网页一般采用喜庆祥和的图片来突出效果，所以在网页设计中合理控制背景颜色和背景图像至关重要。下面将详细介绍用 CSS 控制背景样式的方法。（1）设置背景颜色设置背景颜色需要通过 background-color 属性来实现，关于该属性在前面的项目中已经做过详细讲解，这里不再做具体介绍。（2）设置背景图像在 CSS 中，背景不仅可以设置为某种颜色，还可以将图像作为网页元素的背景，通过background-image 属性设置来实现。（3）设置背景图像平铺默认情况下，背景图像会自动向水平和竖直两个方向平铺，如果不希望背景图像平铺，或者只想沿着一个方向平铺，可以通过 background-repeat 属性来控制，该属性的取值如下。Repeat：沿水平和竖直两个方向平铺（默认值）。no-repeat：不平铺（图像位于元素的左上角，只显示一次）。repeat-x：只沿水平方向平铺。repeat-y：只沿竖直方向平铺。（4）设置背景图像的不平铺如果将背景图像的平铺属性 background-repeat 定义为 no-repeat，图像将以不平铺的方式显示在 body 标签的左上角，代码如图所示。设置背景图像不平铺的代码（5）设置背景图像的位置如果想改变背景图像显示的位置，就需要对另一个 CSS 属性 background-position 进行设置。background-position 属性的取值有多种，具体如下。1）使用不同单位（最常用的是像素 px）的数值：直接设置图像左上角在元素中的坐标，例如“background-position: 20px 20px;”。2）使用预定义的关键字：指定背景图像在元素中的对齐方式。3）使用百分比：按背景图像和元素的指定点对齐。5. 盒子的宽与高网页是由多个盒子排列而成的，每个盒子都有固定的大小。在 CSS 中使用宽度属性width 和高度属性 height 可以对盒子的大小进行控制。width 和 height 的属性值可以为不同单位的数值或相对于父元素的百分比。实际工作中，最常用的是像素值。制作登录网页任务2● 1. 熟悉元素的定位模式和边偏移模式。● 2. 掌握静态定位的用法。● 3. 掌握相对定位的用法。● 4. 掌握绝对定位的用法。● 5. 掌握固定定位的用法。● 6. 掌握行元素和块元素之间的转换方法。本任务使用 CSS 定位对网页中的“注册”按钮和“忘记密码”超链接进行了精确定位，制作完成的缤购乐食电子商务网站登录网页如图所示。缤购乐食电子商务网站登录网页步骤一：由于本任务所制作的缤购乐食电子商务网站登录网页与任务 1 中缤购乐食电子商务网站注册网页的样式相似，故把任务 1 中的代码移植过来进行修改。首先把“手机号注册”改为“登录商城”，并且在后面加上一个“注册”按钮。然后把 input 标签减少到两个，并修改其中的图标与文字信息。最后把 checkbox 复选框后面的内容改为“记住密码”，并在其后加上一个“忘记密码”超链接。修改后的代码如图所示。登录商城未加定位相关 CSS 代码的原表单效果如图所示。未加定位相关 CSS 代码的原表单效果步骤二：通过图可以看到，“注册”按钮没有显示按钮效果，且位置不对。使用绝对定位后的 CSS 代码设置好定位相关代码之后，运行代码，定位后的登录表单效果如图所示。定位后的登录表单效果步骤三：步骤二已完成登录网页的内容，想要实现注册网页与登录网页之间的跳转，有两种很好的跳转方式：一是在表单 form 标签的属性 action 里面设置跳转目标网页地址；二是在 a 标签的 href 属性里面设置跳转目标网页地址。现在要实现在注册网页单击“注册”按钮跳转到登录网页，采用第一种跳转方式；在登录网页单击“登录”按钮跳转到注册网页，采用第二种跳转方式，具体操作如下。注册网页登录网页在注册网页上设置跳转代码，如图所示。在登录网页上设置跳转代码，如图所示。这样设置好后，两个网页之间就可以进行跳转了。注册网页上的跳转登录网页上的跳转一、元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分。1. 定位模式在 CSS 中，position 属性用于定义元素的定位模式，其基本语法格式如下。position 属性值及含义其中，position 属性值有 static、relative、absolute、 xed，具体见表。从表中可以看出，元素的定位主要分为四类，下面针对每一种定位方式进行详细讲解。（1）静态定位当用于定位的元素的 position 属性值为 static 时，称此定位模式为静态定位，元素所在的位置也就是在文档流中的位置。（2）相对定位当用于定位的元素的 position 属性值为 relative 时，称此定位模式为相对定位。（3）绝对定位当用于定位的元素的 position 属性值为 absolute 时，称此定位模式为绝对定位。绝对定位是将元素依据最近的已经定位（绝对定位、固定定位或相对定位）的父元素进行定位，若所有元素都没有定位，则依据根元素 body（浏览器窗口）进行定位。（4）固定定位当网页元素的 position 属性值为 xed 时，称此定位模式为固定定位。固定定位的元素特性如下。1）固定定位是相对于“当前浏览器窗口”来进行的定位。2）固定定位元素不再占空间，层级要高于普通元素，跟“浮动”很像。3）行内元素使用 xed 定位，将转成“块元素”。4）如果只指定了 xed 定位属性，并没有设置偏移量，则“原地不动”。边偏移属性及描述2. 边偏移定位模式仅用于定义元素以哪种方式定位，并不能确定元素的具体位置。在 CSS 中，通过边偏移属性 top、bottom、left 或 right 来精确定义定位元素的位置，具体见表。二、元素的转换html 中的网页元素被定义成不同的类型，大致分为块元素和行内元素两大类，也称块标签和行内标签。通过学习它们的特性，可以为使用 CSS 设置样式和布局打下基础。1. 块元素块元素在页面中以区域块的形式出现，其特点有：独自占据一整行或多行；可对其设置宽度、高度、对齐等属性；可以容纳行内元素和其他块元素。常见的块元素有 h1 ～ h6、p、div、ul、ol、li 等，其中 div 标签是最典型的块元素。2. 行内元素行内元素也称内联元素或内嵌元素，其特点有：和其他行内元素都在同一行上显示，不会独自换行；宽度就是它的文字或图片的宽度，默认不可改变；设置高度 height 无效，可以通过 line-height 来设置；设置 margin 只有左右 margin 有效，上下无效；设置 padding 只有左右 padding 有效，上下无效；只能容纳文本或者其他行内元素。常见的行内元素有 strong、b、em、i、del、s、ins、u、a、span 等，其中 span 标签是最典型的行内元素。在具体使用时，可根据需要，通过 display 属性实现块元素与行内元素之间的转换。display 的属性值及含义见表。display 的属性值及含义下面通过一个案例来进一步学习块元素和行内元素，代码如图所示。未使用元素的转换之前的代码应用在上图中，先使用 <span> 定义文本，然后对它们设置边框颜色属性，设置高度和宽度属性值。运行上图中的代码，效果如图所示。从图中可以看出，对 id 名为 span1 的 span标签设置的宽度和高度属性值与 id 名为 span2 的 span 标签未设置宽度和高度效果是一样的，那就说明 span1 设置的宽度和高度属性值是无用的，所以需要使用元素的转换。未使用元素的转换之前的效果接下来将 span 标签转换为块元素标签，看一看它的效果会如何变化。代码如图所示。使用元素的转换的代码应用在 id 名为 span1 的 span 标签里面加了“display:block;”，该属性值使 span 标签转换成块元素标签。保存 html 文件，刷新网页，效果如图所示。这时可以发现使用了元素转换属性的 span 标签的高度和宽度发生了改变。如果使用的是行内元素标签并且相对这个标签的宽、高属性进行设置的话，那么就要使用元素的转换属性，将它转换成块级元素。使用元素的转换的效果

展开更多......

收起↑