当前位置 > 首页 >

仿校内新鲜事关闭效果

十月 13, 2009 作者：  

2 条评论

校内网在当今大学生中一定都不陌生，我也是校内网的忠实用户。虽然我比较懒，在里边不太活跃，但感觉校内的许多细节做的还是挺人性化的。

今天就做一个“仿校内新鲜事”效果，主要是可以即时删除自己不想看的新鲜事。这里用两种方法实现，

先上效果图：

仿校内新鲜事

方法一：

主要用到的Js 阅读全文

标签：, , 分类：个人随笔

很有用的Xhtml标签

十月 11, 2009 作者：  

抢个沙发先

在经典论坛上看到一篇“不常用却很有用的标签 ”的帖子，感觉写得不错，于是就从网上搜集了一下相关资料，来把关于Xhtml标签的相关使用知识整理一下。

首先说一下推荐使用的XHTML标签：

[coolcode lang="css" linenum="on"]
html | head | title | body | a | abbr | acronym | address | area | base | blockquote | br | button | caption | cite | code | col | colgroup | dd | del | dfn | div | dl | dt | em | form | h1, h2, … h6 | iframe | img | input | ins | kbd | label | legend | li | link | map | meta | noscript | object | ol | optgroup | option | p | param | pre | q | samp | script | select | span | strong | style | sub | sup | table | td | textarea | th | thead | tr | tt | ul | var[/coolcode]

接下来是W3C不推荐用的标签：

禁用：

[coolcode lang="css" linenum="on"]b | big | hr | i | small | sub | sup | tt[/coolcode]

不用：

[coolcode lang="css" linenum="on"]basefont | center | dir | font | isindex | menu | s | strike | u[/coolcode]

不支持及无损块的：

[coolcode lang="css" linenum="on"]tfoot [/coolcode]

常用的我就不说了，因为大家都知道，这里主要说的是不常用的

<base>

定义和用法

<base> 标签为页面上的所有链接规定默认地址或默认目标。

通常情况下，浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。

使用 <base>标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

注释：

<base> 标签必须位于 head 元素内部。

属性：

href=”URL”、target=”_blank/_self/_top/_parent/framename”

应用实例：

提示：你可以先修改部分代码再运行。

未完待续…

标签：, 分类：个人随笔

javascript商品提示效果

十月 10, 2009 作者：  

抢个沙发先

今天写一个商品展示信息提示的js小例子，就是当鼠标放到商品图片上的时候出现一个半透明层，层上写商品的相关信息。

用到的javascript代码如下：

阅读全文

标签：, , 分类：个人随笔

一步一步学习js，仿火星首页“今日推荐”

九月 28, 2009 作者：  

抢个沙发先

看了《javascript高级程序设计》有一个多月了，感觉应该用js写个系统点的例子了，正好今天不太忙，就用js仿一下火星首页“今日推荐”模块吧。

样子如图所示：

hxsd

JavaScript代码如下：

Download script.js
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

var n = 0;
var imgs = new Array(9);
var path = "img/";
imgs[0]=path + "00.jpg";
imgs[1]=path + "01.jpg";
imgs[2]=path + "02.jpg";
imgs[3]=path + "03.jpg";
imgs[4]=path + "04.jpg";
imgs[5]=path + "05.jpg";
imgs[6]=path + "06.jpg";
imgs[7]=path + "07.jpg";
imgs[8]=path + "08.jpg";
function $(id){
	return typeof id == 'string' ? document.getElementById(id) : id;
}
var timer;
function showPic(){
	var myimg = $("myimg");
	var imglink = $("imglink");
	myimg.setAttribute("src",imgs[n]);
	var myul = $("myul").getElementsByTagName("li");
	var mylink = $("myul").getElementsByTagName("a");
	var links = mylink[n].getAttribute("href");
	var titles = mylink[n].getAttribute("title");
	imglink.setAttribute("href",links);
	imglink.setAttribute("alt",titles);
	for(i=0;i<myul.length;i++){
		myul[i].className = "none";
		mylink[i].className = "none";
	}
	myul[n].className = "hover";
	mylink[n].className = "hover";
	n++;
	if(n == 9) n = 0;
}
function shownow(){
	clearInterval(timer);showPic();
}
function showall(){
	timer = setInterval("showPic()",3000);
}
function init(){
	var mylink = $("myul").getElementsByTagName("a");
	for(var i = 0, iLen = mylink.length ; i < iLen ; i++)
	{
		mylink[i].loc = i;
		mylink[i].onmouseover = function(){
			n = this.loc;
			shownow();
		}
		mylink[i].onmouseout = function(){
		        showall();
		}
	}
}
timer = setInterval("showPic()",3000);
init();

全部代码如下：

（点击“运行”直接查看效果）

提示：你可以先修改部分代码再运行。

例子到此结束，在写的过程中麻烦了一位同事（兼js“老师”）帮助，很感谢他！

标签：, , , 分类：个人随笔

一步一步学习js，获取表单值

九月 27, 2009 作者：  

抢个沙发先

获取表单值,并输出在相应的标签中

Download script.js
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
43
44
45
46
47
48
49
50
51

function $(id){
	return document.getElementById(id)
}
var fm = $("fm");
var Show = $("Show");
var Show2 = $("Show2");
var skill = $("skill");
function OutputText(){
	if(fm.content.value!=""){
		Show.innerHTML="您输入的内容是：<span>"+fm.content.value+"</span>";
	}else{
		Show.innerHTML="<em>您没有输入任何内容！</em>";
	}
}
var len = fm.skills.length;
function checkskill(){
	var bool=0;
	var thischecked = new Array();
	for (var i=0; i<len; i++){
		var e=fm.skills[i];
		if (e.checked){
			thischecked=thischecked+e.value+" ";
			Show2.innerHTML="您擅长:<span>"+thischecked+"</span>";
			bool++;
	   }
	}
	if(bool==0){
		Show2.innerHTML="<em>您没选择</em>";
	}
}
 
function checkAll() {
	for (var j = 0; j <= len; j++) {
		var e=fm.skills[j];
		if (e.checked == false) e.checked = true;
   }
}
 
function uncheckAll() {
	for (var j = 0; j <= len; j++) {
		var e=fm.skills[j];
		if (e.checked == true) e.checked = false;
   }
}
 
function switchAll() {
	for (var j = 0; j <= len; j++) {
		var e=fm.skills[j];
		e.checked = !e.checked;
	}
}

提示：你可以先修改部分代码再运行。

标签：, 分类：个人随笔

一步一步学习js

九月 27, 2009 作者：  

抢个沙发先

以前做网页用到js都是从网上找类似的代码效果改一下，或借助一些框架。结果做了这么长时间，对js的了解还是很肤浅。早就买了《JavaScript高级程序设计》，当时只是潦草翻过一遍，仅限于能看懂一些别人的代码，自己写还是无从下手。

老这样可不行呀，于是下定决心，重新从 阅读全文

标签：, 分类：个人随笔

探究IE6的几个奇怪的问题（一）

九月 24, 2009 作者：  

抢个沙发先

前两天在做页面时发现了一个奇怪的问题，就是IE6在写列表时，如果给ul定了padding-top值以后，当li换到下一行时，ul上的padding-top值就会在第二行的li上生效，一开始我还以为在IE6中li继承了ul的padding之呢，但是不应该呀！

可能文字表达不好，直接上例子和截图吧。

问题的 阅读全文

标签：, , , 分类：个人随笔

第一次见用html5写的博客

九月 3, 2009 作者：  

抢个沙发先

 

今天看到一个用HTML5写的博客，查看源代码，那华丽的html5结构，

html5

div标签被更加语义化的header、nav、section、footer所代替，减少了定义class的麻烦，明确了结构图，节省了代码，让人一看感觉很爽。

更强的是这位大哥屏蔽IE，在IE下只能看到

ie

（可能是因为IE对html5 阅读全文

标签：, 分类：个人随笔

你是一个职业的页面重构者吗?

七月 19, 2009 作者：  

抢个沙发先

做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着 阅读全文

标签：, 分类：个人随笔

Web可用性设计的247条指导方针（下）

七月 19, 2009 作者：  

抢个沙发先

译序：
Userfocus
是英国一家专门从事网站可用性设计的咨询培训公司。它为我们分享了247条Web可用性设计的指导方针，并把它们清晰的分为六个大类：首页可用性设计、任务导向、导航和信息架构、表单和数据输入、可信度、写作和内容质量、页面布局和视觉设计、搜索可用性、 阅读全文

标签：, 分类：个人随笔

下一页 »