直接下載看看
直接下載看看
被過(guò)濾廣告
源碼如下:
<table width="100%" border="1" bordercolor="#000000">
<tr bordercolor="#FFFFFF">
<td>表格邊線為1,線色為黑,行線色為白。</td>
</tr>
</table>
<p>
<table width="100%" border="0" cellspacing="1" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF">表格邊線為0,間距為1,背景色為黑,行背景色為白。</td>
</tr>
</table>
2. 立體表格
源碼如下:
<table border=1 cellspacing=0 width=100% bordercolorlight=#333333 bordercolordark=#efefef>
<tr bgcolor=#cccccc>
<td>it365cn</td>
<td>it365cn</td>
<td>it365cn</td>
<td>it365cn</td>
</tr>
<tr bgcolor=#cccccc>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</td>
<td>cnbruce</td>
</tr>
</table>
<center>表格邊線為1,間隔為0,左上為#333333,右下為#efefef,行背景色為#cccccc
源碼如下:
原圖:
<table cellpadding=0 cellspacing=0 border=0 width=282 align=center>
<tr height=1>
<td rowspan=4 width=1></td>
<td rowspan=3 width=1></td>
<td rowspan=2 width=1></td>
<td width=2></td>
<td bgcolor=#43B5C9></td>
<td width=2></td>
<td rowspan=2 width=1></td>
<td rowspan=3 width=1></td>
<td rowspan=4 width=1></td>
</tr>
<tr height=1>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=1>
<td bgcolor=#43B5C9></td>
<td colspan=3 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=2>
<td bgcolor=#43B5C9></td>
<td colspan=5 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
</table>
<p>放大
<table cellpadding=0 cellspacing=0 border=1 width=282 align=center>
<tr height=10>
<td rowspan=4 width=10></td>
<td rowspan=3 width=10></td>
<td rowspan=2 width=10></td>
<td width=20></td>
<td bgcolor=#43B5C9></td>
<td width=20></td>
<td rowspan=2 width=10></td>
<td rowspan=3 width=10></td>
<td rowspan=4 width=10></td>
</tr>
<tr height=10>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=10>
<td bgcolor=#43B5C9></td>
<td colspan=3 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
<tr height=20>
<td bgcolor=#43B5C9></td>
<td colspan=5 bgcolor=#43B5C9></td>
<td bgcolor=#43B5C9></td>
</tr>
</table>
4. 虛線邊框表格
源碼如下:
<style type="text/css">
.tb{BORDER-BOTTOM: #000000 1px dotted;BORDER-top: #000000 1px dotted;BORDER-LEFT:
#000000 1px dotted;BORDER-RIGHT: #000000 1px dotted;}
</style>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="tb"><center>www.blueidea.com</td>
</tr>
</table>
<p>
虛線直線1
<hr size=1 style="border:1px dotted #001403;">
虛線直線2
<p size=1 style="border:1px dotted #001403;">
5. 分類(lèi)型表格
源碼如下:
<fieldset>
<legend>item</legend>
content
</fieldset>
6. 變色的單元格1,通過(guò)a:hover做
源碼如下:
<style>
a:link,a:visited,a:hover
{width:100%;text-decoration:none;font-family:verdana;font-size:10px;color:white}
a:hover{background:#0099ff;color:black}
td{background:#3366cc;color:white;padding:0px}
</style>
<TABLE width=100% cellspacing=1 bgcolor=black >
<TR>
<TD><a href="#">Blueidea
<TD><a href="#">.com
<TR>
<TD><a href="#">CNBruce
<TD><a href="#">.com
</TABLE>
源碼如下:
<style type="text/css">
.aa
{ background-color:#0000ff; color:#ff0000;filter: alpha(opacity=50)}
.bb
{ background-color:#3366cc; color:#ffffff}
</style>
<table width="100%">
<tr>
<td onmouseover="this.className='aa'" onmouseout="this.className='bb'"
class="bb"><center><b>cnbruce</td>
</tr>
</table>
8. 變色的單元格3,通過(guò)mouse事件做.有點(diǎn)微軟的味道
源碼如下:
<table width="100%" border="1" cellpadding="3" cellspacing="0"
bordercolor="#efefef" bgcolor="#efefef">
<tr>
<td onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'";
onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'"><div align="left">
Blueidea</div></td>
</tr>
<tr>
<td
onMouseOut="this.bgColor='#efefef';this.borderColor='#efefef'"; onMouseOver="this.bgColor='#cccccc'; this.borderColor='#000033'">
cnbruce</td>
</tr>
</table>
9. 透明表格
<table bgcolor=#ececec style="filter:alpha(opacity=50)" width=200 height=100 border=0>
<tr><td><center>cnbruce</td></tr>
</table>
10. 表格邊框顯示外陰影
源碼如下:
<table align=center width=200 height=100 bgcolor=#f3f3f3
style="filter:progid:DXImageTransform.Microsoft.Shadow
(Color=#333333,Direction=120,strength=5)">
<tr>
<td><center>www.cnbruce.com</td>
</tr>
</table>
11. VML代碼實(shí)現(xiàn)的圓角表格
(1).
源碼如下:
<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
<v:RoundRect style="position:relative;width:150;height:240px">
<v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
<v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
</v:RoundRect>
</body>
</html>
(2).
源碼如下:
<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
<v:RoundRect style="position:relative;width:150;height:240px">
<v:path textpathok="true" />
<v:textpath on="true" string="cnbrucecnbrucecnbrucecnbrucecnbruc
ecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbrucecnbruce" />
<v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
<v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
</v:RoundRect>
</body>
</html>
(3).
源碼如下:
<html xmlns:v>
<style>
v\:*{behavior:url(#default#VML)}
</style>
<body>
<v:RoundRect style="position:relative;width:150;height:240px" arcsize=0.5>
<v:shadow on="T" type="single" color="#b3b3b3" offset="3px,3px"/>
<v:TextBox style="font-size:10.2pt;">VML</v:TextBox>
</v:RoundRect>
</body>
</html>
target="_top"或target="_parent"
如何讓PNG格式的透明圖片在IE6下正常顯示
原文: Make PNG transparency work in Internet Explorer
翻譯:PARAN
初學(xué)網(wǎng)頁(yè)設(shè)計(jì)的朋友可能都會(huì)碰到這樣的問(wèn)題,需要在網(wǎng)頁(yè)插入一透明圖片。如果使用Gif格式的透明圖片,可能像素低,顯示不夠清晰。如果用PNG格式透明圖片,在IE6下將達(dá)不到透明效果,而是灰色的背景。這會(huì)讓你的網(wǎng)頁(yè)看上去非常丑陋,任何一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師都不想出現(xiàn)這樣的問(wèn)題,下面是一個(gè)小小的教程,教你如何讓PNG格式的透明圖片在IE6下同樣能夠正常顯示。
我們先來(lái)看看在透明PNG圖片在Mozilla Firefox和Internet Explorer 6中的顯示差異:
Mozilla Firefox
PNG透明圖片在Mozilla Firefox下顯示良好。
Internet Explorer 6
在IE6中這張PNG圖片的背景卻是一片灰白,真的很難看,除非你的網(wǎng)頁(yè)背景色就是一片灰白:)
解決方法
首先,為你的圖片外套一個(gè)DIV層,像這樣:
<body> <div class=”flower”></div> </body>
然后,在CSS文件里面寫(xiě)入:
body {background-color:#000} div.flower {background:url(flower-transparent.png) no-repeat; height:100px; width:100px}
呃,這是指Mozilla Firefox,要讓其在IE6下面正常顯示,你應(yīng)該在<head>和</head>之間寫(xiě)入:
<!–[if gte IE 5]> <style type=”text/css”> div.flower { background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’); } </style> <![endif]–>
這樣,就OK了,下面是加了上面代碼后的IE顯示圖:
如果還是不太明白的話,你可以下載演示看看.
注意如果是這樣會(huì)使得圖片的鏈接失效。
如果是在頁(yè)面上直接顯示png圖片的話,可以直接插入圖片。如此演示
如果要去掉圖片鏈接上的邊框,在<imag>中加入border=0 即可

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

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

2 import java.util.*;
3
4 public class JspCalendar {
5 Calendar calendar = null;
6
7 public JspCalendar() {
8 calendar = Calendar.getInstance();
9 Date trialTime = new Date();
10 calendar.setTime(trialTime);
11 }
12
13 public int getYear() {
14 return calendar.get(Calendar.YEAR);
15 }
16
17 public String getMonth() {
18 int m = getMonthInt();
19 String[] months = new String[] { "January", "February", "March",
20 "April", "May", "June", "July", "August", "September",
21 "October", "November", "December" };
22 if (m > 12)
23 return "Unknown to Man";
24
25 return months[m - 1];
26
27 }
28
29 public String getDay() {
30 int x = getDayOfWeek();
31 String[] days = new String[] { "Sunday", "Monday", "Tuesday",
32 "Wednesday", "Thursday", "Friday", "Saturday" };
33
34 if (x > 7)
35 return "Unknown to Man";
36
37 return days[x - 1];
38
39 }
40
41 public int getMonthInt() {
42 return 1 + calendar.get(Calendar.MONTH);
43 }
44
45 public String getDate() {
46 return getMonthInt() + "/" + getDayOfMonth() + "/" + getYear();
47
48 }
49
50 public String getTime() {
51 return getHour() + ":" + getMinute() + ":" + getSecond();
52 }
53
54 public int getDayOfMonth() {
55 return calendar.get(Calendar.DAY_OF_MONTH);
56 }
57
58 public int getDayOfYear() {
59 return calendar.get(Calendar.DAY_OF_YEAR);
60 }
61
62 public int getWeekOfYear() {
63 return calendar.get(Calendar.WEEK_OF_YEAR);
64 }
65
66 public int getWeekOfMonth() {
67 return calendar.get(Calendar.WEEK_OF_MONTH);
68 }
69
70 public int getDayOfWeek() {
71 return calendar.get(Calendar.DAY_OF_WEEK);
72 }
73
74 public int getHour() {
75 return calendar.get(Calendar.HOUR_OF_DAY);
76 }
77
78 public int getMinute() {
79 return calendar.get(Calendar.MINUTE);
80 }
81
82 public int getSecond() {
83 return calendar.get(Calendar.SECOND);
84 }
85
86 public static void main(String args[]) {
87 JspCalendar db = new JspCalendar();
88 p("date: " + db.getDayOfMonth());
89 p("year: " + db.getYear());
90 p("month: " + db.getMonth());
91 p("time: " + db.getTime());
92 p("date: " + db.getDate());
93 p("Day: " + db.getDay());
94 p("DayOfYear: " + db.getDayOfYear());
95 p("WeekOfYear: " + db.getWeekOfYear());
96 p("era: " + db.getEra());
97 p("ampm: " + db.getAMPM());
98 p("DST: " + db.getDSTOffset());
99 p("ZONE Offset: " + db.getZoneOffset());
100 p("TIMEZONE: " + db.getUSTimeZone());
101 }
102
103 private static void p(String x) {
104 System.out.println(x);
105 }
106
107 public int getEra() {
108 return calendar.get(Calendar.ERA);
109 }
110
111 public String getUSTimeZone() {
112 String[] zones = new String[] { "Hawaii", "Alaskan", "Pacific",
113 "Mountain", "Central", "Eastern" };
114
115 return zones[10 + getZoneOffset()];
116 }
117
118 public int getZoneOffset() {
119 return calendar.get(Calendar.ZONE_OFFSET) / (60 * 60 * 1000);
120 }
121
122 public int getDSTOffset() {
123 return calendar.get(Calendar.DST_OFFSET) / (60 * 60 * 1000);
124 }
125
126 public int getAMPM() {
127 return calendar.get(Calendar.AM_PM);
128 }
129 }
130
2.import java.util.Date;
1.public class Tmp {
1.public static void main( String argv[] ) throws Exception {
1.long DAY = 24L * 60L * 60L * 1000L;
1.SimpleDateFormat df = new SimpleDateFormat( "MM.dd.yyyy" );
2.Date d1 = df.parse( "01.01.2001" );
3.Date d2 = df.parse( "01.03.2001" );
4.System.out.println( "The number days between:" );
5.System.out.println( d1 );
6.System.out.println( "and:" );
7.System.out.println( d2 );
8.System.out.println( "is: " + (( d2.getTime() - d1.getTime() ) / DAY ));
9.}
10.}
一日,漫無(wú)目的的瀏覽css手冊(cè),發(fā)現(xiàn)了text-overflow屬性可以截取字符串,就來(lái)用用,用了n次都不成功,懷疑需要與其他屬性連用,就找類(lèi)似屬性進(jìn)行組合使用,最后發(fā)現(xiàn)需要和overflow連用。
2、舉例:
<div style="overflow:hidden;width:200px;text-overflow:ellipsis">打開(kāi)抗敵素可打開(kāi)撒開(kāi)綠燈撒愷撒棵擴(kuò)大上愛(ài)迪生啊撒大可</div>
<a href="http://www.163.com" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.163.com');return(false);" style="behavior: url(#default#homepage)" >設(shè)置為我的首頁(yè)</a>
加入收藏夾
·<A href="javascript:window.external.addFavorite('http://www.163.com','網(wǎng)易科技')" target="_self">加入到我的收藏夾</A>
在WEB開(kāi)發(fā)中,城市-省份是和日歷一樣需要我們特別處理的用戶(hù)信息,我們希望自己的程序能夠更人性化一些,既方便網(wǎng)友的輸入,又盡可能的采集到合法有效的信息,這個(gè)時(shí)候就需要借助一些插件。
城市輸入插件我先后用過(guò)很多款了,因?yàn)樯婕岸?jí)聯(lián)動(dòng),調(diào)用一般都比較復(fù)雜,這里推薦一個(gè)非常簡(jiǎn)潔的工具,只需要一個(gè)JS文件,HTML頁(yè)面的代碼也比較干凈:
演示地址:這里
在北京賣(mài)場(chǎng)的活動(dòng)中測(cè)試通過(guò),不存在跨域等問(wèn)題。
另外,也順便測(cè)試了快樂(lè)笛子(site:http://www.happyshow.org/)編寫(xiě)的日歷輸入插件,共同的特點(diǎn)就是簡(jiǎn)潔,但功能一點(diǎn)也沒(méi)有縮水,特別值得推薦的是它可以快捷輸入年份與月份,比如,你要輸入12-23-1994,只要雙擊年份和月份,就可以從下拉列表中選擇1994和12,而不用一頁(yè)一頁(yè)的翻
js文件可在我的文件中下載