分类目录归档：网页制作

用JS在你的网页上显示当前时间

由 发表于 ┊2,089 PV
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
31
32
33
34
35
36
37
38
39
40
41
42
<font color="red"><b>
<script language="JavaScript">
<!--
tmpDate = new Date();
date = tmpDate.getDate();
month= tmpDate.getMonth() + 1 ;
myyear= tmpDate.getYear();
year=(myyear > 200) ? myyear : 1900 + myyear;

document.write(year);
document.write("年");
document.write(month);
document.write("月");
document.write(date);
document.write("日 ");

myArray=new Array(6);
myArray[0]="星期日"
myArray[1]="星期一"
myArray[2]="星期二"
myArray[3]="星期三"
myArray[4]="星期四"
myArray[5]="星期五"
myArray[6]="星期六"
weekday=tmpDate.getDay();
if (weekday==0 | weekday==6)
{
document.write(myArray[weekday])
}
else
{document.write(myArray[weekday])
};

hours = tmpDate.getHours();
minutes = tmpDate.getMinutes();
seconds = tmpDate.getSeconds();
times = "<font color=orange>" + ((hours >24) ? hours -12 :hours); times += ((minutes < 10) ? "<blink>:</blink>0" : "<blink>:</blink>") + minutes+"</font>";
times += (hours >= 12) ? "<b>PM</b>" : "<b>AM</b>";
document.write(times);
// -->
</script>
</b></font>

网站灰黑白色CSS滤镜代码 全国哀悼日

由 发表于 ┊1,617 PV

根据国务院文件，5.19-5.21为全国哀悼日，在此期间，全国和各驻外机构下半旗志哀，停止公共娱乐活动，外交部和我国驻外使领馆设立吊唁簿。5 月19日14时28分起，全国人民默哀3分钟，届时汽车、火车、舰船鸣笛，防空警报鸣响。并建议中国所有站 点更换为素装。国务院决定5月19日至21日为全国哀悼日，为方便站点哀悼，特提供css滤镜代码，以表哀悼。以下为全站CSS代码。

1
html { filter: gray; }

或者

1
html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

使用方法：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。建议全国站长动起来。为在地震中遇难的同胞哀悼。

　　如果网站没有使用CSS，可以在网页/模板的HEAD之间插入：

1
2
3
4
<style type="text/css">
<!--
html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
--></style>

一个网页链接的滑动效果

由 发表于 ┊2,334 PV

基于js和css，作者在其首页提供了DIY的工具。当鼠标经过链接的时候，有一个上下滑动的效果。
http://www.scrollovers.com

可以这样使用这个效果：
1、在网页中加入如下，可以把js下载下来，放到自己的空间里。

1
<script src="http://www.scrollovers.com/js/scrollovers.js" type="text/javascript"></script>

2、将链接形式修改成这样

1
<a href="http://www.hicode.org/wp-admin/[YOUR PAGE HERE]" TYPE="scrollover" class="scrollover">[YOUR TEXT HERE]</a>

3、添加这样的CSS，颜色自己修改。

1
2
3
4
<style>
a.scrollover { /* Default Colour/Styles here */ color: #557AFF; }
a.scrollover em:first-line { /* Rollover Colour/Styles here */ color: #FF5B3C; }
</style>

4、还可以修改js，达到你想要的效果。
scrollovers_ScrollSpeed 是控制速度的
scrollovers_ScrollDownOnMouseOver 是控制上滚还是下滚的
scrollovers_TypeName 如果想所有的链接都滚动，而不需要设置Type attrbiute的话，把这个变量的值改成空字符

收藏自：Hi,Code!

V2EX所用的CSS圆角代码

由 发表于 ┊2,318 PV

不支持IE浏览器，代码如下：

1
2
-moz-border-radius: 7px;
-webkit-border-radius: 7px;

单独控制四个角

1
2
3
4
-moz-border-radius-bottomleft:7px;
-moz-border-radius-bottomright:7px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;

如何让IE6-IE7-FF的CSS样式一致

由 发表于 ┊2,036 PV

现在主流的浏览器分别是：Internet Explorer 6， Internet Explorer 7和Firefox 2。这让我们在网站设计中不得不考虑如何使样式“crossover”。这里介绍一个较为简单的方法使样式的显示效果在上述三种浏览器中保持一致。

首先我们针对Firefox 2设计了如下的样式代码：

1
#MyDiv { margin : 10px 10px 10px 10px; }

然后针对Internet Explorer 6进行样式修改，使用如下的代码语句，该代码只能被 IE 6 识别：

1
2
/* IE6 Only */
* html #MyDiv { margin : 5px 5px 5px 5px; }

最后针对Internet Explorer 7进行如下样式修改，该代码也只能被 IE 7 识别：

1
2
/* IE7 Only */
*:first-child+html #MyDiv { margin : 2px 2px 2px 2px; }

通过上面的方法，你应该能够让你的设计样式更具通用性了。

转自Smartr.cn