网站制作

在Web编码中，CSS默认应用的Web字体是有限的，虽然在新版本的CSS3，我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体，但多数情况下，考虑各个因素的影响我们还是在尽量充分利用这些默认调用的字体实现CSS的编写，这里整理了19个Web安全字体，让你无需任何顾虑的情况下畅快使用。
更多 >

前台, 字体

ime-mode:disabled css实现关闭文本框输入法

十二 23rd

由Diki发表在网站制作

没有评论

当表单需要提交纯数字时，常常会遇到用户输入全角字符的问题。就是在后面增加了，请输入半角数字的提示效果也不会很好，因为很多用户不知道什么是全角半角，都是无意中开启了全角状态。我们在平时填写表单的时候也会这样，上个文本框是输入中文，到下个要输入英文，就要来回切换输入法，极容易出现全角验证不通过，还很麻烦。

路人甲：用js全角转半角不就可以了？

这个当然可以，不过其实用css就可以了：ime-mode:disabled。在群里问了一下很多人都不用这个css属性，测试了下其实挺好用的（省去了用户切换输入法的麻烦还规避了用户容易输错数字的错误，不用白不用），看一个简单的例子：
更多 >

css

不常用却很有用的标签

十二 4th

由Diki发表在网站制作

没有评论

Xhtml有很多不常用却很有用的标签。有的能事半功倍，有的能改进语义，有的则能提高易用性，我总结了一些，总结的原则是有用而且能用，就是大多数浏览器得支持，否则就不算“上上签”了。只能望“签”兴叹又有什么用呢？

更多 >

前台, 标签

Select美化

十一 5th

由Diki发表在网站制作

没有评论

收藏一段代码
来源蓝色理想论坛http://bbs.blueidea.com/thread-2893396-1-1.html

<br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<meta http-equiv="Content-Language" content="zh-CN" /></p>
<style type="text/css">
* { margin:0; padding:0; }
body { margin:50px; }
.iDiv {
	position:absolute;
	height:20px;
	font-size:12px;
	color:#333;
	line-height:20px;
	text-indent:4px;
	vertical-align:middle;
	border:1px solid #aaa;
	cursor:default;
	background:url(<a href="http://www.zbw123.com/webmaster/09/images/sel" target="_blank" rel="external">http://www.zbw123.com/webmaster/09/images/sel</a>ect_bg.gif) no-repeat 100% 0;
}
.iDiv_over { color:#f96; background-position:100% 100%; }
.iDiv_out { color:#333; background-position:100% 0; }
.cDiv {
	position:absolute;
	moz-user-select:none;
	border:1px solid silver;
	cursor:default;
	background:#f7f7f7;
	overflow:auto;
	z-index:1;
}
.cDiv ul {
	font-size:12px;
	listStyle:none;
	margin:0;
	padding:0;
}
.cDiv ul li {
	height:20px;
	line-height:20px;
	text-indent:4px;
}
</style>
<p><script>
function $() {
	return document.getElementById(arguments[0]);
}
//取得外部class的属性值
function getCurrentStyle(o) {
	return o.currentStyle||document.defaultView.getComputedStyle(o,null);
}
var SetAllSelects = {
	Offset:function(e) {
		var t = e.offsetTop;
		var l = e.offsetLeft;
		var w = e.offsetWidth;
		var h = e.offsetHeight;
		while(e = e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; }
		return {top:t, left:l, width:w,	height:h};
	},
	setCreated:function(obj,status) { //设置属性
		obj.setAttribute("childCreated",status);
	},
	getCreated:function(obj) { //获取属性
		var status = obj.getAttribute("childCreated");
		if(status == null) { status = ""; }
		return status;
	},
	setSelectStyle:function(obj,idnum,showHeight) {
		if(obj.id == null || obj.id == "") { obj.id = "selectID_"+idnum; }
		var offset = this.Offset(obj);
		obj.style.visibility = "hidden";
		var mainDiv = document.createElement("div");
		var iDiv = document.createElement("div");
		var js_select_;
		var _this = this;
		iDiv.className = "iDiv";
		iDiv.id = js_select_+obj.id;
		iDiv.style.width = offset.width + "px";
		iDiv.style.top = offset.top + "px";
		iDiv.style.left = offset.left + "px";
		this.setCreated(iDiv,"");
		mainDiv.appendChild(iDiv);
		var tValue = obj.options[obj.selectedIndex].innerHTML;
		iDiv.innerHTML = tValue;
		iDiv.onmouseover = function() { iDiv.className = "iDiv iDiv_over"; }
		iDiv.onmouseout = function() { iDiv.className = "iDiv iDiv_out"; }
		iDiv.onclick = function() {
			var created = _this.getCreated(this);
			if (created != "") {
				if (created == "open") {
					this.nextSibling.style.display = "none";
					_this.setCreated(this,"close");
				}
				else {
					_this.setCreated(this,"open");
					var arrLiObj = this.nextSibling.getElementsByTagName("li");
					var selOjbIndex = 0;
					for(var i=0;i<arrliobj .length;i++) {
						var status = arrLiObj[i].getAttribute("liSelected");
						if(status == null) { status = ""; }
						if(status == "selected") { selOjbIndex = i; break; }
					}
					arrLiObj[selOjbIndex].style.background = "#fff";
					arrLiObj[selOjbIndex].style.color = "#000";
					this.nextSibling.style.display = "block";
				}
			}
			else {
				_this.setCreated(this,"open");
				var cDiv = document.createElement("div");
				cDiv.className = "cDiv";
				cDiv.style.width = offset.width + "px";
				cDiv.style.height = obj.options.length * 20 + "px";
				if(parseInt(cDiv.style.height)>showHeight) {
					cDiv.style.height = showHeight + "px";
				}
				cDiv.style.top = (offset.top+parseInt(getCurrentStyle(this).height)+1) + "px";
				cDiv.style.left = offset.left + "px";
				cDiv.onselectstart = function() {return false;};
				var uUl = document.createElement("ul");
				cDiv.appendChild(uUl);
				mainDiv.appendChild(cDiv);
				for (var i=0;i<obj .options.length;i++) {
					var lLi = document.createElement("li");
					lLi.id = obj.options[i].value;
					lLi.innerHTML = obj.options[i].innerHTML;
					lLi.sValue = obj.options[i].value;
					uUl.appendChild(lLi);
				}
				var liObj = uUl.getElementsByTagName("li");
				if(liObj.length>0) {
					for (var j=0;j</obj><obj .options.length;j++) {
						liObj[j].onmouseover = function() {
							var arrLiObj = this.parentNode.getElementsByTagName("li");
							for(var i=0;i<arrLiObj.length;i++) {
								var status = "";
								var _background = "#ccc";
								var _color = "#fff";
								if(arrLiObj[i] != this) {
									_background = "#fff";
									_color = "#000";
									status = "selected";
								}
								arrLiObj[i].style.background = _background;
								arrLiObj[i].style.color = _color;
								arrLiObj[i].setAttribute("liSelected",status);
							}
						}
						liObj[j].onclick = function() {
							obj.options.length = 0;
							obj.options[0] = new Option(this.innerHTML,this.sValue);
							this.parentNode.parentNode.style.display = "none";
							_this.setCreated(this.parentNode.parentNode.previousSibling,"close");
							iDiv.innerHTML = this.innerHTML;
						};
						liObj[0].style.background = "#ccc";
						liObj[0].style.color = "#fff";
						liObj[0].setAttribute("liSelected","selected");
					}
				}
			}
		}
		document.body.appendChild(mainDiv);
	},
	setAllSelectStyle:function() {
		var s = document.getElementsByTagName("select");
		for (var i=0; i<s.length; i++) {
			if(s[i].className == "select") {
				this.setSelectStyle(s[i],i,200);
			}
		}
	}
}
document.onclick = function(e) {
	e = e || window.event;
	var target = e.target || event.srcElement;
	var s = document.getElementsByTagName("select");
	var js_select_;
	for (var i=0; i<s.length; i++) {
		if(s[i].className == "select") {
			var objdivtmp = $(js_select_+s[i].id);
			var created = SetAllSelects.getCreated(objdivtmp);
			if (created == "open") {
				if(target != objdivtmp) {
					objdivtmp.nextSibling.style.display = "none";
					SetAllSelects.setCreated(objdivtmp,"close");
				}
			}
		}
	}
}
window.onload = function() {
	SetAllSelects.setAllSelectStyle();
}
</script><br />
</obj></arrliobj></script></head><br />
<body></p>
<form>
<select>
<option>这一只不需要美化</option>
<option>选择1_1</option>
<option>选择1_2</option>
</select>
<p>   </p>
<select class="select">
<option>要美化的就加class</option>
<option>选择2_1</option>
<option>选择2_22_22_22_2</option>
<option>选择2_22_22_22_3</option>
</select>
<p></p>
<select class="select">
<option value="3_1">拿这一只来证明取值和取文字都没有问题</option>
<option value="3_2">选择3_22_22_22_2</option>
<option value="3_3">选择3_22_22_22_3</option>
<option value="3_4">选择3_22_22_22_4</option>
<option value="3_5">选择3_22_22_22_5</option>
<option value="3_6">选择3_22_22_22_6</option>
<option value="3_7">选择3_22_22_22_7</option>
<option value="3_8">选择3_22_22_22_8</option>
<option value="3_9">选择3_22_22_22_9</option>
<option value="3_10">选择3_22_22_22_10</option>
<option value="3_11">选择3_22_22_22_11</option>
<option value="3_12">选择3_22_22_22_12</option>
<option value="3_13">选择3_22_22_22_13</option>
<option value="3_14">选择3_22_22_22_14</option>
<option value="3_15">选择3_22_22_22_15</option>
<option value="3_16">选择3_22_22_22_16</option>
</select>
</form>
<p><script>
function getValue() {
	var kk = document.getElementsByTagName('select')[2];
	return kk.options[kk.selectedIndex].value;
}
function getTxt() {
	var kk = document.getElementsByTagName('select')[2];
	return kk.options[kk.selectedIndex].innerHTML;
}
</script></p>
<p><a href="#;" onclick="alert(getValue());">取第三个的值</a> <a href="#;" onclick="alert(getTxt());">取第三个的文本</a><br />
</body></p>
<p>

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

更多 >

前台

网页配色方案

七 19th

由Diki发表在网站制作

没有评论

红色系配色方案:

更多 >

配色

色彩名录

七 16th

由Diki发表在网站制作

没有评论

████  粉红，即浅红色。别称：妃色杨妃色湘妃色妃红色
████  妃色妃红色：古同“绯”，粉红色。杨妃色湘妃色粉红皆同义。
████  品红：比大红浅的红色（quester注：这里的“品红”估计是指的“一品红”，是基于大红色系的，和现在我们印刷用色的“品红M100”不是一个概念）
████  桃红，桃花的颜色，比粉红略鲜润的颜色。（quester注：不大于M70的色彩，有时可加入适量黄色）
████  海棠红，淡紫红色、较桃红色深一些，是非常妩媚娇艳的颜色。
更多 >

配色

网页用多宽才更合适？

四 7th

由Diki发表在网站制作

没有评论

1、固定宽度只适合功能型网站，不适合希望用户认真阅读的浏览型网站。UCD大社区是浏览型网站，它的定位是“知识库”，希望你停留在这里认真浏览和阅读。

2、大屏幕不是用来显示更宽文字内容的，大屏幕下必然会面临鼠标长途奔袭的问题。建议用大屏幕的人：为自己的身体健康着想，在大屏幕下阅读的时候，养成缩小窗口的习惯。共勉

3、希望用户认真阅读的网站，主要内容区域的宽度必须固定，不能过长，否则会伤害到阅读者的眼睛，而且不适合阅读的流畅性。固定宽度在650左右最合适。有兴趣的人可以去搜索相关报告，为什么是650左右。（严格来说这个宽度不能用像素描述。应该是拿着尺子到显示器上量的毫米宽度才基本够严谨。当然，只说宽度也不行，还有眼睛离显示器的距离、文字大小、字体等因素作为前提）更多 >

前台

开发人员为什么要支持非IE浏览器的四个故事

三 24th

由Diki发表在网站制作

没有评论

来源:不怕危机的泡泡
最近一不小心陷入了对第二次浏览器大战的深思，并参与了几次网上讨论。颇有心得，不知何处分享。下面要讲的四个故事，都是客户（或者你的雇主）对你我（这样的开发人员）讲的故事。来源于生活，高于生活。
更多 >

浏览器

日历
2010 九月

日一二三四五六

« 八

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
分类目录
- 个人日志 (86)
- 电脑技术 (8)
- 网站制作 (42)
- 转载收藏 (89)
最近文章
近期评论
- DIKIcn 在开个微博玩下上的评论
- Alex 在 fireworks作业上的评论
- hydwyt 在俗话说得好上的评论
- Diki 在 EC1308+无线达成上的评论
- 天外飞仙在 EC1308+无线达成上的评论
标签云
像素前台图片字体平板电视搞笑数字无线标签浏览器游戏点对点电影相似汉字空间纸模经济网站设计美剧视频谷歌过扫描配色银河系漫游指南 1366x768 Chrome css D90 EC1308 Fireworks google hello world hg522-c IPTV javascript Linux mySQL NDSL Nikon Over Scan PHP PHPBB Ubuntu WIKI XP
友情链接
功能
Other

2010 九月
日	一	二	三	四	五	六
« 八
			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

网站制作

日历

分类目录

最近文章

近期评论

标签云

友情链接

功能

Other