免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
返回列表 發帖

my test zone

本帖最後由 rainbow 於 2016-3-30 22:17 編輯 备用交流用帖,勿删!





熱烈祝賀□□新網站開通





CSS3 里的属性 text-shadow ,在以Chrome为内核的浏览器里可以使用,在IE浏览器里不能使用(据说在IE10里可以使用了)。也没有可以完全兼容的方法。但是MicroSoft的滤镜系列里有一个filter:shadow 的效果有点类似。因此在代码里既写上 text-shadow , 又写上 filter:shadow ,可以起到“兼容”的效果。

您给我的代码就是利用这个原理,它还多用了一个 fliter:blur 模糊滤镜,试图效果更接近。但是我觉得可以省的。

上面的效果我是简化了代码,不仔细看在IE浏览器里和在Chrome里效果已经比较类似了

您原来的代码里主要是颜色代码没有设置一致,致使在两个浏览器里颜色不一样了。

现在文字的代码:

<div style="position:relative;font:bold 40pt/150% 'Trebuchet MS';height:80px;color:#ff6666;text-shadow:#800000 3px 3px 3px;">
 <span style="z-index:1;position:absolute;filter:shadow(color=#800000, direction=135, strength=4);left:27px;">熱烈祝賀□□新網站開通</span>
</div>

在第一行里(Chrome用的代码):

color:#ff6666;text-shadow:#800000 3px 3px 3px;

是文字颜色:#ff6666 两个浏览器里是一致的。后面的 #800000是阴影的颜色,3px是阴影的偏移量和模糊程度。

在第二行里(IE用的代码):

filter:shadow(color=#800000, direction=135, strength=4);

这里没有设置文字的颜色,因为在第一行里dia标签里已经设置了,有继承性的,因此不设置了。免得搞错。

color=#800000  是阴影颜色,direction=135 是阴影的方向:右下,与阴影强度 strength=4 相配合,起到上面text-shadow里的 3px 3px 3px的类似作用。

 

本帖最後由 rainbow 於 2017-3-27 23:24 編輯 交流试帖用,勿删!

鼠标指向空白处可显示後面的文字

隐藏文字:鼠标指向空白处可显示後面的文字


  1. <center><div style="border:5px #008800 ridge; width:550px; padding:20px; line-height:150%; font-size:16pt; color:#003399; font-weight:bold" align=left><span style="color:#ffffff" onmouseover="this.style.color='red'" onmouseout="this.style.color='#ffffff'"><font color=#003399>隐藏文字:</font>鼠标指向空白处可显示後面的文字</span></div></center>
複製代碼


================





==================

  1. <center>
  2. <div style="width:800px" align="center">
  3. <table cellspacing="40" cellpadding="0" width="100%" background="http://www.spiritisup.com/foreverstripdark.jpg">
  4. <tbody>
  5. <tr>
  6. <td width="100%">
  7. <div align="center">
  8. <table border="0" cellspacing="8" cellpadding="0" width="100%" background="http://www.spiritisup.com/foreverstriplight.jpg">
  9. <tbody>
  10. <tr>
  11. <td width="100%">
  12. <div align="center">
  13. <table cellspacing="15" cellpadding="0" width="100%" background="http://www.spiritisup.com/foreverstriplarge.jpg">
  14. <tbody>
  15. <tr>
  16. <td width="100%">
  17. <div align="center">
  18. <table border="0" cellspacing="0" cellpadding="20" width="100%" background="http://www.spiritisup.com/foreverbackground.jpg">
  19. <tbody>
  20. <tr>
  21. <td width="100%">
  22. <center>
  23. <div style="width:70%" align="center">
  24. <table border="0" cellspacing="0" cellpadding="0" width="100%">
  25. <tbody>
  26. <tr>
  27. <td width="10%">
  28. <p align="center"><img src="http://www.spiritisup.com/foreverheart.gif" /></p></td>
  29. <td valign="bottom" width="80%"><p align="center"><img src="http://www.spiritisup.com/forevertext.gif" /></p></td>
  30. <td width="10%"><p align="center"><img src="http://www.spiritisup.com/foreverheart.gif" /></p></td>
  31. </tr></tbody></table></div></center>
  32. <p align="center"><img style="width:500px" src="http://www.spiritisup.com/forevertop1.jpg" /></p>
  33. <center>
  34. <div style="width:90%" align="center">
  35. <table border="5" cellspacing="15" bordercolorlight="#101b1a" bordercolordark="#406865" cellpadding="0" width="100%" background="http://www.spiritisup.com/foreverbackground.jpg">
  36. <tbody>
  37. <tr>
  38. <td width="100%">
  39. <div align="center">
  40. <table border="5" bordercolorlight="#406865" bordercolordark="#101b1a" cellspacing="5" width="100%" background="http://www.spiritisup.com/foreverstripdark.jpg">
  41. <tbody>
  42. <tr>
  43. <td width="100%">
  44. <div align="center">
  45. <table border="0" cellspacing="10" cellpadding="0" width="100%" background="http://www.spiritisup.com/foreverstriplarge.jpg">
  46. <tbody>
  47. <tr>
  48. <td width="100%">
  49. <div align="center">
  50. <table border="0" cellspacing="0" cellpadding="0" width="100%" background="http://www.spiritisup.com/foreverbackground.jpg">
  51. <tbody>
  52. <tr>
  53. <td width="100%">
  54. <p align="center"><img style="filter:flipH" src="http://www.spiritisup.com/foreverdaisy.jpg" />&nbsp;<img src="http://www.spiritisup.com/foreverdaisy.jpg" /></p>
  55. </td></tr></tbody></table></div>
  56. </td></tr></tbody></table></div>
  57. </td></tr></tbody></table></div>
  58. </td></tr></tbody></table></div></center>
  59. <p align="center"><img src="http://www.spiritisup.com/foreverguestbookimage.jpg" /></p>
  60. <p align="center"><img src="http://www.spiritisup.com/foreverbar.jpg" /></p>
  61. </td></tr></tbody></table></div>
  62. </td></tr></tbody></table></div>
  63. </td></tr></tbody></table></div>
  64. </td></tr></tbody></table></div>
  65. <br><br>
複製代碼


=====================

forever綠色套裝
http://www.ladyjsdesign.com/WelcomeToAmberElisesGarden.htm

http://www.360doc.com/content/12/0926/16/8889415_238284808.shtml

http://yemaishuyin.web-32.com/Article.asp?id=1607043

http://www.ewa.bicom.pl/zyczenia/slub/slb5.htm

 



TOP

趣味英语三字经

本帖最後由 rainbow 於 2014-5-29 19:08 編輯

据知现在的martabak有多种多样,有甜的,还有放巧克力的,也许是迎合现在年轻人的爱好吧?就像现在的月饼,也有各种新品种,什么冰皮的、榴莲的、巧克力的……。时代在变,所有都会变,但我还是比较喜欢传统的那种味道。

以上显示出來的效果并没有使用表格(table)代码。只在代码 p 里设置了边框、背景色等参数制作的,比较简单,代码如下:

<p style="text-indent:50px; padding:30px; background-color:#008080; border:10px #ff3333 dotted; width:720px">
<span style="font-family:宋体; color:#ffffff; line-height:150%; font-weight:bold; font-size:24px">据知现在的martabak有多种多样,有甜的,还有放巧克力的,也许是迎合现在年轻人的爱好吧?就像现在的月饼,也有各种新品种,什么冰皮的、榴莲的、巧克力的……。时代在变,所有都会变,但我还是比较喜欢传统的那种味道。</span></p>

说明:
text-indent: 文字缩进
padding: 四周空位
background-color: 背景颜色
border:边框 (後面的参数为边框厚度 边框颜色和边框形状)
width: 背景颜色的宽度
align 文字位置设置(靠左、置中或靠右)
font-family: 字型
color: 文字颜色
line-height: 行距
font-weight:bold 粗体字
font-size: 字体大小



TOP

代碼缺一套table的關閉碼的效果

本帖最後由 rainbow 於 2015-1-7 13:39 編輯

代碼缺一套table的關閉碼的效果:
(可視寬度縮小一半,右側邊框空白;下面回複欄的頭像往右移了一個欄位)

 



TOP

TOP

返回列表