代码入门教程（27）

春天没来 2013-02-10

展开全文

第二章标签应用
第三十九节 css样式表应用（5）

　　本节继续讲解css样式表的应用。本节讲解的内容为：一、应用CSS样式制作背景颜色条，二、相框中放入移动相片，三、相框中放入移动相片（方法２），四、相框中放入静止相片。

　　一、用CSS制作背景颜色条:

　　代码：

　　表达方式：

filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr='#ffffff',

endColorStr='#ff0000')

　　代码解析：

　　1、在上面的代码中有五个单元格中调用了css样式：

style="width: 20px; height: 440px; filter: progid:DXImageTransform.Microsoft.

Gradient(gradientType=1,startColorStr='#ffffff',endColorStr='#ff0000');"，

　　有五个单元格中调用了css样式：

style="width: 20px; height: 440px; filter: progid:DximageTransform.Microsoft.Gradient

(GradientType=1, startcolorstr:#ff00ff, endcolorstr:#FFFFFF,);"。

　　2、在块区标签<div style="margin-top: -440px; margin-left: 0px;">中，调用了css样式，设置了外边距；在表格标签<table style="top: 0px; height: 450px; position: relative;" align="center">中，调用了css样式，设置了相对定位代码与水平居中对齐代码。

　　3、css样式代码注释：

filter：滤镜；　

progid：DximageTransform.Microsoft.Gradient：背景渐变。

GradientType:设置或检索色彩渐变的方向。1代表水平渐变，0代表垂直渐变。默认值为1。

startColorStr:设置色彩渐变的开始颜色和透明度。默认值为 #FF000000 （不透明黑色）。其格式为 #AARRGGBB 。 AA 指定透明度。（ 00 是完全透明， FF 是完全不透明。） RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值。超出取值范围的值将被恢复为默认值。
EndColorStr:设置色彩渐变的结束颜色和透明度。默认值为 #FF000000 （不透明黑色）。其格式为 #AARRGGBB 。 AA 指定透明度。（ 00 是完全透明， FF 是完全不透明。） RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值。超出取值范围的值将被恢复为默认值。

　　效果：

　　二、相框中放入移动相片：（相对定位＋绝对定位）

　　代码举例：

<div align="center">
<table style="border-color: rgb(0, 200, 0); left: 0px; top: 98px; width: 416px; height: 479px;

position: relative;" id="table1" border="0">
<tbody>
<tr>
<td>
<marquee height="479" width="416" scrollAmount="3">
<img border="0" src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg"

width="416" height="479"><img border="0"

src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg" width="416"

height="479"><img border="0"

src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg" width="416"

height="479"><img border="0"

src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg" width="416"

height="479">
</marquee>
<div style="left: 0px; top: -98px; position: absolute;" class="divBorderStyle"

width="435" height="675"><img style="left: 0px; top: 0px;"

src="http://image27.360doc.com/DownloadImg/2011/04/2021/11089478_25.gif"

width="435" height="675"></div>
</td></tr></tbody></table></div>

　　代码解析：
　　1、表格标签设置相对定位代码，块区标签中设置绝对定位代码；
　　2、移动标签的规格应与相片的规格相同；
　　3、块区标签的规格应与相框的规格相同；
　　4、相片定位的参考点是它自身的正常位置，也就是在浏览器窗口上边缘的正中央向左208px处（因为表格的宽度为416px），相框定位的参考点是表格的左上角。

　　5、要把相片的上部在相框中显示出来，相片就得下降一个相框上边框的高度。经测试，这个高度大约为98px，因此，块区标签中的居上数值确定为-98px（也就是相框的居上数值）。这就把相框向上移动了98px。也就是把相片向下移动了98px。

　　6、块区标签中的居上数值确定为－98 px以后，相片正好放到相框中了。但是，整个相框和相片的位置有点儿偏高，其原因就是因为相框上移了98px，所以，表格标签中的居上数值（也就是相片的居上数值）我们把它设置为98px。

加大移动标签的宽度，可以观察上下边框的高度值，还可以观察相片在相框中的显示效果；
　　7、修改表格标签中相对定位的居左数值与居上数值，相片与相框会同时向同一个方向移动，它们的相对位置却始终保持不变。

　　效果：

　　三、相框中放入移动相片：（相对定位）

　　代码：

<div align="center">
<table style="border-color: rgb(0, 200, 0); left: 0px; top: 98px; width: 416px; height: 479px;

position: relative;" id="table1" border="0">
<tbody>
<tr>
<td>
<marquee height="479" width="416" scrollAmount="3">
<img border="0" src=http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg

width="416" height="479"><img border="0"

src=http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg

width="416" height="479"><img border="0"

src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg"

width="416" height="479"><img border="0"

src=http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg

width="416" height="479">
</marquee>
<div style="left: 0px; top: -577px; position: relative;" class="divBorderStyleRelative"

width="435" height="675"><img style="left: 0px; top: 0px;"

src=http://image27.360doc.com/DownloadImg/2011/04/2021/11089478_25.gif

width="435" height="675"></div>
</td></tr></tbody></table></div>

　　代码解析：

　　１、表格标签与块区标签中都应用了相对定位的css样式，它们定位的参考点都是自身的正常位置。换句话来说，相片定位的参考点在浏览器窗口上边缘的正中央向左208px处，相框定位的参考点在相片下方479px相片的左下角处。

　　２、因为相框的上边框大约为98px，相框的高度为675px，所以，相框的居上数值应该设置为：－577px（因为675－98=577）。也就是说，相框上移577px以后，相框上边框的下边缘就与相片的上边缘处于同一位置了。

　　３、相框上移577px以后,相框的上边缘就会超出“相片定位的参考点”（也就是浏览器窗口上边缘）98px，因此，相片的居上数值应该设置为：相框的居上数值应该设置为：98px。

　　４、因为相片是移动的相片，所以相框的居左数值定位为0px或者-30px、-50px都关系不大。但是有一条原则，相片的宽度加上相框的居左数值（要加正值，不能加负值。），其和不能大于相框的宽度，否则，相片就超出相框的右边框了（相框的左边框的宽度大约为75px）。

效果：（略）（这里如果显示出效果，文章发表以后，效果图下面就会出现一大片空白区域，页面不美观，故略。）

　　四、相框中放入静止相片：

　　代码举例：

<div align="center">
<table style="border-color: rgb(0, 200, 0); left: 0px; top: 80px; width: 390px; height: 517px;

position: relative;" id="table1" border="0">
<tbody>
<tr>
<td>
<img border="0" src="http://image35.360doc.com/DownloadImg/2011/08/2907/16637697_3.jpg"

width="390" height="517">
<div style="left: -70px; top: -80px; position: absolute;" class="divBorderStyle" height="680"

width="520"><img style="left: 0px; top: 0px;"

src=http://image52.360doc.com/DownloadImg/2012/05/2208/24265553_69.jpg width="520"

height="680"></div></td></tr></tbody></table></div>

　　设置说明：

　　１、先设置一个居中的块区，在块区中设置一个一行一列的表格，表格标签中要设置相对定位代码。然后在单元格中粘贴一个要做为相片的图片。再根据相片的规格设置（或者修改）表格的宽度与高度。

　　２、在单元格中再设置一个块区，块区标签中要设置绝对定位代码。然后在块区中粘贴一个要做为相框的图片。再根据相框的规格设置（或者修改）块区的宽度与高度。

　　３、表格标签中的“居左”与“居上”的数值，先设置为0px。这样就把表格放置在了浏览器窗口的正中间。块区标签中的“居左”与“居上”的数值，也先设置为0px。然后估计一下“相框上边框的高度”，修改块区标签中的“居上数值”，估计一下“相框左边框的宽度”，修改块区标签中的“居左数值”。

　　４、要想知道“相框上边框的高度”，可以这样操作：先把相片的宽度加大，例如把相片的宽度修改为690px，相片的右部就超出相框的右边框了。这时，就应该修改块区标签中的“居上”数值，把相片降下来。这个数值要修改为“负值”，相框就会向上移动，也就是把相片降下来了。当居上数值的最终结果修改为－80px的时候，相片的上边缘就与相框上边框的下边缘平行了，这就说明相框的上边框的高度大约为80px。

　　５、要想知道“相框左边框的宽度”，可以这样操作：先把相片的高度加大，例如把相片的高度修改为700px，相片的下部就超出相框的下边框了。这时，就应该修改块区标签中的“居左”数值，把相框向左移动，使相片的左边缘与相框左边框的右边缘对齐。这个数值也要修改为“负值”，相框就会向左移动，也就是把相片向右移动了。当居左数值的最终结果修改为－70px的时候，相片的左边缘就与相框左边框的右边缘对齐了，这就说明相框的左边框的宽度大约为70px。

　　6、把相片的规格恢复到“原来的”数值width="390" height="517"，点击“发表”按钮看看效果。相片完整地在相框中显示出来了，而且相片的周围也没有任何空隙，正合适。但是，整个图片的位置有点儿高，超过浏览器窗口的上边缘了。这时，应该再修改一下表格中的“居上”数值。前面我们不是把块区标签中的“居上”数值修改为－80px了吗，那么，现在就把表格标签中的居上数值修改为80px。再看看显示效果吧，完全合适了。

　　7、总之，一条总原则，要调整相片在相框中的左右位置，就修改相框所在块区中的“居左”数值；要调整相片在相框中的上下位置，就修改相框所在块区中的“居上”数值；要调整相片在相框中的显示大小，就修改相框的规格与相片的规格。

　　作业：

　　一、认真阅读代码解析，细致观察显示效果，深刻体会上面讲解的四种代码的设置要点。

　　二、填空题：

　　１、在绝对定位与相对定位代码中，居左的数值如果为正数，被定位的图片会向（）面移动。数值越大，移动的距离就越（）；数值越小，移动的距离就越（）。

　　２、在绝对定位与相对定位代码中，居左的数值如果为负数，被定位的图片会向（）面移动。数值越大，移动的距离就越（）；数值越小，移动的距离就越（）。

　　３、在绝对定位与相对定位代码中，居上的数值如果为正数，被定位的图片会向（）面移动。数值越大，移动的距离就越（）；数值越小，移动的距离就越（）。

　　４、在绝对定位与相对定位代码中，居上的数值如果为负数，被定位的图片会向（）面移动。数值越大，移动的距离就越（）；数值越小，移动的距离就越（）。

　　三、熟记绝对定位与相对定位代码，理解并记住它们各自定位的参考点。

　　四、应用上面讲解的四种方法，各制作一篇文章。

2013年2月 11日于北京

“春天没来”祝福朋友新春快乐

第二章标签应用

第四十节 css样式表应用（6）

　　本节继续讲解css样式表的应用。本节讲解的内容为：一、小图片中输入文字，二、两种滤镜联合制作的文字，三、滤镜图片中添加滤镜文字，四、表格标签中调用css滤镜样式，五、滤镜的四种设置方法。

　　一、小图片中输入文字：

　　代码：

　　设置说明：

　　１、今天讲解的内容与上一节讲解的“相框中放入静止相片”方法有点儿不同。上一节讲解的“相框中放入静止相片”，是通过给相框所在的块区标签中设置绝对定位的“居左”与“居上”的负值，把相框叠加在（套在）相片上，从而让相片正好显示在相框的方框内。今天讲解的内容是要把文字叠加在图片上，而且要正好叠加到小图片下方的方框内。

　　２、在居中的块区中设置一个一行一列的表格。表格的单元格中先放入一个小图片，再设置一个块区。在刚设置的块区中输入几个文字（文字不能过多）。

　　３、表格标签的宽度和高度与小图片的规格要相同，表格标签中要设置相对定位代码，相对定位代码的“居左”数值与“居上”数值都设置为0px。

　　４、块区标签中要设置绝对定位代码，绝对定位的参考点是小图片的右上角，绝对定位代码的“居左”数值与“居上”数值都要设置为正数。

　　５、文字标签的颜色可选择自己喜欢的颜色，文字标签的字号要配合块区标签的“居左”数值与“居上”数值一并调试修改，一直调试修改到输入的文字正好放入小图片下方的小方框内为止。

　　二、两种滤镜联合制作的文字：

　　代码举例：

　　注释：

　　１、上面两种滤镜联合制作的文字由shadow滤镜决定文字的颜色和阴影方向，由mask滤镜决定背景颜色（即矩形遮罩），由文字标签决定文字的大小、字体、行高。

　　２、要把滤镜的代码style="filter: mask(color=#000000) shadow(color=#ff00ff,direction=225);" 设置在表格的列标签中。

　　效果：

蛇年大吉

　　三、滤镜图片中添加滤镜文字：

　　代码举例：

<div align="center">
<table style="border-color: rgb(0, 200, 0); left: 0px; top: 0px; width: 350px; height: 525px; position: relative;" id="table1" border="1">
<tbody>
<tr>
<td bgColor="#000000" vAlign="middle" background="

http://image7.360doc.com/DownloadImg/2010/03/0602/2474078_21.jpg"><img style="margin: 0px 10px; width: 350px; height: 525px; float: none; filter: Alpha(Opacity=150,Style=2); cssfloat: none;" alt="" src=" http://image58.360doc.com/DownloadImg/2013/02/0911/30221765_9.jpg " width="600">
<div style="left: 30px; top: 0px; position: absolute;" class="divBorderStyle" height="80" width="350">
<table border="0" cellSpacing="5" cellPadding="0" width="350" align="center">
<tbody>
<tr>
<td style="filter: mask(color=#000000) shadow(color=#00ff00,direction=225);" align="center"><font style="width: 100%; height: 80px; color: rgb(255, 80, 0); line-height: 150%; font-family: 黑体; font-size: 20pt;"><strong>红红火火过大年</strong></font></td></tr></tbody></table></div></td></tr></tbody></table></div>

　　设置说明：

　　效果：

红红火火过大年

　　四、表格标签中调用css滤镜样式：

　　在表格标签中设置css滤镜样式，表格内输入的文字与粘贴的图片都会有滤镜效果。不过，应该注意的是：如果只使用一层表格，在表格标签中设置了背景颜色或者背景图片的话，滤镜效果将不会显示出来。因此，最好使用两层以上的多重表格，在最里层的表格标签中不要设置背景颜色或者背景图片。

　　代码举例：

　　例1：没有背景颜色或者背景图片的一层表格：

　　代码：

<table style="filter: shadow(color:#00f00f ,direction:120,strength:30);" border="2" cellSpacing="35" borderColor="#ee0000" cellPadding="0" align="center">
<tbody>
<tr>
<td>
<font style="line-height: normal; font-size: 40pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff00ff"><strong>“春天没来” 欢迎您</strong></font></td></tr>
<tr>
<td><img border="0" alt="滤镜图片" src="

http://image58.360doc.com/DownloadImg/2013/02/0318/30119921_2.jpg " width="750" height="1098">
</td></tr></tbody></table>

效果：

“春天没来” 欢迎您

　　例2：二层表格：

　　代码：

<table border="0" cellSpacing="10" cellPadding="0" width="800" background="

http://image7.360doc.com/DownloadImg/2010/03/0602/2474078_27.jpg " height="1098">
<tbody>
<tr>
<td>
<table style="filter: shadow(color:#ffff00 ,direction:120,strength:20);" border="2" cellSpacing="35" borderColor="#ee0000" cellPadding="0" align="center">
<tbody>
<tr>
<td>
<font style="line-height: normal; font-size: 40pt; font-style: normal; font-variant: normal; font-weight: normal;" color="#ff00ff"><strong>“春天没来” 欢迎您</strong></font></td></tr>
<tr>
<td><img border="0" alt="滤镜图片" src="

http://image58.360doc.com/DownloadImg/2013/02/0318/30119921_2.jpg " width="750" height="1098">
</td></tr> </tbody></table></td></tr></tbody></table>

　　效果：

“春天没来” 欢迎您

　　五、滤镜的四种设置方法：（以滤镜图片为例）

　　方法一：在图片标签中设置滤镜样式：
　　代码举例：

<img style="filter: Xray;" id="Xray滤镜图片"

src="http://userimage3.360doc.com/13/0110/16/10892606_201301101619050934.jpg "

width="375" height="553">

　　说明：

　　在方法一中，如果设置了图片规格，就会按照设置的规格显示图片；如果不设置图片规格，就会按照原规格显示图片。

　　效果：

　　方法二：在块区标签中设置滤镜样式，块区标签与图片标签相配合：

　　代码举例：

<img src="http://image51.360doc.com/DownloadImg/2012/05/1609/24115099_15.jpg "

width="375" height="553"></div>

　　说明：

　　在方法二中，块区标签与图片标签的规格要相一致。块区标签的规格缩小，就会剪切图片的右部与下部；块区标签的规格扩大，不会改变图片的大小。图片标签的规格扩大，图片就扩大；图片标签的规格缩小，图片就缩小。

　　效果：

　　方法三：在块区标签中设置内边距与背景颜色，在图片标签中设置滤镜样式，块区标签与图片标签相配合：

　　代码举例：

<img style="border-width: 0px; margin: 0px; width: 500px; height: 455px;

filter: Alpha(Opacity=100, FinishOpacity=0, Style=1, StartX=0, FinishX=0, StartY=0, FinishY=0);" border="0"

src="http://image58.360doc.com/DownloadImg/2013/02/0118/30083891_1.jpg"></div >

　　说明：

　　在方法三中，块区标签与图片标签的规格要相一致。如果要设置图片的外边距，例如：margin: 10px，块区标签的高度与宽度必须增加外边距的2倍（20px）。

　　效果：

　　方法四：滤镜图片要与原图片共同显示，进行对比，应该把图片放置在一个一行二列的表格中，才能够在同一行显示。（如果把两个图片都放在同一个单元格内，一行大约可容纳740px左右的图片。）

　　代码举例：
<table border="1" cellPadding="0" width="750" background="地址" height="553">
<tbody>
<tr>
<td>原图片<br>
<img id="原图片"
src="http://userimage3.360doc.com/13/0110/16/10892606_201301101619050934.jpg"
width="375" height="553"></td>
<td>FlipH滤镜图片<br><img style="filter: FlipH;" id="FlipH滤镜图片"
src="http://userimage3.360doc.com/13/0110/16/10892606_201301101619050934.jpg"
width="375" height="553"></td></tr></tbody></table>

　　说明：

　　一行二列的表格中，一个单元格放入原图片，另一个单元格放入FlipH滤镜图片。

　　效果：

原图片

FlipH滤镜图片

　　作业：

　　１、认真阅读代码解析与设置说明，细致观察显示效果，深刻体会上面讲解的几种代码的设置要点。

　　２、“小图片中输入文字”，仍然应用css的绝对定位与相对定位的样式。复习巩固绝对定位与相对定位的表达方式以及它们各自的参考点。

　　３、“两种滤镜联合制作的文字”，我只举了一个例子。是mask滤镜与shadow滤镜的联合应用，其它滤镜的联合应用，自己试着制作一下。

　　４、“滤镜图片中添加滤镜文字”，是滤镜文字与滤镜图片的联合制作技巧，你可以再联合移动标签等内容，试着制作几篇文章观察一下，可能会制作出你想象不到的效果来。

　　５、应用滤镜的特殊效果制作的边框，特别有趣，你不妨试着制作几个不同滤镜效果的边框。

　　６、应用“滤镜的四种设置方法”，各制作一篇文章，学会在什么情况下，应该应用哪种设置方法。

代码入门教程(1)	代码入门教程(2)	代码入门教程(3)
代码入门教程(4)	代码入门教程(5)	代码入门教程(6)
代码入门教程(7)	代码入门教程(8)	代码入门教程(9)
代码入门教程(10)	代码入门教程(11)	代码入门教程(12)
代码入门教程(13)	代码入门教程(14)	代码入门教程(15)
代码入门教程(16)	代码入门教程(17)	代码入门教程(18)
代码入门教程(19)	代码入门教程(20)	代码入门教程(21)
代码入门教程(22)	代码入门教程(23)	代码入门教程(24)
代码入门教程(25)	代码入门教程(26)	代码入门教程(27)
代码入门教程(28)	代码入门教程(29)	代码入门教程(30)