版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
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. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 普通住宅模板专项施工方案
- 品质管理的七大手法
- 喷淋系统施工方案
- 世纪商务英语口语教程专业篇II第四版Unit
- 2024年终总结及展望模板
- 幼儿园食品安全总结
- 2023年度企业社会责任报告
- 智能终端行业竞争优势比较报告
- 苹果汁行业市场前景展望报告
- 大地测量学实习报告4篇
- qdslrdashboard应用软件使用说明
- 电商合伙人协议合同范本
- 【校园快递管理系统的设计与实现(论文)12000字】
- 2023年全国高考体育单招文化考试数学试卷真题及答案
- 2023年贵州贵阳市矿能集团矿产贸易有限公司招聘笔试题库含答案解析
- 防范非法集资宣传教育ppt
- 防性侵中学生版讲稿
- 八大员劳务员考试题库及答案
- 中考地理一轮复习 中国的行政区划(共52张PPT)
- 安徽天成新材料有限公司安徽天成新材料165000吨醋酸衍生产品及食品添加剂项目环境影响报告书
- pcs-9611d-x说明书国内中文标准版
评论
0/150
提交评论