网页设计与制作项目化教程 课件 （蒋建琼） 项目5、6 CSS3高级篇学习、创建CSS3盒子模型_第1页
网页设计与制作项目化教程 课件 （蒋建琼） 项目5、6 CSS3高级篇学习、创建CSS3盒子模型_第2页
网页设计与制作项目化教程 课件 （蒋建琼） 项目5、6 CSS3高级篇学习、创建CSS3盒子模型_第3页
网页设计与制作项目化教程 课件 （蒋建琼） 项目5、6 CSS3高级篇学习、创建CSS3盒子模型_第4页
网页设计与制作项目化教程 课件 （蒋建琼） 项目5、6 CSS3高级篇学习、创建CSS3盒子模型_第5页
已阅读5页，还剩80页未读， 继续免费阅读

下载本文档

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

文档简介

项目五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><ul><li><ahref="">学院要闻</a></li><li><ahref="">公告通知</a></li><li><ahref="">校园动态</a></li></ul></li><li><ahref="">学院设置</a><ul><li><ahref="#">马克思主义学院</a></li><li><ahref="#">公共教学部</a></li><li><ahref="#">计算机信息学院</a></li><li><ahref="#">电气学院</a></li><li><ahref="#">经济管理学院</a></li><li><ahref="#">交通运输学院</a></li><li><ahref="#">机械学院</a></li><li><ahref="#">建筑工程学院</a></li></ul></li><li><ahref="">教育教学</a></li><li><ahref="">培训鉴定</a></li><li><ahref="">招生就业</a><ul><li><ahref="">招生信息网</a></li><li><ahref="">就业信息网</a></li></ul></li><li><ahref="">科学研究</a></li></ul></div>任务3导航制作4.复杂导航制作—导航制作设计导航条的CSS样式1）全局样式任务3导航制作4.复杂导航制作—导航制作设计导航条的CSS样式2）菜单横排使用浮动float:left

实现横排任务3导航制作4.复杂导航制作—导航制作设计导航条的CSS样式3）导航的超链接样式任务3导航制作4.复杂导航制作—导航制作设计导航条的CSS样式3）鼠标移到导航上的超链接样式任务3导航制作4.复杂导航制作—导航制作设计导航条的CSS样式4）下拉菜单的样式任务3导航制作4.复杂导航制作—任务小节使用“列表嵌套超链接”实现复杂导航条的标签设计使用float实现菜单的横排列使用background设置导航背景使用block设置导航块。感谢您的观看！项目六创建CSS3盒子模型理解盒子模型的概念掌握盒子模型的相关属性掌握盒子模型的定位学习目标Contents目录认识盒子模型任务1盒子模型的定位任务3理解盒子模型的相关属性任务2任务1认识盒子模型1.概念CSS盒子模型是网页设计中经常用到的一种重要的思维模型。它主要用来对网页元素进行布局和定位，通常用div来定义盒子。一个网页可以由若干个盒子组合而成，好比下图的相框。一个盒模型主要包括属性有：内容(content)、内边距(padding)、边框(border)、外边距(margin)。height任务1认识盒子模型2.主要属性属性说明:div标记就是一个区块容器标记，简称块标记，块通称为盒子。Content(内容)-盒子的内容，显示文本和图像。Padding(内边距)-内容区和边框之间的空间，内外距是透明的。Border(边框)-围绕在内边距和内容外的边框。Margin(外边距)-

盒子的最外围，是添加在边框外周围的空间。外边距是透明的。任务1认识盒子模型3.盒子模型大小标准盒子模型的大小：标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。标准盒模型的盒子的大小=content+border+padding+margin也就是一个完整的盒模型。它的宽度和高度的计算方式为:宽度=左外边距+左边框宽+左内边距＋内容宽度＋右内边距+右边框宽＋右外边距高度=上外边距+上边框宽+上内边距+内容高度+下内边距+下边框宽+下外边距任务2理解盒子模型的相关概念1.Border属性边框可以使用border-style、border-width和border-color以及它们的简写属性border来设置边框的样式。其中border-style属性为边框中最主要的属性，如果没有设置该属性的话，其它的边框属性也会被忽略。border属性是各个边框属性的简写属性,语法格式如下border{border-widthborder-style（必需）border-color}border-width:属性指定要显示的边框宽度。border-style:属性指定要显示的边框样式。border-color:属性指定要显示的边框颜色。Bordery-style(边框样式）solid:边框样式为单实线。

dashed:边框样式为虚线。dotted:边框样式为点线。double:边框样式为双实线。groove：边框样式为3D凹槽边框。ridge：边框样式为3D垄状边框。inset：边框样式为3Dinset边框。outset：边框样式为3Doutset边框。

none：边框样式为无边框hidden：边框样式为隐藏。Border(边框类型）(1)border-top:上边框宽度、样式、颜色。(2)border-right:右边框宽度、样式、颜色。(3)border-bottom:下边框宽度、样式、颜色。(4)border-left:左边框宽度、样式、颜色。创建CSS3盒子模型2.边框宽度border-widthborder-width属性可以设置一到四个值（用于上边框、右边框、下边框和左边框）例如，设置上下为20像素，左右为5像素的盒子，盒子边框样式为实线，代码如下div{border-style:solid;border-width:20px5px}也可详写为div{border-style:solid;border-width:20px5px20px5px}请解释下面的语句div{border-style:solid;border-width:30px10px20px;border-color:red}也可详写为？任务2理解盒子模型的相关概念3.margin(外边距)margin属性可以同时指定上、右、下、左（以此顺序）边距外边距位于盒子模型的最外围，是边框之外的空间，通过外边距可以使盒子与盒子之间不会紧凑的连接在一起，是CSS布局中的一种重要手段。margin-top:上外边距大小。margin-right:右外边距大小。margin-bottom:下外边距大小。margin-left:左外边距大小。margin取值可以是长度、百分比或auto。当使用百分比时，表示相对于父元素宽度的百

分比；auto:设置浏览器边距，其效果依赖于浏览器；长度：可以使用用px、em等作单位。#box{margin-top:50px;margin-right:20px;margin-bottom:15px;margin-left:10px;}#box{margin:50px20px15px10px;}#box{margin:30px;}请问表示什么含义#box{margin:20px30px;}请问表示什么含义#box{margin:0auto;}请问表示什么含义任务2理解盒子模型的相关概念4.

padding(内边距)padding属性可以同时指定上、右、下、左（以此顺序）边距内边距用于设置盒子中内容与边框之间的距离padding-top:上内边距大小。padding-right:右内边距大小。padding-bottom:下内边距大小。padding-left:左内边距大小。padding取值可以是长度和百分比,但不能使用负值。#box{padding-top:50px;padding-right:20px;padding-bottom:15px;padding-left:10px;}#box{padding:50px20px15px10px;}#box{padding:30px;}请问表示什么含义#box{padding:20px30px;}请问表示什么含义任务2理解盒子模型的相关概念5.圆角边框（border-radius)CSS3中新增的border-radius属性可以给元素设置圆角边框。这是CSS3很有吸引力的一个功能。其基本语法格式如下。border-radius:圆角半径每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。取值可以是长度和百分比,

。#box{border-top-left-radius:50px;border-top-right-radius:20px;border-bottom-right-radius:15px;border-bottom-left-radius:10px;}#box{border-radius:50px20px15px10px;}#box{border-radius:30px;}请问表示什么含义#box{border-radius:20px30px;}请问表示什么含义任务2理解盒子模型的相关概念6.盒子阴影（box-shadow)box-shadow属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由2-4个长度值、一个可选的颜色值和一个可选的inset关键字来规定。省略长度的值是0。其基本语法格式如下。box-shadow:阴影水平偏移量阴影垂直偏移量阴影模糊半径阴影扩展半径阴影颜色阴影类型；#box{box-shadow:10px5px6px8pxred;}#box{box-shadow:11px10px9px6px;}#box{box-shadow:30px20px6px9pxgreen;}请问表示什么含义#box{box-shadow:10px30px;}请问表示什么含义说明：（1）阴影水平偏移量:必选顶，可以为负值，正值表示向右偏移，负值表示向左偏移。（2）阴影垂直偏移量:必选项，可以为负值，正值表示向下偏移，负值表示向上偏移。（3）阴影模糊半径:可选顶,不能为负值，值越大阴影就越模糊，默认值为0，表示不模糊。（4）阴影扩展半径:可选项,可为负值。正值表示在所有方向扩展，负值表示在所有方向上消减，默认值为0。(5）阴影颜色:可选项,省略时为黑色。(6）阴影类型:可选项,内阴影的值为inset,省略时为外阴影。任务2理解盒子模型的相关概念1.文档流（documentflow）文档流又称普通流，指的是元素按照其在HTML中的位置顺序决定排布的过程,主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。也可理解为将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素。简单的说：网页在解析时，遵循从上向下，从左向右的顺序。脱离文档流:脱离了文档流的管理。不受文档流的布局约束了，并且更重要的一点是，这个标签在原文档流中所占的空间也被清除了。脱离文档流的元素处于浮动状态（可以理解为漂浮在文档流的上方），CSS有3种基本的定位机制:普通流、float（浮动）position(定位)脱离文档的的定位机制通常包括float、position：absolute、fixed。任务3盒子模型的定位2.盒子模型的的浮动(float)浮动定位的基本机制是:设置为浮动的元素从正常的文本流中移出，但它依然对原来存在于文本流中的元素产生影响,这些元素的内容（注意不是框，而是框中的内容）会围绕在浮动元素周围，就好像“河流”围绕“小岛”一样;浮动的框可以向左或向右移动，直到它的外边缘碰

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

温馨提示

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

最新文档

评论

0/150

提交评论