项目七 列表样式控制（课件）《电子商务网页设计与制作》（中国劳动保障出版社）

07 列表样式控制 389 389 任务 1 制作轮播图 任务 2 绘制 CSS 图形 390 项目七 列表样式控制 390 制作轮播图 任务 1 391 391 ● 掌握 transform 属性的设置。 392 项目七 列表样式控制 392 本任务将使用 transform 属性来实现轮播图及其指示器的定位，进而完成缤购乐食电子商务网站首页制作。完成效果如图所示。 393 缤购乐食电子商务网站首页效果 项目七 列表样式控制 393 394 步骤一： 将全部内容设为 div，取名为“ banner-nav”。盒子的宽度与浏览器同宽，设置为 100%，高度为 455 像素。盒子里面包含一个轮播图无序列表 ul，还包含一个居中显示的盒子 div，取名为“nav-center”。具体代码如图所示。 banner-nav 代码 项目七 列表样式控制 394 395 接下来将盒子放置在父元素正中间的位置，这其中使用了一个定位技巧，就是先通过 “ left:50%”把盒子定位到父元素的中间位置，然后再通过平移代码“ transform:translate（-50%）”将 .banner-nav 向相反的方向平移 50%，这样就可以让盒子居于父元素的正中间的位置。设置的 CSS 代码如图所示。 项目七 列表样式控制 395 396 CSS 代码 项目七 列表样式控制 396 397 运行上图中的代码，效果如图所示。 轮播区效果图 1 项目七 列表样式控制 397 398 步骤二： 在中间区域设置轮播图圆点指示器。这里设计 6 个圆点，一般情况下，一个元素默认占据一个长方形的空间。要想把这个元素变为圆形，首先这个元素必须是正方形，也就是宽度和高度要相等且为 10 像素。然后要设置一个属性 border-radius，当这个属性值大于或等于正方形边长的一半时，这个元素的形状就变成了圆形。具体代码如图所示。 项目七 列表样式控制 398 399 nav-center 代码 项目七 列表样式控制 399 400 设置的 CSS 代码如图所示。 CSS 代码 项目七 列表样式控制 400 401 在进行具体编码时，有三种方式可以表示颜色：一是用颜色的英文单词，如 white 表示白色；二是用十六进制，如 #FFFFFF 表示白色；三是用 RGB 表示法，如（255，255，255）表示白色。 项目七 列表样式控制 401 402 一、transform 属性 在 CSS 3 中，可以利用 transform 属性来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变化处理。transform 属性的基本语法格式如下。 项目七 列表样式控制 402 403 transform 的属性值∕函数及其说明见表。 transform 的属性值∕函数及其说明 项目七 列表样式控制 403 404 二、rotate（ ）函数 应用 transform 属性的 rotate（angle）函数可以实现 2D 旋转。参数 angle 用于指定旋转的角度，其值可取正或负。正值代表顺时针旋转，负值代表逆时针旋转。在使用该函数之前，可以应用 transform-origin（设置旋转元素的基点位置）属性定义变换的中心点。 项目七 列表样式控制 404 405 三、scale（ ）函数 应用 transform 属性的 scale（x，y）、scaleX（x）、scaleY（y）函数可以实现缩放。其中，scale（x，y）函数可以实现在 X 轴和 Y 轴上同时缩放，而后面的两个函数则用于单独实现在X 轴或者 Y 轴上缩放。当使用 scale（x，y）函数时，如果只指定一个参数，那么在 X 轴和 Y轴都缩放参数所指定的比例。 实现缩放的这三个函数的参数绝对值大于 1，代表放大；参数绝对值小于 1，代表缩小。当参数为负数时，对象反转。当参数为 1 时，表示不进行缩放。 项目七 列表样式控制 405 406 四、transform（ ）函数 应用 transform 属性的 translate（x，y）、translateX（x）和 translateY（y）函数可以实现2D 平移。其中，translate（x，y）函数可以实现在 X 轴和 Y 轴上同时平移，而后面的两个函数则用于单独实现在 X 轴或者 Y 轴上平移。如果将 translate（x，y）函数中的第一个参数设置为 0，那么可以实现 translateY（y）函数的效果；如果将第二个参数设置为 0，那么可以实现 translateX（x）函数的效果。 项目七 列表样式控制 406 407 实现平移的这三个函数的参数值都是像素值，可以是正值，也可以是负值。X 轴参数为正值时，代表向右移动；X 轴参数为负值时，代表向左移动。Y 轴参数为正值时，代表向下移动；Y 轴参数为负值时，代表向上移动。 项目七 列表样式控制 407 408 五、border-radius 属性 首先写一个 div，这个 div 默认占据的是一个长方形的区域，取名为“ circle”。在将它变为圆形之前要确保它首先是一个正方形，所以设置它的宽度和高度相同。然后将这个正方形变成圆形，将正方形变成圆形的关键在于 border-radius 属性值的大小，若此属性值大于或等于边长的一半，则该 div 将变成一个圆形形状；若此属性值小于边长的一半，则该 div 将变成一个椭圆形状。具体代码如图所示。 项目七 列表样式控制 408 409 用 border 制作圆形的代码 项目七 列表样式控制 409 绘制 CSS 图形 任务2 410 410 ● 掌握用 CSS 绘制图形的方法。 411 项目七 列表样式控制 411 在网页中，CSS 图形十分常见，各式各样的 CSS 图形可以使网页的交互更加美观，从而提高用户的体验满意度。那么，CSS 图形是如何制作出来的呢？本任务将重点学习 CSS图形的制作，并对其进行详细讲解，从而使读者达到在网页设计中灵活运用 CSS 图形的目的。下面将通过学习 CSS 图形绘制，并结合无序列表、盒子模型等知识点来继续完成缤购乐食电子商务网站首页的制作。制作完成的网页效果如图所示。 412 项目七 列表样式控制 412 413 缤购乐食电子商务网站首页 项目七 列表样式控制 413 414 缤购乐食电子商务网站首页 项目七 列表样式控制 414 415 缤购乐食电子商务网站首页 项目七 列表样式控制 415 416 步骤一： 在本项目任务 1 中已经完成了首页网页的轮播图效果，接下来完成首页中剩下的部分。根据对网页的分析，左侧导航栏中每一项包含三项内容：一张图片、一段文字和一个右箭头。这里用 ul 无序列表来进行布局，每个列表项包含以上三项内容。导航菜单一共有 10 个菜单项，插入 10 对 li 标签与之对应。具体代码如图所示。 项目七 列表样式控制 416 417 导航菜单结构布局 项目七 列表样式控制 417 418 导航菜单结构布局 项目七 列表样式控制 418 419 这里将 ul 的宽度设置为 148 像素，每一个 li 的高度设置为 46 像素。每一个 li 列表项设置下边框线，以达到与背景色形成对比效果的目的。具体 CSS 代码如图所示。 无序列表样式设置 项目七 列表样式控制 419 420 无序列表样式设置 项目七 列表样式控制 420 421 制作左侧导航栏后的网页效果如图所示。 制作左侧导航栏后的网页效果 项目七 列表样式控制 421 422 步骤二： 接着要通过 CSS 代码把图片、文字、箭头设置为垂直方向居中，水平方向对齐，并且使颜色搭配美观。通过使用伪类，当光标悬停在某一项上的时候，背景变为白色，文字变为深色。具体 CSS 代码如图所示。 用 CSS 代码设置图片、文字、箭头及伪类 项目七 列表样式控制 422 423 用 CSS 代码设置图片、文字、箭头及伪类 项目七 列表样式控制 423 424 步骤三： 下面制作网页中的今日推荐部分。使用 div 盒子模型布局，一个大盒子里面包含四个小盒子，每个小盒子包含对应的图文内容。具体代码如图所示。 设置左侧导航栏格式后的网页效果 项目七 列表样式控制 424 425 今日推荐区部分网页结构布局 项目七 列表样式控制 425 426 今日推荐区部分网页结构布局 项目七 列表样式控制 426 427 步骤四： 为今日推荐部分的网页元素设置 CSS 代码。在 html 代码中，大盒子取名为“recommen-dation”，宽度为 1 000 像素。它里面包含的四个小盒子宽度均分，即每个小盒子宽度都为 250像素，且每个小盒子里面都包含一张图片和一段文字信息。这里需要注意，在为每个小盒子里面的元素做绝对定位时，一定不要忘记为它的父元素设置相对定位属性，这样子元素的绝对定位值才是相对于父元素的值。用 CSS 设置今日推荐部分样式的代码如图所示。 项目七 列表样式控制 427 428 用 CSS 设置今日推荐部分样式的代码 项目七 列表样式控制 428 429 用 CSS 设置今日推荐部分样式的代码 项目七 列表样式控制 429 430 用 CSS 设置今日推荐部分样式的代码 项目七 列表样式控制 430 431 步骤五： 下面制作网页中活动区的部分。一个大盒子 div 中包含上下两个子盒子，上面的子盒子只包含文字信息，下面的子盒子又包含四个小盒子，每一个小盒子的宽度为 250 像素。每一个小盒子里面有三个更小的盒子，更小的盒子里包含具体的文字和图片信息。具体代码如图所示。 活动区部分网页结构布局 项目七 列表样式控制 431 432 活动区部分网页结构布局 项目七 列表样式控制 432 433 活动区部分网页结构布局 项目七 列表样式控制 433 434 步骤六： 接着为活动区的网页元素设置 CSS 代码。最大的盒子命名为“ activity”，上面的子盒子命名为“shopTitle”，下面的子盒子命名为“am-g”，下面的子盒子包含的四个小盒子都命名为“am-u-sm-3”。具体 CSS 代码如图所示。 用 CSS 设置活动区网页元素样式的代码 项目七 列表样式控制 434 435 用 CSS 设置活动区网页元素样式的代码 项目七 列表样式控制 435 436 用 CSS 设置活动区网页元素样式的代码 项目七 列表样式控制 436 437 用 CSS 设置活动区网页元素样式的代码 项目七 列表样式控制 437 438 用 CSS 设置活动区网页元素样式的代码 项目七 列表样式控制 438 439 运行上图中的代码，活动区网页效果如图所示。 活动区网页效果 项目七 列表样式控制 439 440 步骤七： 制作商品展示区甜品层。甜品层分为上下两个盒子，下面的盒子中又包含五个子盒子。其中最左侧的图文盒子的样式设置较其他四个图文盒子风格不同，需要单独设置样式。右边的四组图文盒子风格一致，可以一起设置样式。具体代码如图所示。 甜品层网页结构布局 项目七 列表样式控制 440 441 甜品层网页结构布局 项目七 列表样式控制 441 442 甜品层网页结构布局 项目七 列表样式控制 442 443 甜品层网页结构布局 项目七 列表样式控制 443 444 甜品层网页结构布局 项目七 列表样式控制 444 445 甜品层网页结构布局 项目七 列表样式控制 445 446 步骤八： 接着为甜品层设置 CSS 代码。最左侧的图文盒子用到了 CSS 圆形技巧和折角技巧。具体 CSS 代码设置如图所示。 用 CSS 设置商品展示区甜品层样式的代码 项目七 列表样式控制 446 447 用 CSS 设置商品展示区甜品层样式的代码 项目七 列表样式控制 447 448 用 CSS 设置商品展示区甜品层样式的代码 项目七 列表样式控制 448 449 用 CSS 设置商品展示区甜品层样式的代码 项目七 列表样式控制 449 450 用 CSS 设置商品展示区甜品层样式的代码 项目七 列表样式控制 450 451 用 CSS 设置商品展示区甜品层样式的代码 项目七 列表样式控制 451 452 用 CSS 设置商品展示区甜品层样式的代码 项目七 列表样式控制 452 453 运行上图中的代码，网页效果如图所示。 商品展示区甜品层网页效果 项目七 列表样式控制 453 454 步骤九： 商品展示区甜品层下面是坚果层，坚果层的文字和图片风格与甜品层风格一致，只是文字内容和颜色选择有一些变化，所以坚果层的样式设置与甜品层可共用。具体代码如图所示。 项目七 列表样式控制 454 455 商品展示区坚果层网页结构布局 项目七 列表样式控制 455 456 商品展示区坚果层网页结构布局 项目七 列表样式控制 456 457 商品展示区坚果层网页结构布局 项目七 列表样式控制 457 458 商品展示区坚果层网页结构布局 项目七 列表样式控制 458 459 商品展示区坚果层网页结构布局 项目七 列表样式控制 459 460 商品展示区坚果层网页结构布局 项目七 列表样式控制 460 461 坚果层与甜品层的样式完全一样，只是背景颜色有所区别，所以这里 CSS 的代码只需要设置颜色的变化即可。具体设置如图所示。 用 CSS 设置商品展示区坚果层样式的代码 项目七 列表样式控制 461 462 运行上图中的代码，网页效果如图所示。 商品展示区坚果层网页效果 项目七 列表样式控制 462 463 商品展示区坚果层网页效果 项目七 列表样式控制 463 464 商品展示区坚果层网页效果 项目七 列表样式控制 464 465 步骤十： 把“ border:1px solid blue;”和“ border:1px solid red;”这种帮助看盒子区域大小和位置的红蓝框线的代码去掉，并把之前在注册和登录网页制作的 footer 部分（即网页底部部分）代码添加到首页中来，最终电子商务网站首页的完整效果如图所示。 项目七 列表样式控制 465 466 缤购乐食电子商务网站首页 项目七 列表样式控制 466 467 缤购乐食电子商务网站首页 项目七 列表样式控制 467 468 缤购乐食电子商务网站首页 项目七 列表样式控制 468 469 一、使用 border 制作三角形 三角形属于常见的几何图形，在网页设计中应用较为广泛。在实际应用中，除了采用图片来实现前端图像展示外，纯 CSS 代码也可以实现图像的绘制。这里使用 CSS 中的 border属性来绘制三角形。用 border 属性绘制三角形是“一门传统手艺”。由于浏览器对该属性的支持性很好，几乎没有兼容性问题，主流的三角形绘制方案一般都基于 border 属性来实现。 项目七 列表样式控制 469 470 用 border 制作三角形的代码 下面通过图 详细讲解如何使用 border 制作三角形。 项目七 列表样式控制 470 471 三角形效果 运行上图中的代码，效果如图所示。 项目七 列表样式控制 471 472 二、使用 border 制作折叠三角形 这里用一个案例来演示如何使用 border 制作一个折叠三角形。先在 body 里面写一个div，并设置 id 的属性值为“triangle2”，具体语法格式如下。 项目七 列表样式控制 472 473 用 border 制作折叠三角形的代码 具体代码如图所示。 项目七 列表样式控制 473 474 用 border 制作折叠三角形的代码 项目七 列表样式控制 474 475 折叠三角形效果 运行上图中的代码，效果如图所示。 项目七 列表样式控制 475 476 三、使用 border-radius 制作圆形 首先写一个 div，这个 div 默认占据的是一个长方形的区域，取名为“ circle”。在把它变为圆形之前要确保它是一个正方形，所以设置它的宽度和高度相同。然后将这个正方形变成圆形，将正方形变成圆形的关键在于 border-radius 属性值的大小，若此属性值大于或等于边长的一半，则该 div 将变成一个圆形形状；若此属性值小于边长的一半，则该 div 将变成一个椭圆形状。具体代码如图所示。 项目七 列表样式控制 476 477 用 border 制作圆形的代码 项目七 列表样式控制 477 478 圆形效果 运行上图中的代码，效果如图所示。 项目七 列表样式控制 478 $$