09_第3章 CSS实用技巧1.ppt_第1页
09_第3章 CSS实用技巧1.ppt_第2页
09_第3章 CSS实用技巧1.ppt_第3页
09_第3章 CSS实用技巧1.ppt_第4页
09_第3章 CSS实用技巧1.ppt_第5页
已阅读5页,还剩17页未读 继续免费阅读

下载本文档

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

文档简介

1、动态网页设计与制作CSS+JavaScript,课件制作:王 敏,第3章 CSS实用技巧,重 点,1、CSS的常用技巧; 2、CSS样式表基本操作。,难 点,1、图片处理 2、定义外部样式表的选项,3.1 CSS的常用技巧,3.1.1 网页内容的居中对齐 1在屏幕中水平居中的文本框 body text-align:center; /* 为了兼容低版本的IE浏览器 */ #content margin:0 auto; /* 水平居中对齐 */ height:200px; width:300px; background-color:#ddd; border:3px dotted red; ,3.1

2、 CSS的常用技巧,3.1.1 网页内容的居中对齐 2在定高元素中垂直居中一行文字内容 body text-align:center; /* 为了兼容低版本的IE浏览器 */ #content margin:0 auto; height:200px; width:300px; background-color:#ddd; border:3px dotted red; line-height:200px; /* 设置与块状元素高度相同的值 */ ,3.1 CSS的常用技巧,3.1.1 网页内容的居中对齐 3在屏幕中水平和垂直都居中的文本框 #content height: 200px; widt

3、h: 300px; position: absolute; /* 绝对位置 */ top: 50%; left: 50%; margin-top: -100px; /* 高度的一半 */ margin-left: -150px; /* 宽度的一半 */ border:3px dotted red; background-color:#ddd; line-height:200px; text-align:center;,3.1.2 网页内容的隐藏与显示 #didisplay:block;float:left;border:1px ridge olive; #nodisplay:none; #hi

4、display:block;float:left;visibility:hidden ,3.1.3 方框长度的计算 有边框线(border-width、间距(padding)和宽度(width)以后,一个元素的实际的总的宽度: 2*border-width+width+2*padding 注:IE6之前的浏览器对此处理不一样。width则是总宽度。,3.1.4 圆角边框 设计思想:利用CSS样式实现圆角边框,即设计一组高为1px的块状元素逐行缩进,达到圆角边框效果。,实例:ch3_041.htm,3.1.5 图片,1在文档中插入图片 .leftImg float:left;margin:0 1

5、0px 10px 0 ,3.1.5 图片,2透明图片 ,实例:ch3_06.htm, #base background:url(images/baby_big.jpg); width:440px; height:330px; #base div width:400px; /* 440px - 20px - 20px */ height:290px; /* 330px - 20px - 20px */ border:20px solid #fff; opacity:0.5; filter:alpha(opacity=50) , ,3叠加图片 #pict1 background:url(image

6、s/baby_big.jpg); width:440px; height:330px #pict2 background:url(images/baby_3.jpg); width:440px; height:330px ,3叠加图片 ,3.1.5 图片,4阴影效果 图片阴影 .img-shadow background: url(images/trans-shadow.png) no-repeat bottom right; .img-shadow img position: relative; /* 使阴影位置相对于它的图片*/ padding: 5px; /* 产生图片边框 */,4阴影

7、效果 border: 1px solid #cecece; vertical-align:bottom; margin: -6px 6px 6px -6px; /* 错位图片以便显示出阴影,6px是阴影图片中阴影的宽度*/ ,3.1.6 定义外部样式表的选项,1制作适合打印的网页 样式文件中常用的格式: Bodycolor:#000000;background:#ffffff; Atext-decoration:underline;color:#0000ff; #flasdisplay:none/*取消广告、动画等的显示*/ #scrollboxwidth:200px;height:auto/*取消滚动条*/,3.1.6 定义外部样式表的选项,2制作适合不同IE版本浏览器的网页 其他适应语句: gte:表示大于等 lte:表示小于等于 lt :表示小于,3.1.6 定义外部样式表的选项,3在外部样式表文件中包含其他样式表文件 外部样式文件中可通过import语句将所需CSS样式文件集中放于一个文件中。如: im

温馨提示

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

评论

0/150

提交评论