资源简介

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

展开更多......

收起↑