CSS第三单元投影片(MODULE 3)
CSSModule用法总结
CSSModule⽤法总结什么是CSS Modules?官⽅解释是：可以理解为：所有的类名和动画名称默认都有各⾃的作⽤域的css⽂件。
通俗点来说是，每个class类是独⽴的可以被单独的按照某种规则编译为独⼀⽆⼆的域名，或者你也可以理解为，每个class都有⾃⼰的scope。
css作⽤域⽬前css作⽤域有三种⽅案1.css modules2.css in js3.BEM +scope其中1、3的区别如下1. 只要是靠⼈去保证代码质量总是不靠谱的，⼈的状态有起伏，但是机器没有，因此推荐⽤机器去解决这些问题。
这个是BEM+scope⽐较⽋缺的2. 需要注意css穿透，如果要改⼀些第三⽅的东西（当然写起来也⽐较简单），具体的可以了解下样式穿透3. BEM写起来很繁琐，⽽且是靠⼈去解决重名的问题。
那么cssModule解决了什么问题？1.变量全局污染问题css scope也能解决这个问题，但是解决问题的思路不⼀样，scope解决全局样式污染的问题的解决办法是通过，scope来限制⼦作⽤域对⽗作⽤域（也可以是全局作⽤域）的污染css module解决办法是通过:local(.text){color:red}:local函数来解决这个问题：global(.class){}:global能在⼦页⾯内写全局变量（我们在修改第三⽅库的时候通常会使⽤这个函数）2.对⽐BEM,BEM相对繁琐，⽽CSS Modulex相对灵活胜出原因： 1.BEM的解决办法是通过⼈来保证css的唯⼀性，CSS Module是通过webpack的打包机制类解决这个问题。
打包代码之前<h1 class="test">An example heading</h1> 打包代码之后<h1 class="_styles__test_309571057">An example heading</h1> 2.灵活，并且不同css⽂件内即使相同的class也不会互相影响 举个栗⼦import real from './real.css'import fake from './fake.css'element.innerHTML = `<div class="${buttons.red} ${rge}">`; 本质上，这种引⼊两个⽂件夹的写法是完全可以的，但是有些时候这种形式的代码复⽤是很实⽤的，还有⼀个不经常⽤的写法.element {composes: dark-red from "./colors.css";font-size: 30px;line-height: 1.2;} 借助CSS Module的compose，来解决这个事情。
CSS3中box-shadow属性(投影效果)
1. box-shadow属性的浏览器兼容性先来看一个这个属性的浏览器兼容性:Opera: 不知道是从哪个版本开始支持的，我在发这篇文章测试的时候，正好更新了O pera到最新的10.53版本，已经支持box-sh ado w属性。
firefox通过私有属性-mo z-box-shadow支持。
Safar i和Chro me通过私有属性-webkit-box-shadow支持。
所有I E不支持(不知道I E9是否有所改善)。
别急，我们将在文章最后会介绍一些针对I E的Ha ck。
2. box-shadow属性的语法box-sha dow有六个可设值:img{box-shadow:阴影类型 X轴位移 Y轴位移阴影大小阴影扩展阴影颜色}当不设阴影类型时，默认为投影效果。
当设为inset时，为内阴影效果。
X轴和Y轴位移不等同但类似于phot osho p里面的”角度”和”位置。
阴影大小、扩展、颜色和Phot osh op里面的都同理。
img { -moz-box-shadow:2px 2px 10px #06C; -webkit-box-shadow:2px 2px 10px #06C; box-shadow:2px 2px 10px #06C; } (1). 投影，没有位移，10px的阴影大小，没有扩展，颜色#06Cimg{box-shadow:0 0 10px #06C;}这里的颜色值是HEX值，我们还可以使用RGBA值，RGBA值的好处是，它多了一个Alp ha透明值，你可以控制阴影的透明度。
img{box-shadow: 0 0 10px rgba(0, 255, 0, .5)}(2). 在上面的基础上加上20p x的扩展img{box-shadow:0 0 10px 20px #06C;}(3). 内阴影，无位移，10px大小，没有扩展，颜色#06Cimg{box-shadow:inset 0 0 10px #06C;}(4). 多重阴影效果box-sha dow可以同时使用多次，我们来个四色的阴影。
css3所有知识点
css3所有知识点CSS3是层叠样式表（Cascading Style Sheets）的最新版本，它为网页设计师提供了更多的样式选项和功能。
本文将介绍CSS3的各个知识点，并从人类的视角出发，以生动的方式描述其特性和用法。
一、选择器选择器是CSS3中的基本概念之一，它用于指定要应用样式的HTML 元素。
常用的选择器有标签选择器、类选择器和ID选择器等。
通过选择器，我们可以轻松地为特定的元素添加样式，使其在页面中展示出独特的风格。
二、盒模型盒模型是CSS3中的重要概念，它用于定义元素的尺寸和边距。
每个HTML元素都可以被看作是一个矩形的盒子，其中包含内容、内边距、边框和外边距。
通过盒模型，我们可以精确控制元素的大小和位置，使页面布局更加灵活和美观。
三、背景和边框CSS3提供了丰富的背景和边框样式选项，使我们可以为元素添加各种视觉效果。
例如，我们可以设置背景图片、背景颜色和背景渐变，以及调整边框的样式、宽度和圆角等。
通过这些属性，我们可以为页面元素增添各种细节和装饰，使其更加吸引人。
四、文本样式CSS3提供了多种文本样式选项，使我们可以调整字体、字号、颜色和对齐方式等。
此外，我们还可以使用文字阴影、文字溢出和文字换行等属性，来增强文本的可读性和美观性。
通过这些样式，我们可以打造出独特的文本效果，使页面内容更加生动有趣。
五、过渡和动画过渡和动画是CSS3中令人兴奋的特性之一，它们可以为元素添加平滑的过渡效果和生动的动画效果。
通过设置过渡属性和动画属性，我们可以控制元素的变化过程，并实现各种炫酷的效果。
这些特性不仅能够提升用户体验，还可以为页面增添活力和趣味性。
六、媒体查询媒体查询是CSS3中的重要特性，它允许我们根据设备的特性和屏幕尺寸来应用不同的样式。
通过媒体查询，我们可以为不同的设备提供最佳的用户体验，使页面在不同的屏幕上呈现出最佳的布局和样式。
这为响应式设计提供了强大的支持，使页面能够适应不同的设备和浏览器。
20
2. CSS 3D云 在这个示例应用里，你可以搞出一些逼真的云彩。它的存在提示你网页设计可以提供的无限可能。 示例代码略微有些复杂，不仅使用了CSS3 3D 变形，还使用了JavaScript 。这里是对象的高级教程 ：
3. 纯CSS LO GO 有一些知名公司的logo 是完全由CSS写成的。这个例子的帅气之处是你可以把鼠标悬停在上面去查 看究竟是哪个CSS属性构成了这个图像，你也可以在 github 上查看完整的代码。
10. Flexbox的完整指南 这是一个深入介绍“flex”容器或以此为名的flexbox的文章。Flexbox是CSS中新近引入的页面布局 方式。它是一种令元素宽高及对齐方式都自动适应空间的布局方式。
接下文>>20个实用便捷的CSS3工具、库及实例(下) 本文来源：优设网 人人都是产品经理（）中国最大最活跃的产品经理学习、交流、分享平台
20个实用便捷的CSS3 工具、库及实例(上)
在本列表中，。我们从多位艺术家那里搜集了惊人的例子，足以证明使用CSS，一切皆有 可能。我们还收集了一些关于CSS 3的不可思议新功能的文章，以及一些有用的CSS库。接 下来的内容会让你目不转睛，所以让我们开始吧！ 不可思议的CSS 3新功能： 为了充分感受这些例子你需要最新的浏览器，比如Chrome。 1. 模糊菜单 这是一个非常漂亮的仅使用CSS的菜单。实际上它有7个示例！它们都是用了新的CSS 3 transition 功能，另外还巧妙地使用选择器创建圆滑的模糊效果。你可以在 阅读代码以了 解更多。
4. CSS A/Z 自备梯子。 这是另外一个艺术化的CSS。在这些缩略图海报，字母被描绘成美好的动画，涌出生命。
5. Jan Kaděra的导航条
简单但非常时尚的导航。它的CSS代码只有65行，但是你看，它看上去给人感觉太神奇了。新 的CSS 3功能变换和过渡都用于创建景深效果。
css3 手册所有
css3 手册所有一、引言CSS（层叠样式表）是一种用于描述文档样式的标记语言，具体包括字体、颜色、布局等方面的样式定义。
CSS3是CSS的最新版本，是Web开发中常用的样式定义语言之一。
本手册将详细介绍CSS3的各项属性及其使用方法。
二、选择器1. 元素选择器元素选择器是CSS中最常用的选择器之一，通过元素名称来选择文档中的元素。
例如，使用`p`选择器可以选择所有的`<p>`标签。
2. 类选择器类选择器用于选择带有特定类名的元素。
通过在类名前面加上点号（.），例如`.red`，可以选择具有`red`类的元素。
3. ID选择器ID选择器用于选择具有特定ID的元素。
通过在ID名称前面加上井号（#），例如`#header`，可以选择具有`header`的ID的元素。
4. 属性选择器属性选择器用于选择具有特定属性值的元素。
通过在属性名前加上方括号（[]），例如`[type="text"]`，可以选择type属性值为"text"的元素。
5. 伪类选择器伪类选择器用于选择元素的特殊状态。
常见的伪类选择器有`hover`、`active`和`visited`等。
6. 伪元素选择器伪元素选择器用于在文档中添加不存在的元素并为其添加样式。
常见的伪元素选择器有`::before`和`::after`等。
三、文本样式1. 字体可以使用`font-family`属性设置元素的字体。
例如，`font-family: Arial, sans-serif;`可以设置字体为Arial。
2. 颜色可以使用`color`属性设置元素的文本颜色。
例如，`color: red;`可以将文本颜色设置为红色。
3. 背景可以使用`background-color`属性设置元素的背景颜色。
例如，`background-color: #f1f1f1;`可以将背景颜色设置为浅灰色。
四、盒子模型1. 尺寸可以使用`width`和`height`属性设置元素的宽度和高度。
css3中的三种动画样式用法
css3中的三种动画样式用法一、CSS3动画概述CSS3提供了强大的动画功能，使开发者能够轻松创建动态、富有动感的网页效果。
CSS3动画主要包括三种样式：关键帧动画、转换和过渡。
二、关键帧动画关键帧动画是使用@keyframes规则创建的动画。
@keyframes规则用于创建一个动画名称和一个或多个关键帧，描述了动画开始和结束时的状态。
在关键帧之间，元素的状态可以改变。
示例：```css@keyframes myAnimation {0% {background-color: red;}50% {background-color: blue;}100% {background-color: green;}}div {animation-name: myAnimation;animation-duration: 4s;}```在上述代码中，div元素的颜色在动画的4秒内从红色变为蓝色，再变为绿色。
animation属性定义了要使用的动画名称、持续时间和其他属性。
三、转换动画CSS3的转换属性允许开发者将元素变形为不同的形状和大小。
转换动画允许元素在一段时间内从一个状态转换到另一个状态。
示例：```cssdiv {transition: transform 2s; /* 2秒内转换属性变化 */}div:hover {transform: rotate(360deg); /* 鼠标悬停时旋转元素 */}```在上述代码中，当鼠标悬停在div元素上时，元素会在2秒内旋转360度。
transition属性定义了动画的持续时间和其他过渡效果。
四、过渡动画过渡动画是使用transition属性创建的动画。
transition属性允许元素从一个状态平滑过渡到另一个状态。
过渡动画通常用于改变元素的尺寸、颜色等属性。
示例：```cssdiv {width: 100px; height: 100px; background-color: red;transition: all 2s; /* 2秒内改变所有属性 */}div:hover {width: 200px; height: 200px; background-color: blue; /* 鼠标悬停时改变尺寸和背景色 */}```在上述代码中，当鼠标悬停在div元素上时，元素会在2秒内从原始尺寸变为2倍大的尺寸，并且背景色也会从红色变为蓝色。
css3知识点总结
css3知识点总结CSS3是层叠样式表（Cascading Style Sheets）的第三个主要版本，它在前两个版本的基础上增加了许多新特性和功能。
CSS3的引入使得前端开发变得更加灵活和强大，同时也给设计师和开发者带来了更多的可能性。
在本文中，我将对CSS3的主要知识点进行总结，包括新的选择器、盒模型、文本样式、背景和渐变、过渡和动画、多列布局、媒体查询等方面的内容。
1. 新的选择器CSS3引入了一些新的选择器，使得选择元素更加灵活和方便。
其中包括属性选择器、伪类选择器和伪元素选择器。
属性选择器可以根据元素的属性值来选择元素，常见的属性选择器包括：[attr]、[attr=value]、[attr~=value]、[attr|=value]、[attr^=value]、[attr$=value]、[attr*=value]等。
伪类选择器可以根据元素的状态来选择元素，包括：:hover、:active、:visited、:focus、:first-child、:last-child等。
伪元素选择器用于创建虚拟的元素，常见的伪元素选择器包括：::before、::after、::first-letter、::first-line等。
2. 盒模型CSS3对盒模型进行了一些改进，可以使用box-sizing属性来控制盒模型的尺寸计算方式，包括：content-box、border-box和padding-box。
3. 文本样式CSS3引入了一些新的文本样式属性，包括：text-shadow、text-overflow、word-wrap、word-break、white-space、direction、text-orientation等。
4. 背景和渐变CSS3允许使用多背景图像和背景定位，可以通过background-size属性来控制背景图像的尺寸。
同时，CSS3还引入了线性渐变和径向渐变，可以通过background-image属性来实现。
css3背景，蒙版，倒影以及过度
css3背景，蒙版，倒影以及过度⼀、背景 background1.回顾background-colorpositionimagerepeat 动态显⽰⼤⼩sizeattachment: fixed;2.background-origin && background-clipbackground-origin :背景起源属性content-box：盒⼦内容，如果有这个属性，那么盒⼦的背景从内容开始渲染，如果没有，默认从盒⼦右上⾓开始渲染padding-box:图⽚完整的哪⼀张是从盒⼦左上⾓开始起源注意：盒⼦的padding区域永远有背景background-clip：背景剪裁content-box：padding区域的背景被剪裁掉padding-box；默认，padding区域有背景3.background-size改变背景尺⼨ ie9开始兼容background-size：100px 100px；将背景图⽚变为100X100的⼤⼩如果背景图不是正⽅形的，则会变形background-size：100px auto；图⽚不变形的情况下，宽度变为100，⾼度按⽐例⾃适应，宽完全可以显⽰完，⾼有可能显⽰⼀部分background-size：cover；图⽚不变形的情况下，尽可能多的显⽰内容，根据图⽚的宽⾼笔记和盒⼦的宽⾼⽐例，如果两个⽐例不相同，会出现两种情况 :显⽰不完整，显⽰完整background-size:contain;图⽚不变形，按照div短边长度压缩，图⽚⼀定能展⽰完整，但是有可能会留⽩4.多背景⼀个盒⼦可以设置多个背景图⽚。
ie9开始兼容background：url() no-repeat,url() no-repeat,url() no-repeat-x,......;背景会按照书写顺序进⾏覆盖，第⼀个是最上边的，background-size：auto auto，100px 200px, 200px 300px,......;⼆、蒙版可以使⽤图⽚或者渐变作为遮罩层语法：-webkit-mask-image:url();-webkit-mask-repeat:no-repeat;-webkit-mask-position:center center;综合：-webkit-mask:url() no-repeat center center;注意：⽬前⾄于 -webkit-的内容⽀持该⽅法三、倒影语法：-webkit-box-reflect:right 0px;参数1：倒影的位置，above below left right参数2：倒影的距离，2px，倒影与真实图⽚之间的距离倒影加渐变-webkit-box-reflect:right 0px -webkit-linear-gradient(top,red,blue);四、过渡 transition过渡：元素从⼀个状态转变为另⼀个状态的过程叫做过渡，是⼀个动画的转变过程，过渡需要时间，不是瞬间完成。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Pre Interview Basic Sales Agenda 面谈前基本销售计划
Purpose 目的 How Used 如何使用 Agents create individually-not to be shared with others-a real life Pre-Interview form on one of their prospects 业务员独自研拟针对一位准主顾的面谈前销售 计划，不和他人分享
Module Three-Fact Finding 第三单元-发现事实
Fact Finding Questions 发现事实的问题 Feeling Finding Questions 发现感觉的问题 Types of Listening 倾听的类型
1
Fact Finding Questions 发现事实问题
Examples 举例 Purpose of this type of questions 这种类型问题的目的
2
Feeling Finding Questions 发现感觉的问题
Definition 定义 Purpose of this type of question 此种类型问题的目的 Open vs Closed Questions Responsive-examples 回应式倾听举例 Empathetic-examples 倾情投入式倾听 Selective-examples 选择式倾听
4
Agents’ Interviews 业务员相互面谈
Based on pre-class material 基于课前作业 Primary purpose of interview to uncover partner’s reason for joing Ping An both factually and emotionally 面谈的主要目的是找出同伴加入平安的事实上和情感 上的原因 Your goal is to uncover three or four characteristics of your partner ( hobby, reason for marrying or staying single, etc) 你的目的是找出你的同伴的三至四个特点（爱好、结 婚或单身的原因等）
6