资源简介

(共70张PPT)
08页面文字样式控制任务 1 制作网页背景图任务 2 设置网页文本显示样式制作网页背景图任务 1● 1. 掌握网页背景图像的设置。● 2. 掌握文本装饰属性的设置。一般而言，网页可通过背景图像给用户留下深刻的印象，如节日题材的网站一般会采用喜庆祥和的图像来突出节日氛围，所以在网页设计中合理地运用背景颜色以及背景图像至关重要。本任务主要通过使用 CSS 设置网页背景图像及运用文本装饰属性，再结合盒子模型来制作缤购乐食电子商务网站商品详情网页。最终网页完成效果如图所示。缤购乐食电子商务网站商品详情页面步骤一：引入网页的公共部分，它包含两个部分，分别为网页上方的搜索导航部分以及网页下方的页底部分，如图所示。网页公共部分效果图步骤二：设计并制作“网页位置信息”和“商品详情信息”左侧的图片区。主盒子的宽度仍然是1 000 像素，居于网页中间位置。“网页位置信息”区使用一个 ul 无序列表标签来实现，每个列表项包含一段位置描述文字，该区横向排列；“商品详情信息”区左侧包含一张大商品图和三张小商品图，三张小商品图也使用 ul 无序列表标签来实现，每个列表项包含一张小图，该区也横向排列。此时网页结构具体代码如图所示。“网页位置信息”和“商品详细信息”左侧图片区结构布局“ :: after”为尾部伪类选择器，它的作用是在标签后面添加内容。用 CSS 设置“网页位置信息”样式的代码用 CSS 设置“商品详细信息”左侧图片样式的代码运行上图中的代码，效果如图所示。制作完“网页位置信息”和“商品详细信息”左侧图片区的网页效果步骤三：设计并制作“商品详情信息”右侧的商品价格部分。其主要结构是盒子模型，大盒子代表一行，小盒子包含一行中不同的文字内容。具体代码如图所示。商品价格区结构布局商品价格区结构布局商品价格区结构布局“点击领券”指示箭头的图标为 16 像素宽、16 像素高，图片设置为 8 像素宽、8 像素高，这里需要对 background-size 进行设置，让图片能够根据设置空间给予的宽度和高度进行适应性缩放，设置 background-size 属性为“background-size:100% 100%；”。用 CSS 设置商品价格区样式的代码，如图所示。用 CSS 设置商品价格区样式的代码用 CSS 设置商品价格区样式的代码用 CSS 设置商品价格区样式的代码运行上图所示代码，效果如图所示。制作完商品价格区的网页效果步骤四：制作地址选择区和销量信息区。地址选择区和销量信息区结构布局地址选择区和销量信息区结构布局用 CSS 设置地址选择区和销量信息区样式的代码，如图所示。用 CSS 设置地址选择区和销量信息区样式的代码用 CSS 设置地址选择区和销量信息区样式的代码运行上图中的代码，效果如图所示。制作完地址选择区和销量信息区的网页效果步骤五：制作口味、包装和数量选择区。口味和包装区均使用 ul 无序列表实现，数量选择区主要使用 input 表单控件来实现。具体代码如图所示。口味、包装和数量选择区结构布局口味、包装和数量选择区结构布局口味和包装的选项选中状态使用类选择器“ .selected”来设置，选中状态时会出现一个红色对勾，此对勾实为一张三角形图片，使用绝对定位将其定位到选项的右下角。用 CSS设置口味、包装和数量选择区样式的代码如图所示。用 CSS 设置口味、包装和数量选择区样式的代码用 CSS 设置口味、包装和数量选择区样式的代码用 CSS 设置口味、包装和数量选择区样式的代码运行代码，效果如图所示。制作完成口味、包装和数量选择区的网页效果步骤六：制作“立即购买”和“加入购物车”按钮，两个按钮均使用超链接 a 标签来实现，具体代码如图所示。制作“立即购买”和“加入购物车”按钮的代码用 CSS 代码设置两个按钮样式，如图所示。用 CSS 设置“立即购买”和“加入购物车”按钮样式的代码用 CSS 设置“立即购买”和“加入购物车”按钮样式的代码运行代码，效果如图所示。“立即购买”和“加入购物车”按钮效果步骤七：制作优惠套装区。基本思路还是使用无序列表 ul，每个 li 列表项向左浮动来设置优惠套装区的布局。具体代码如图所示。优惠套装区结构布局优惠套装区结构布局此处需要注意应清除浮动，消除商品详情区代码产生的影响，清除浮动使用的代码是“clear:both;”。用 CSS 设置优惠套装区样式的代码如图所示。用 CSS 优惠套装样式的代码用 CSS 优惠套装样式的代码用 CSS 优惠套装样式的代码用 CSS 优惠套装样式的代码用 CSS 优惠套装样式的代码一、background-position 属性的设置background-position 属性的默认值为“0 0”或“ top left”，即背景图像位于元素的左上角。background-position 属性的取值有多种，具体情况如下。1. 使用不同单位（最常用的是像素 px）的数值：直接设置图像左上角在元素中的坐标。2. 使用预定义的关键字：指定背景图像在元素中的对齐方式。水平方向值：left、center、right。垂直方向值：top、center、bottom。两个关键字的顺序任意，若只有一个值，则另一个值默认为 center。例如，center 相当于 center center（居中显示），top 相当于 top center 或 center top（水平居中且上对齐）。3. 使用百分比：按背景图像和元素的指定点对齐。0% 0%：图像左上角与元素左上角对齐。50% 50%：图像 50% 50% 的中心点与元素 50% 50% 的中心点对齐。20% 30%：图像 20% 30% 的点与元素 20% 30% 的点对齐。100% 100%：图像右下角与元素右下角对齐，而不是图像充满元素。如果只有一个百分数，将作为水平值，垂直值则默认为 50%。二、text-decoration 属性的设置text-decoration 属性用于设置文本的下画线、上画线、删除线等装饰效果，其可用属性值如下。1. none：没有装饰（正常文本默认值）。2. underline：下画线。3. overline：上画线。4. line-through：删除线。text-decoration 后可以赋多个值，用于给文本添加多种显示效果。下面通过案例讲解利用 text-decoration 属性设置下画线，代码如图所示。text-decoration.html在上图所示代码中定义了四个段落，使用 text-decoration 属性分别对四个段落进行相应的设置。运行上图中的代码，效果如图所示。文本装饰效果设置网页文本显示样式任务2● 掌握 CSS 文本属性的设置。通过前面任务的学习，可以使用 CSS 设置文本的显示样式，从而让网页布局更加美观。本任务主要通过使用 CSS 代码设置文本相关属性的样式来美化缤购乐食电子商务网站商品详情网页。最终网页效果如图所示。缤购乐食电子商务网站商品详情网页缤购乐食电子商务网站商品详情网页步骤一：制作商品介绍区左侧其他商品推荐部分，此部分宽度为 200 像素，使用 ul 无序列表来实现，每个 li 列表项内放置一件商品的图文信息。具体代码如图所示。其他商品推荐区结构布局其他商品推荐区结构布局其他商品推荐区结构布局其他商品推荐区结构布局其他商品推荐区样式代码如图所示。图中的 font-weight 属性用数值来设置，数值越大则字体越粗，用数值来控制的优点是可以更精准地控制字体的粗细。用 CSS 设置其他商品推荐区样式的代码运行代码，效果如图所示。其他商品推荐区网页效果步骤二：制作商品详情介绍区部分。此部分的宽度为 800 像素，使用 ul 无序列表嵌套来进行布局。具体代码如图所示。商品详情介绍区结构布局商品详情介绍区结构布局商品详情介绍区结构布局此处使用了将一行均分为三个相同宽度部分的技巧，即设置每个部分的 width 值为33%。还需要注意的是，这里使用了子代选择器，它的连接符号是“ >”，符号后面的选择器是符号前面选择器的直接下级。用 CSS 设置商品详情介绍区样式的代码如图所示。用 CSS 设置商品详情介绍区样式的代码用 CSS 设置商品详情介绍区样式的代码用 CSS 设置商品详情介绍区样式的代码一、text-indent 属性的设置text-indent 属性用于设置首行文本的缩进，其属性值可为不同单位的数值。em 表示字符宽度的倍数或相对于浏览器窗口宽度的百分比，允许使用负值。建议使用 em 作为该属性的设置单位。首行缩进 .html下面来学习 text-indent 属性的使用，如图所示。首行缩进 .html首行缩进效果在上图中，第一段文本没有设置首行缩进效果，第二段文本使用了“ text-indent：2em;”设置首行文本缩进两个字符，第三段文本使用“ text-indent:50px;”设置首行文本缩进50 像素。运行上图中的代码，效果如图所示。通过图可以看出，text-indent 属性可以设置文本不同单位量的首行缩进效果。二、white-space 属性的设置使用 html 制作网页时，不论源代码中有多少空格，在浏览器中只会显示一个字符的空白。在 CSS 中，使用 white-space 属性可设置空白符的处理方式，其属性值如下。1. normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。2. pre：预格式化，按文档的书写格式保留空格，空行原样显示。3. nowrap：空格、空行无效，强制文本不能换行，遇到换行 <br/> 内容超出元素的边界也不换行，若超出浏览器网页则会自动增加滚动条。三、text-overflow 属性的设置text-over ow 属性用来设置当文本溢出时应当采取的样式，其属性值如下。1. clip：直接裁剪掉溢出的文本内容。2. ellipsis：用省略号来代表溢出的文本内容。

展开更多......

收起↑