编写CSS样式实例介绍.pdf_第1页
编写CSS样式实例介绍.pdf_第2页
编写CSS样式实例介绍.pdf_第3页
编写CSS样式实例介绍.pdf_第4页
免费预览已结束

下载本文档

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

文档简介

编写CSS样式实例介绍 我们已经对CSS样式有了 个初步的认识 那么究竟CSS是什么样 的 如何实现 呢 下 通过例 进 说明 该例 通过CSS样式去控制图 包括图 效果 选择CSS开发 具 CSS开发 具很多 最常见的就是Dreamweaver 具了 同时还可以使 Office中的 Frontpage开发 页 本教程中采 的是Dreamweaver CS6版本 先我们建 个页 并选择页 的类型 具体操作如下 加 CSS控制 页创建完成后 动在index1 html的标签中加 如下代码 src表 img要链接的图 此时图 的位置和当前 页在同 个 件夹下 然后保存 该 页 最后在键盘上按 F12 键在浏览器中浏览 效果如下图所 三 控制图 从上图中我们可以看到 没有经过CSS样式控制的图 位置是靠左的 图 未经 任何控制 接下来我们通过CSS去改变图 的效果和位置 代码如下 div margin auto float right img width 200 height 200px filter blur add ture direction 135 strength 200 上 代码中 定义 个div选择器 其属性margin定义外部边距 动伸缩 float定义层 浮动在右边显 img选择器中 属性width定义显 图 宽度 height定义显 图 度 filter blur使 了 个滤镜效果 按 F12 键在浏览器中浏览 效果如下图所 这时我们发现图 的 位置和效果已经完全改变 原先的 图已经被缩 img 选择器实现 位置从左边已经调整到右边 div选择器实现 原先清晰的图 已经 加上了模糊滤镜效果 特别是滤镜效果 这些在过往只有在Photoshop中实现的东西 现在在CSS中也可以实现 四 CSS的注释 CSS注解 CSS注释 可以帮助我们对 写的代码进 说明 如说明某段是在什么 地 功能 样式等 以便我们以后维护时 看即懂 另外 在团队开发 页时 合 理适当的注解有利于团队看懂这些代码是对应哪 的 以便顺利快速地开发 页 CSS注解是以 斜杠和星号 开始 以 星号和斜杠 结束 注解说明内容放 到 与 之间 本 节实例带有CSS注解
人人文库> 全部分类> 应用文书 > 技术指导

温馨提示

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

最新文档

评论

0/150

提交评论