免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
Board logo

標題: my test zone [打印本頁]
作者: rainbow    時間: 2013-9-26 16:16     標題: 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    時間: 2013-9-29 12:23

本帖最後由 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%">
  8. <div align="center">
  9. <table border="0" cellspacing="8" cellpadding="0" width="100%" background="http://www.spiritisup.com/foreverstriplight.jpg">
  10. <tbody>
  11. <tr>
  12. <td width="100%">
  14. <div align="center">
  15. <table cellspacing="15" cellpadding="0" width="100%" background="http://www.spiritisup.com/foreverstriplarge.jpg">
  16. <tbody>
  17. <tr>
  18. <td width="100%">
  20. <div align="center">
  21. <table border="0" cellspacing="0" cellpadding="20" width="100%" background="http://www.spiritisup.com/foreverbackground.jpg">
  22. <tbody>
  23. <tr>
  24. <td width="100%">
  26. <center>
  27. <div style="width:70%" align="center">
  28. <table border="0" cellspacing="0" cellpadding="0" width="100%">
  29. <tbody>
  30. <tr>
  31. <td width="10%">
  32. <p align="center"><img src="http://www.spiritisup.com/foreverheart.gif" /></p></td>
  33. <td valign="bottom" width="80%"><p align="center"><img src="http://www.spiritisup.com/forevertext.gif" /></p></td>
  34. <td width="10%"><p align="center"><img src="http://www.spiritisup.com/foreverheart.gif" /></p></td>
  35. </tr></tbody></table></div></center>
  37. <p align="center"><img style="width:500px" src="http://www.spiritisup.com/forevertop1.jpg" /></p>
  39. <center>
  40. <div style="width:90%" align="center">
  41. <table border="5" cellspacing="15" bordercolorlight="#101b1a" bordercolordark="#406865" cellpadding="0" width="100%" background="http://www.spiritisup.com/foreverbackground.jpg">
  42. <tbody>
  43. <tr>
  44. <td width="100%">
  46. <div align="center">
  47. <table border="5" bordercolorlight="#406865" bordercolordark="#101b1a" cellspacing="5" width="100%" background="http://www.spiritisup.com/foreverstripdark.jpg">
  48. <tbody>
  49. <tr>
  50. <td width="100%">
  52. <div align="center">
  53. <table border="0" cellspacing="10" cellpadding="0" width="100%" background="http://www.spiritisup.com/foreverstriplarge.jpg">
  54. <tbody>
  55. <tr>
  56. <td width="100%">
  58. <div align="center">
  59. <table border="0" cellspacing="0" cellpadding="0" width="100%" background="http://www.spiritisup.com/foreverbackground.jpg">
  60. <tbody>
  61. <tr>
  62. <td width="100%">
  63. <p align="center"><img style="filter:flipH" src="http://www.spiritisup.com/foreverdaisy.jpg" />&nbsp;<img src="http://www.spiritisup.com/foreverdaisy.jpg" /></p>
  64. </td></tr></tbody></table></div>
  65. </td></tr></tbody></table></div>
  66. </td></tr></tbody></table></div>
  67. </td></tr></tbody></table></div></center>
  69. <p align="center"><img src="http://www.spiritisup.com/foreverguestbookimage.jpg" /></p>
  71. <p align="center"><img src="http://www.spiritisup.com/foreverbar.jpg" /></p>
  72. </td></tr></tbody></table></div>
  73. </td></tr></tbody></table></div>
  74. </td></tr></tbody></table></div>
  75. </td></tr></tbody></table></div>
  76. <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

 



作者: rainbow    時間: 2014-4-5 20:36     標題: 趣味英语三字经

本帖最後由 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: 字体大小



作者: rainbow    時間: 2015-1-1 15:36     標題: 代碼缺一套table的關閉碼的效果

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

代碼缺一套table的關閉碼的效果：
（可視寬度縮小一半，右側邊框空白；下面回複欄的頭像往右移了一個欄位）

 



作者: rainbow    時間: 2015-7-20 10:47





歡迎光臨 老校友 (http://boanson.orzweb.net/) Powered by Discuz! 7.2