DIV+CSS布局与设计教程.pdfVIP

1.了解DIV+CSS布局,什么是DIV什么是CSS

2.了解CSS3

3.如何在本地实现的效果与的一致

4.常见效果

5.实例演示

6.课后总结

7.提问解答

什么是DIV？

a.对DIV的解释我们可以在网上随时找到这是上面对DIV的解释

b.那么我们要怎么理解DIV呢

我们把DIV理解成一个盒子,也就是盒子模型原理,内容就相当于盒子里面的物品,一层一层的

摆放,有层次性

下面我们看看图解现在已经不兼容IE6了,所以我们看的就好了

DIV图解

DIV图解

DIV编写与结构

1.DIV内联常见样式:

宽度width高度height背景background边框border

外边距margin内填充padding浮动float字体font颜色color

显示disy定位position溢出overflow层次z-index行高line-height

文字对齐text-align上top下bottom左left右right

2.DIV布局方法

DIV布局是从大到小,所以我排版一个页面或者一个内容先把大结构写好

然后在细化里面的内容,写完一个地方一定要预览看下避免出错了没发现

3.书写规范

写代码的时候一定要写的整洁干净,必要的时候可以在后面加上注释,以便

下次修改的时候能很快的找到对应的内容

4.思路清晰

排版的时候思路一定要清晰,代码是死的脑子是活的,所以要灵活调用

什么是CSS？

a.对CSS的解释我们可以在网上随时找到这是上面对CSS的解释

b.那么我们要怎么理解CSS呢

其实我们美工排版没有网页排版那么复杂,所以不用考虑的太多,不用去优化CSS的文档大小,因为CSS是叠加

样式,大家对CSS的了解也不多,以为有CSS就可以做很多效果,但上CSS的使用能使排版更简便代码更简

洁,所有利用一些技巧会是排版更快加载更快

c.如果在DW里面使用css

我们在本地排版的时候可以把div跟css放在一个html页面里面不需要去单独新建一个css样式表,有了css很

多效果都变的简单了不是那么复杂神秘了所以我们今天就讲讲一些常见的css应用,然后加上css3美化

效果

什么是CSS3？

a.怎么理解CSS3

其实我也不是很了解css3,但是我们会使用就行了,就用他几个样式我们就可以实现很多理想不

到的效果了,css3的使用会让效果更美感,更连贯,有一种过渡的感觉,以前这种过渡效果大家都

认为是JS实现的,其实css3也是可以实现的,而且更简单,想了解css3大家可以去网上寻找

资料会给你意想不到的意外!!

b.CSS3样式

我一般用css3样式只用了几个,所以我们只要把他的过渡样式做成全局的或者是单独一个调

用样式就好了在div里面直接调用过来就好了就不用每次都添加一个,这样可以让代码更简短

...

.transition{transition:all0.5s;-moz-transition:all0.5s;-webkit-transition:all0.5s;-o-

transition:all0.5s;}

里面的0.5s就是过渡的时间可以自己调,我们把他做成一个单独样式,然后在div里面调用就有

那种像JS一样有过渡的效果了,具体看操作演示~

常见的一些CSS效果

我们直接上天猫上面看