css3总结

Css3课后总结

●Css里的background-image属于样式图片，网页的风格样式换了这些图片也换；而html中的image是网页的内容图片，不随样式改变，是一直存在的。

1、float：left/righ；

浮动前源代码

网页显示如下图

若再在这些标签后加标签，后面标签的内容会自动排在它们下面（因它们是块级标签，即使只有一个字也独占一行），会很难看。如下图所示

为使超链从第一个超链开始有序的依次向后排列，我们就可以使用float（浮动）。在a标签内加float：left；

代码如下

网页出现的效果，从第一个超链依次向右排，注意当排到最后，如果网页剩下的宽度不够超链的宽度，超链会跳到下一行，然后继续向右排；如果float值是right，会继续跳到下一行的右边，然后从右向左排。

如果float:right;网页出现下面效果

由上面两种情况可以发现浮动会脱离文档流，即因浮动三个超链浮起来，超链后面的标签会插在浮起的超链后。但可以使用clear属性来消除。

2、clear：doth;做法，在body中加一个div标签，且加在超链后的标签之前即

且在style中加个clear类标签即

修改后出现的结果

●上面是网页框架的一种，下面是另一种框架

我们先写好如下框架

然后在相应块内填充内容，设置完chead和left后代码如下

效果如下

然后再对right进行设置

代码如下

出现的效果如下，即因left是个块级标签right出现在她的下面

然后我们在.left 和.right选择器中加上float：left；后，出现如下效果

然后再对cfooter作如下处理

结果出现下图情况

和上图一样没变化，我用firebug来看看。

会发现上面多了个蓝框框，原来下面的框出现在顶部，这是因为，浮动脱离文档流的原因。于是我们在cfooter标签前加一个clear标签，在style中加上clear类选择器，最后出现了我们想要的结果，如下

●表单的样式化

代码如下

效果如下

下面我们用css进行处理，给姓名与密码加边框，（还可以设定输入的字体）代码如下

给密码右边加上锁

效果如下,按照此法可以给给导航加图标

按照此方法可以改变提交摁钮，可给其加背景图片，改变他点上时的形态，点击后的形态，如果我们想让鼠标点上的时候变成小手的形状，可用属性cursor。

代码如下

效果如下，不过手的形状看不到

3、Cursor:pointer;它的值有

●表格的样式化

作如下操作

网页将会显示下面效果

这样看起来很丑，网页追求美观，于是做下面css操作

出现这样的效果，只有外边框。

于是做下面的修改

现实的效果如下，中间有好多缝

当我们在table中加上cellspacing="0"后就得以解决。可中间会出现边框碰撞。

所以我们还要利用属性border-collapse来解决，该属性是加在table标签里的。

border-collapse：separate/collapse；separate是上下边框分开即双边框形式出现，而collapse可以消除双边框

最后就成下图效果

如果我们要使“001、男、123456”离左有点距离，我们可以通过padding来控制。htnl中的cellpadding="10"时，是使上下左右都留出10像素的距离；而padding可以单独设置边框的四个边中的某一个或二、三个方向的距离，padding可以替换掉cellpadding，只需设padding：10 px；。利用text-align：center；使文字居中。

隔行跳色

在style中设个类选择器，然后隔行将tr类名设置为类选择器名。如下

最后出现隔行调色的效果