html教程--第四章-3.pptx

第一章 网页设计与网站建设的基础知识 第二章 HTML超文本标记语言 第三章 网页设计工具Dreamweaver 第四章 CSS层叠样式表 第五章 JavaScript脚本编程,CSS3,第四章,主要内容,,,,,,,,,,CSS圆角、边框,,CSS背景、渐变,,CSS过渡、动画,,,,,CSS多列,,,媒体查询,,CSS3边框,边框：常用属性 Border-radius Box-shadow Border-image,浏览器支持,浏览器支持,Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。 Firefox、Chrome 以及 Safari 支持所有新的边框属性。 注释：对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。 Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-,CSS3圆角,使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角“。,#rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; },#rcorners2 { border-radius: 25px; border: 2px solid #8AC007; padding: 20px; width: 200px; height: 150px; },#rcorners3 { border-radius: 25px; background: url(paper.gif); background-position: left top; background-repeat: repeat; padding: 20px; width: 200px; height: 150px; },CSS3圆角,border-radius - 指定每个圆角 如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。但是，如果在四个角上一一指定，可以使用以下规则： 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角 一个值： 四个圆角值相同,CSS3圆角,测试工具：http://www.w3school.com.cn/tiy/c.asp?f=css_border-radius,CSS3盒阴影,CSS3中的box-shadow属性被用来添加阴影:,div { box-shadow: 10px 10px 5px #888888; },CSS3盒阴影,语法： box-shadow: h-shadow v-shadow blur spread color inset;,测试：http://www.w3school.com.cn/tiy/c.asp?f=css_box-shadow,CSS3背景,背景：常用属性 background-size background-origin background-clip,CSS3背景,background-size background-size指定背景图像的大小。CSS3以前，背景图像大小由图像的实际大小决定。 CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。 你指定的大小是相对于父元素的宽度和高度的百分比的大小。,CSS3背景,重置背景图像：,CSS3背景,伸展背景图像完全填充内容区域：,CSS3背景,background-Origin,background-Origin属性指定了背景图像的位置区域。 content-box, padding-box,和 border-box区域内可以放置背景图像。,语法：background-origin: padding-box|border-box|content-box;,http://www.w3school.com.cn/tiy/c.asp?f=css_background-origin,CSS3背景,background-clip 规定背景的绘制区域。,background-clip: border-box|padding-box|content-box;,http://www.w3school.com.cn/tiy/c.asp?f=css_background-clip,CSS3渐变,CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）： 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 径向渐变（Radial Gradients）- 由它们的中心定义,CSS3 线性渐变,为了创建一个线性渐变，你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。,background: linear-gradient(direction, color-stop1, color-stop2, .);,语法：,CSS3 线性渐变,线性渐变 - 从上到下（默认情况下）,CSS3 线性渐变,线性渐变 - 从左到右,background: linear-gradient(to right, red , blue);,CSS3 线性渐变,线性渐变 - 对角 通过指定水平和垂直的起始位置来制作一个对角渐变。预定义方向（to bottom、to top、to right、to left、to bottom right，等等）,background: linear-gradient(to bottom right, red , blue);,CSS3 过渡,CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容： 指定要添加效果的CSS属性 指定效果的持续时间。,div { transition: width 2s; },注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。 指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时：,div:hover { width:300px; },CSS3 过渡,多项改变 要添加多个样式的变换效果，添加的属性由逗号分隔：,div { transition: width 2s, height 2s, transform 2s;},CSS3 动画,动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。 请用百分比来规定变化发生的时间，或用关键词 “from“ 和 “to“，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。,CSS3 动画,@keyframes 规则,把 “myfirst“ 动画捆绑到 div 元素，时长：5 秒：,div { animation: myfirst 5s; -webkit-animation: myfirst 5s; /* Safari 与 Chrome */ },CSS3 动画,0% 是动画的开始，100% 是动画的完成。当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：,@keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} },CSS3 动画,导航条,导航栏=链接列表 导航条基本上是一个链接列表，所以使用 和 元素非常有意义：, Home News Contact About ,导航条,从列表中删除边距和填充：,ul { list-style-type:none;//移除列表前小标志。 margin:0;//移除浏览器的默认设置将边距和填充设置为0 padding:0; },导航条,垂直导航栏 元素的样式：,a { display:block; width:60px; background-color:#dddddd; },display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度 width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度 务必指定 元素在垂直导航栏的的宽度,导航条,美化列表,a:link,a:visited { display:block; font-weight:bold; color:#FFFFFF; background-color:#98bf21; width:120px; text-align:center; padding:4px; text-decoration:none; } a:hover,a:active { background-color:#7A991A; },导航条,水平导航栏 浮动列表项,li { float:left; } a { display:block; width:60px; },float:left - 使用浮动块元素的幻灯片彼此相邻 display:block - 显示块元素的链接，让整体变为可点击链接区域（不只是文本），它允许我们指定宽度 width:60px - 块元素默认情况下是最大宽度。我们要指定一个60像素的宽度,导航条,美化,下拉菜单,下拉菜单, 主页 新闻 下拉菜单 链接 1 链接 2 链接 3 ,下拉菜单,ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; },li a, .dropbtn { display: inline-block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; },初步形成导航条：,li a:hover, .dropdown:hover .dropbtn { background-color: #111; },下拉菜单,.dropdown { display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); },下拉菜单,.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; },二级菜单,准备工作： 列表,2,添加CSS代码：,ul{margin:0;padding:0;width:400px;height:20px;} li{width:150px;float:left; margin:0;padding:0;} ul ul{width:150px;} li{background:#66FFFF;}/*非必须，为了观察*/ li:hover{background:#FFFF00;cursor:hand}/*非必须，为了观察*/,说明： margin:0;padding:0; 这是为了更精确的控制显示效果。 width和height具体数值要根据显示菜单项的数量和显示的方向设置， 比如此处，横向显示两个，所以ul:width=li:width * 2。 如果要纵向显示，则ul:height=li:height * 菜单项数,3,添加二级菜单隐藏和显示的CSS代码：,ul li{position:relative;}/*二级菜单定位 的 原点*/ ul li ul{position:absolute;top:18px;left:0;}/*二级菜单定位*/ ul li ul{visibility:hidden}/*二级菜单隐藏*/ ul li:hover ul{visibility:visible;}/*二级菜单显示*/ 说明： 菜单的上级定位原点一定要有具体定义，否则会一直上溯，最终为body标签。 left和top即使是0也不能省略。,,,,,,, #menu ul { list-style-type: none; margin: 0px; padding: 0px; } ,,定义一下全局的字体，字号，行距等,,,,,,接下来定义 li 的背景色为浅灰色及下边框和内边距,,,,,要添加链接，先选择要添加链接的文字，然后在属性页面链接上输入要链接的页面址，我这里输入个#，是个虚拟链接，不指向任何页面,,创建a的样式后，下面我们增加个交互效果，当鼠标划过链接文字时，让文字颜色变成红色，这时就需要用到a:hover这个伪类,纵向二级列表,二级菜单即指当鼠标放到一级菜单上后，会弹出相应的二级菜单，移去鼠标后自动消失, 首页 网页版式布局 自适应宽度 固定宽度 div+css 教程 新手入门 视频教程 常见问题 div+css 实例 常用代码 站长杂谈 技术文档 资源下载 图片素材 ,,接下来修改css样式表，先修改#menu ul li，给其增加一个 position:relative; 属性,,,,定义#menu ul li ul的position: absolute; left: 100px; top: 0px;，那么它将以相对于它父元素li的上为0，左为100的位置显示。最后我们设置当鼠标划过后显示下级菜单的样式,