项目5 CSS3高级篇学习_第1页
项目5 CSS3高级篇学习_第2页
项目5 CSS3高级篇学习_第3页
项目5 CSS3高级篇学习_第4页
项目5 CSS3高级篇学习_第5页
已阅读5页，还剩57页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目五CSS3高级篇学习掌握CSS3高级选择器的使用掌握CSS3高级特效的使用掌握导航的制作学习目标Contents目录CSS3高级选择器的使用任务1CSS3高级特效的使用任务2导航制作任务3HTML3.2任务1CSS3高级选择器的使用使用高级选择选择器可以方便的定位于指定的元素，而不用使用额外的class或id，通过这种方式也可以让我们的代码和样式更加简洁、灵活、易控制。易控制灵活简洁层次选择器01属性选择器02任务1CSS3高级选择器的使用结构伪类选择器03任务1CSS3高级选择器的使用1.层次选择器选择器类型功能示例EF后代选择器E元素的后代元素Fpstrong{color:blue}表示P元素后的strong元素变成蓝色E>F子代选择器E元素的第一个子元素，必须是第一个子元素p>strong{background:green}表示p元素的第一个元素strong背景色为绿色E+F相邻兄弟选择器E元素的相邻兄弟F，并且F紧跟着E元素H2+p{background-color:lightblue}表示H2元素后面同级相邻元素p的背景元素为浅蓝色E~F普通兄弟选择器E元素的普通兄弟F，F元素不必紧跟着E元素H2~P{font-family:微软雅黑；font-size:30px}表示H2元素后面同级元素p的字体为微软雅黑，字的大小为30像素<!doctypehtml><html><head><metacharset="utf-8"><title>后代选择器和子代选择器</title><styletype="text/css"> pstrong{color:blue;}/*p的后代元素字体全部为蓝色，因此第一个子元素、第二个子元素、第三个子元素字体均为蓝色*/P>strong{background:green;}/*p的第一个子元素背景为绿色，因此只有"第一个子元素"背景为绿色*/</style></head><body><p>p的后代元素<strong>第一个子元素</strong><s><strong>第二个子元素</strong></s><!--给第二个子元素加删除线和加粗--> <i><strong>第三个元素</strong></i></p><!--给第三个子元素变倾斜和加粗--></body></html>任务1CSS3高级选择器的使用1.层次选择器—示例1<title>相邻和普通兄弟选择器</title><styletype="text/css"> h2+p{background-color:lightblue;}/*h2元素的第一个相邻元素p背景色为浅蓝色，因此"所以我们要学会享受寂寞"背景色为浅蓝色*/ h2~p{font-size:30px;font-family:"华文行楷"}/*h2的兄弟元素P的字大小都是30像素，字体为华文行楷*/</style></head><body> <p>有些再见，就是不再见</p> <h2>我们笑着说再见，其实心里都知道再见遥遥无期</h2> <p>所以我们要学会享受寂寞</p><!--背景色为蓝色、字体为华文行楷、字的大小为30像素--><p>若无缘，近在咫尺也不相见</p><!--字体为华文行楷、字的大小为30像素--><p>有缘，有们会偶遇很多回</p><!--字体为华文行楷、字的大小为30像素--> </ul></body></html>

任务1CSS3高级选择器的使用1.层次选择器—示例2任务1CSS3高级选择器的使用2.属性选择器选择器功能示例E[att^=val]E元素的att属性值以val开头的元素P[class^=”tt1”]表示P元素的class属性为tt1开头的元素E[att$=val]E元素的att属性值以val结尾的元素P[class$=”tt1”]表示P元素的class属性为tt1结尾的元素E[att*=val]E元素的att属性值包含val的元素P[class*=”tt1”]表示P元素的class属性包含tt1的元素<styletype="text/css"> p[class^="tt1"]{background-color:pink;} p[class$="tt1"]{text-align:center;} p[class*="tt"]{font-family:楷体;border:2pxdotted;}</style></head><body><pclass="tt1">人生，只要能照亮某个角落就够了。</p><!--tt1即可以作为开头的元素，也可作为tt1结尾的元素--><pclass="tt1ab">未来岁月漫长，依旧值得期待。</p><!--tt1作为开头的元素--><pclass="att1">与其强求别人改变，不如把心力放在"如何让自己快乐！"。</p><!--tt1作为结尾的元素--> <pclass="tt1">“来则欢喜，去则放手。”这对彼此来说最轻松.</p><pclass="att2">不要认为别人的给予理所当然，感谢你所得的，并且不再奢求更多。</p><!--包含tt的元素--><pclass="at3t">能与”心地善良的人“亲密交往，是非常难得的事。</p><pclass="tt4">痛苦会成为未来重要的经验，所以一次也不要浪费。</p><!--包含tt的元素--></body></html>任务1CSS3高级选择器的使用2.属性选择器—示例任务1CSS3高级选择器的使用3.结构化伪类选择器选择器功能示例:root选择文档的根元素:root{color:red}表示根元素的所有字体颜色为红色。:not也称为否定选择器，用于选择除了某个元素之外的所有元素p:not(.t){background-color:red}表示除了P元素中类为t的元素外的所有元素背景为红色。:empty用于选择没有内容的元素p:empt{background-color:green；14px;}:表示空内容的p元素背景色为绿色:target用于选取当前活动的目标元素，只有用户单击了超链接，而且此链接地址为本页面的目标位置时，target样式才起作用：target{border:2solidblue}表示单击链接时，其目标的边框为2像素实线蓝色。（注意目标必须和链接在同一个页面中）:before用于在元素内部所有子元素之前插入内容，插入内容必须用content属性设定li:before{content:url(images/tb.jpg)}表示li所有元素之前插入图片tb.jpg:after用于在元素内部所有子元素之后插入内容，插入内容必须用content属性设定li:after{content=”--ok”;color:#999;font-size:10px}表示li所有元素之后插入字体大小为10像素、颜色为999的—okE:first-child选取父元素E的第一个子元素li:first-child{background-color:lightblue;}表示li元素的第一个子元素背景为淡蓝色E:last-child选取父元素E的最后一个子元素li:last-child{background-color:yellow;}表示li元素的最后一个子元素背景为黄色E:nth-child(n)选取父元素E的第n子元素（若n为”odd”表示“奇数”、”even”表示偶数）li:nth-child(2){color;red}表示li元素的第二个子元素字体为红色。E:nth-last-child(n)选取父元素E的倒数第n子元素li:nth-last-child(3){color;blue}表示li元素的倒数第3个子元素字体为蓝色。E:first-of-type选取父元素E的具有指定类型的第一个子元素P:first-of-type{text-align:center}表示p元素的第1个类型子元素字体居中对齐。E:last-of-type选取父元素E的具有指定类型的最后一个子元素P:last-of-type{background-color:orange}表示p元素的倒数最后一种类型子元素背景为橙色。E:nth-of-type（n）选取父元素E的具有指定类型的第n子元素P:nth-of-type(2){font-family:“微软雅黑“}表示p元素的第2个类型子元素字体为微软雅黑。<title>：root、empty、target选择器</title><styletype="text/css"> :root{background:#D4DFF5;text-align:center} p:empty{background:#E0AACF;height:14px;} :target{border:1pxdashedblue;}/*1像素的蓝色虚线边框*/ p:before{content:url(images/tb.gif)}/*p的所有元素之前插入tb.gif图片*/ p:after{content:"--洪应明";font-size:10px;color:#999}/*p的所有元素之后插入字号为10像素、颜色为#999的文字：--洪应明*/ } </style></head><body> <h3>菜根谭</h3> <ahref="#liehuo">烈火</a><ahref="#yinian">一念</a><ahref="#xianzhong">闲中</a> <pid="liehuo">烈火炼真金，成事须用功</p><pid="yinian">一念错皆错，万善全方全</p> <p></p> <pid="xianzhong">闲中消忙错，静时息非心</p> </body></html>任务1CSS3高级选择器的使用3.属性选择器—示例1<title>:first等选择器</title><styletype="text/css"> p:only-child{background-color:aquamarine;text-align:center} li:first-child{background-color:lightgreen;} li:last-child{border-bottom:2pxdottedorange;}li:nth-child(3){font-family:"华文行楷";}li:nth-last-child(3){color:red;} li:nth-child(odd){text-align:center;}</style></head><body> <h2>玉溪</h2> <div><p>聂耳故乡</p></div><!--p元素是div元素的唯一孩子，所以P元素里的内容，自动套用p:only-child元素--> <div><p>玉溪因水得名，玉溪河即《水经注》所记之桥水，明代文献中已称玉溪，取其清流如玉之意</p> <p>玉溪矿产资源有铁、铜、镍、磷等，潜在经济价值达4000亿元以上。铁矿资源储量7.2亿吨，居云南省首位</p> </div><!--div元素里有2个P元素，所以P不是div的唯五孩子，故p元素里的内容不会自动套用p:only-child元素--> <ul> <li>抚仙湖</li><!--li元素的第一个孩子--> <li>嘎洒镇</li> <li>纳古镇</li> <li>樱花谷</li> <li>那诺集市</li> <li>磨盘山</li> </ul></body></html>任务1CSS3高级选择器的使用3.属性选择器—示例2:root选择器:empty选择器:only-child选择器:nth-of-type（n）选择器、:nth-last-of-type（n）选择器:not选择器:target选择器:first-child选择器、:last-child选择器、:nth-child（n）选择器、:nth-last-child（n）选择器

高级选择器:before选择器:after选择器技能拓展任务2CSS3高级特效的使用CSS渐变01CSS变形02CSS过渡03CSS动画04任务2CSS3高级特效的使用1.css渐变CSS3渐变可以显示两个或多个指定的颜色之间显示平稳的过渡。CSS3定义了两种类型的渐变（gradients）：线性渐变（LinearGradients）-向下/向上/向左/向右/对角方向径向渐变（RadialGradients）-由它们的中心定义（1）线性渐变(linear-gradient)语法:background-images:linear-gradient(direction,color-stop1,color-stop2,...);（2）径向渐变(RadialGradients)语法:background-image:radial-gradient(shapesizeatposition,start-color,...,last-color);#box1{height:200px;background-image:linear-gradient(green,black);}任务2CSS3高级特效的使用1.CSS渐变—示例#box1{height:200px;background-image:linear-gradient(toright,blue,orange);}#box1{width:200px;height:200px;background-image:radial-gradient(red,white,blue);}#box1{width:200px;height:200px;background-image:radial-gradient(blue20%,orange50%,red20%);}任务2CSS3高级特效的使用2.css变形CSS3中，transform属性可以实现变形，变形效果主要有：移动（translate）、缩放（scale）、旋转（rotate）、倾斜（skew）。属性值说明取值none无变换translate(X,Y)translateX(x)translatY(y)水平方向和垂直方向两个方向上平移元素。x和y的取值，可以是长度单位，如20px,也可以是百分比，如10%在水平方向平移元素在垂直方向平移元素scale(x,y)scaleX(x)scaleY(y)水平方向和垂直两个方向上缩放元素x和y的取值是数字，默认值是1大于1，放大小于1，缩小改变的不是元素的宽高，而是x和y轴的刻度。在水平方向上缩放放元素在垂直方向上缩放放元素rotate(angle)旋转元素angle单位通常是deg,1deg=1度。比如45degskew(angleX,angleY)skewX(angleX)skewY(angleY)在水平方向和垂直两个方向上使元素倾斜一定的角angleX和angleY取值是数字+deg，比如40deg在水平方向倾斜一定的角在垂直方向倾斜一定的角matrix(a,b,c,d,e,f)将所有2D变形函数(旋转、缩放、移动及倾斜)组合在起任务2CSS3高级特效的使用2.css变形CSS3中，变形的其他属性。属性说明取值transform-origin表示元素旋转的中心点，通常取两个值。第一个值，表示元素旋转中心的水平位置；第二值表示元素旋转中心的垂直位置默认值为50%50%；第一个值可以取：left、right、center、长度、百分比;第二个值可以取：top、bottom,center、长度、百分比。transform-style指定嵌套元素如何在3D空间中呈现flat：表示所有子元素在2D平面呈现。preserve-3d：表示所有子元素在3D空间中呈现。perspective设置用户和元素3D空间Z平面之间的距离取值越小，3D效果就越明显；值无穷大，或值为0时与取值为none效果一样。backface-visiblity定义元素在不面对屏幕时是否可见任务2CSS3高级特效的使用3.css过渡CSS3过渡：在给定的时间从一种样式逐渐改变为另一种的效果。可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。属性说明取值transition用于在一个属性中设置四个过渡属性。四个子属性之间不能用逗号隔开，只能用空格隔开Propertydurationtiming-functiondelaytransition-property规定设置过渡效果的CSS属性的名称All(默认)：所有属性都获得过渡None:没有过渡Property:可过渡的样式。用逗号隔开多个样式。transition-duration规定完成过渡效果需要时间（以秒或毫秒计），默认是0s。transition-timing-function规定过渡效果的时间曲线。默认是"ease"函数。Linear：线性过渡Ease：平滑过渡ease-in：由慢到快ease-out：由快到慢ease-in-out：由慢到快到慢cubic-bezier(n,n,n,n)：特殊的立方贝塞尔曲线效果。transition-delay规定过渡效果延迟时间。默认是0s。以秒为单位（S）或毫秒（ms）。默认值：0s。任务2CSS3高级特效的使用4.css动画CSS3动画，使元素从一种样式逐渐变化为另一种样式的效果。通过animation属性创建帧动画。通常用@keyframes规则来定义多个关键帧，然后再用animation属性创建每个关键帧的属性来实现复杂的动画效果。属性说明取值@keyframes定义关键帧

animation所有动画属性的简写属性Namedurationtiming-functiondelayiteration-countdirectionanimation-name规定关键帧动画的名称Keyframename动画名称animation-duration动画效果完成的时间Time，默认为0animation-timing-function指定动画速度曲线linear：动画匀速运动ease(默认值)ease-in：由慢到快ease-in-out：由慢到快到慢Steps：指定了时间函数中的间隔数量（步长）animation-delay设置动画效果延迟时间time,默认为0animation-iteration-count定义动画的播放次数normal:播放次数infinite:循环播放animation-direction指定动画的播放方向Alternate：偶数向前播放，奇数向相反方向播放animation-fill-mode规定动画结束后的状态forward:向前backwards:向后animation-play-state指定动画运行状态running:运行Paused:暂停任务2CSS3高级特效的使用案例1：图片悬停遮罩效果任务2CSS3高级特效的使用案例2：图片切换效果任务2CSS3高级特效的使用案例3：魔方:CSS渐变:CSS过渡过渡：

transition:CSS变形:CSS动画变形：移动（translate）、缩放（scale）、旋转（rotate）、倾斜（skew）。

高级特效动画：animation技能拓展任务3导航制作垂直导航制作03复杂导航制作04认识导航01水平导航制作021.认识导航任务3导航制作了解网站信息的组织结构了解导航的外观设计了解导航的交互设计1.认识导航任务3导航制作成功导航的特征1、合理的信息组织结构1）内容类信息是网站的主要内容，通常使用网站的主导航来组织。主导航大多采用一级导航或二级导航，一般不要超过三级导航。2）周边类信息指的是网站中不那么重要，但是又必须要有的内容，例如合作伙伴、联系我们等，通常使用次导航来设计，放置在网页中不那么重要的位置。3）功能类信息指的是具有特定功能的信息，例如购物车、用户登陆与注册等。功能类信息是提供给浏览者使用的工具，必须放置在显眼并随手可及的地方。1.认识导航任务3导航制作成功导航的特征2、良好的外观设计1）合理的布局设计。导航条的布局设计包括在网页中的位置、所占空间比例、排列方式等。2）清晰的视觉传达。成功的导航，要求有明确的标签文字，能够准确表达菜单的信息含义；要有清晰的视觉效果，标签文字可读性好，图标的指示明确；要有清晰的视觉层次，能够明确区分各级导航菜单，能够清楚定位当前所点击的菜单。3）相称的设计风格。成功的导航应该具有与网站类型相称的设计风格，再出色的导航设计方案都必须服务于网站的整体需求，与网站融为一体。1.认识导航任务3导航制作成功导航的特征3、良好的交互设计1）合理的视觉效果。鼠标状态发生改变时，导航菜单的变化在视觉效果上应做到醒目、自然、不突兀，既能够起到提示的效果，但是又不喧宾夺主，不能破坏网页的整体设计风格。2）易于学习。成功的导航交互设计应该是有规律的、易于学习的，浏览者能够快速理解导航菜单的变化规律和意图，并根据这些规律找到信息的定位。3）富有创意。富有创意的交互设计是成功导航的重要特征，在常规与个性之间寻求一个平衡点，使得导航既有吸引力也有良好的可用性。1.认识导航任务3导航制作小节无论如何，记住关键的一条设计原则就是，永远要将最关键、最重要的内容信息让用户轻松找到，这就是导航应该做到的。创意不是天马行空，而是在遵循导航设计的基本原则基础上进行的与网站需求相符的个性化设计。感谢您的观看！任务3导航制作2.水平导航制作-学习目标掌握水平导航条的标签结构设计、样式设计、以及鼠标交互设计。任务3导航制作2.水平导航制作-任务目标使用超链接设计导航条结构拓展超链接的响应区设计鼠标经过、按下、访问过的样式任务3导航制作2.水平导航制作—导航制作设计导航条的标签结构任务3导航制作2.水平导航制作—导航制作设计导航条的CSS样式1）外层div样式任务3导航制作2.水平导航制作—导航制作设计导航条的CSS样式2）超链接的公共样式任务3导航制作2.水平导航制作—导航制作设计导航条的CSS样式3）超链接各个状态的样式任务3导航制作2.水平导航制作—任务小节使用display:inline-block拓展超链接的响应区伪类选择符实现鼠标交互控制>>遵照优先顺序a:link、a:visited、a:hover、a:active，如果顺序打乱会看不到正确效果。感谢您的观看！任务3导航制作3.垂直导航制作-学习目标掌握垂直导航条的标签结构设计、样式设计、以及鼠标交互设计。任务3导航制作3.垂直导航制作-任务目标使用超链接设计导航条结构拓展超链接的响应区设计鼠标经过的样式利用background设计图标任务3导航制作3.导航制作—导航制作设计导航条的标签结构垂直任务3导航制作3.垂直导航制作—导航制作设计导航条的CSS样式1）全局样式任务3导航制作3.垂直导航制作—导航制作设计导航条的CSS样式1）标题样式任务3导航制作3.垂直导航制作—导航制作设计导航条的CSS样式1）超链接的公共样式任务3导航制作3.垂直导航制作—导航制作设计导航条的CSS样式1）“特色图书”的样式任务3导航制作3.垂直导航制作—导航制作设计导航条的CSS样式1）鼠标经过的样式任务3导航制作4.垂直导航制作—任务小节使用display:block拓展超链接的响应区伪类选择符实现鼠标交互控制运用background灵活定位图标感谢您的观看！任务3导航制作4.复杂导航制作-学习目标能够灵活运用之前所学知识实现复杂效果的导航条设计。任务3导航制作4.复杂导航制作-任务目标合理设计导航条的标签结构实现hover状态下淡紫色背景凸起的立体效果任务3导航制作4.复杂导航制作—导航制作设计导航条的标签结构<divid="nav"><ul><li><ahref="">首页</a></li><li><ahref="">学院概况</a><ul><li><ahref="">学院简介</a></li><li><ahref="">组织机构</a></li><li><ahref="">发展历史</a></li><li><ahref="">校园风光</a></li></ul></li><li><ahref="">学院新闻</a>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论