学习下视频：第7课 - 了解CSS定位与div结构 - CSS/DIV结构专题解说

CSS是CascadingStyleSheets的缩写，不得不承认CSS单独使用会麻烦一点，但其与脚本语言（如我们四阶段所学的Javascript）及XML技术的融合，即可达到绝佳的页面效果。

• 
  
• 
  

点击在线寓目
下载该节视频教程　动力软件园分流下载　FLV播放器下载大概利用QQ影音播放
在网页计划时，可否把持好各个模块在页面中的地位长短常关头的。在后面的课程中，已对CSS的基础利用有了必定的懂得。本课在此基本上对CSS定位作具体的先容，并先容主要的div标志，解说使用CSS+div对页面元素举行定位的办法，并剖析CSS排版中的盒子模子和二维三维定位等。
1．div标志与span标志
在利用CSS排版的页面中，div与span是两个经常使用的标志。使用这两个标志，加上CSS对其款式的把持，能够很便利的完成各类效果。我们在这里从两者的基础观点动身，先容这两个标志的用法与区分。但愿人人可以把握以下几个方面的内容：

• div与span的观点
  
• div与span的区分
  

登录/注册后可看大图

2．盒子模子
盒子模子是CSS把持页面时一个很主要的观点。只要很好的把握了盒子模子和个中每一个元素的用法，才干真实的把持页面中各元素的地位。我们在这里次要先容盒子模子的基础观点，并解说CSS定位的基础办法。
一切页面中的元素都能够当作是一个盒子，占有着必定的页面空间。一样平常来讲这些被占有的空间常常都要比纯真的内容要年夜。换句话说，能够经由过程调剂盒子的边框、间隔等参数，来调治盒子的地位。
一个盒子模子由content（内容）、border（边框）、padding（间隙）、margin（距离）这四部分构成，如图所示。

一个盒子的实践宽度（或高度）是由content+padding+border+margin构成的。在CSS中能够经由过程设定width和height的值来把持content的巨细，而且关于任何一个盒子，都能够分离设定4条边各自的border、padding、margin。因而只需使用好盒子的这些属性，就可以够完成林林总总的排版效果。
3．元素的定位
网页中各类元素都必需有本人公道的地位，从而搭建出全部页面的布局。我们在这里环绕CSS定位的几种道理办法，举行深切的先容，包含position、float、z-index等。必要申明的是，这里的定位不是用table举行排版，而是CSS的办法对页面中块元素的定位。但愿人人可以把握以下几个方面的内容：

• float定位
  
• position定位
  
• z-index空间地位
  

4．定位实例一：悄悄松松给图片署名
手里有大度的图片必要放到页面上，并且但愿给图片加上团体信息，假如对各类图像处置软件不是很熟习，用CSS定位完整能够完成给图片署名的效果。
起首找好但愿放到网上的图片，然后将其放进一个div块中，并用盒子模子的办法给图片加框（padding、border）。然后将必要署名的笔墨放进别的一个div块，用position定位将其挪动到图片上，再设置响应的字体、色彩便可。

登录/注册后可看大图

5．定位实例二：笔墨暗影效果
后面先容了用CSS滤镜完成笔墨暗影效果的办法，但是CSS滤镜仅仅合用于IE扫瞄器，假如但愿Firefox下也能有笔墨暗影的效果，该办法就力所不及。接纳本课先容的定位办法，便能轻松完成笔墨暗影的效果，并且合用于各个扫瞄器，本例效果如图所示。
方便性：课外，我们了解到现在流行的LBS系统、PJBLOG、php下面的WP、MT，都是采用Div+css构架。在平时的练习中我们就遇到过

学Dreamweaver技术的过程其实是一个增加信心的过程。

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环