FireFox下实现圆角border-radius (css3.0 新增)(1 位领导批示)

  • 2008-07-16
  • 分类：XHTML+CSS
  • 作者：银子
  • 4,349 位领导视察

css3.0中新增属性: border-radius

用这个属性能实现圆角边框的效果。现在只有Mozilla/Firefox和Safari3支持该属性。

代码:


-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;

分别代表上左,上右,下左,下右四个角.

如果要在safari3中支持.就将前面的-moz改为-webkit

P.S.wordpress2.5以上版本的后台登录页面就用到了此属性.

Tags : , ,
1 位领导批示

Input file 文件选择框美化 支持Firefox(0 位领导批示)

闲来无事写了一个.也许用得上

在FF2,IE7,IE6下测试通过

?View Code XHTML
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="wuleying" />
<!--<script type="text/javascript" src="ajax.js"></script>-->
<title>测试上传文件</title>
<style type="text/css">
* {font-size:12px;margin:0;}
body {background:#fff;}
form {margin:12px;}
input.file{
	vertical-align:middle;
	position:relative;
	left:68px;
	*left:-218px;
	filter:alpha(opacity=0);
	opacity:0;
	z-index:1;
	*width:223px;
	display:none;
}
form input.viewfile {
	z-index:99;
	border:1px solid #ccc;
	padding:2px;
	width:150px;
	vertical-align:middle;
	color:#999;
}
form p span {
	float:left;
}
form label.bottom {
	border:1px solid #38597a;
	background:#4e7ba9;
	color:#fff;
	height:19px;
	line-height:19px;
	display:block;
	width:60px;
	text-align:center;
	cursor:pointer;
	float:left;
	position:relative;
	*top:1px;
}
form input.submit {
	border:0;
	background:#380;
	width:70px;
	height:22px;
	line-height:22px;
	color:#fff;
	cursor:pointer;
}
p.clear {
	clear:left;
	margin-top:12px;
}
p.filep {
	height:25px;
}
p.clear input {
	float:left;
	margin-right:6px;
}
#error {
	padding-top:5px;
	color:#f00;
}
</style>
</head>
<body>
<form action="" onsubmit="return send();" method="post" name="upfiles" enctype="multipart/form-data"><br />
<input type="hidden" name="max_file_size" value="2097152" />
<input type="hidden" name="do" value="upload" />
<p class="filep">
	<span>
		<label for="viewfile">上传文件：</label>
		<input type="text" onmouseout="document.getElementById('upload').style.display='none';" name="viewfile" id="viewfile" class="viewfile" />
	</span>
	<label for="upload" class="bottom" onmouseover="document.getElementById('upload').style.display='block';">查找文件</label><input type="file" id="upload" size="27" name="upload[]" onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" class="file" />
</p>
<p class="clear"><input class="submit" type="submit" value="确定上传" /><div id="error"></div></p>
</form>
</body>
</html>
Tags : , , , , ,
0 位领导批示

上传图片附件显示缩略图(3 位领导批示)

刚开始以为很容易解决.写js嘛..-_,-+


< i nput type="file" onchange="document.getElementById('showimg').src=this.value;" />

然而本地测试成功的代码上传到服务器上就出现了错误..空格被自动转义成为了%20

无语ing….囧..

不过总算找到一个BT的方法..用CSS中的AlphaImageLoader滤镜 -_!!

AlphaImageLoader滤镜的使用方法就不做说明..自己查下手册

AlphaImageLoader滤镜的src属就是其中的主角 它将使用绝对或相对url地址指定背景图像。假如忽略此参数，滤镜将不会作用。

放出代码

全文阅读 »

Tags : , ,
3 位领导批示

页面下载速度优化的一点思考(3 位领导批示)

网站首页代码已经达到1000多行,另外17k大小的主css文件与几个内部,外部的js文件(速度主要是内容的N多图片下载及外部的JS文件所拖累的)

所以第一步就是整理所有的JS文件,把整个外部JS代码包含到一个JS文件中,由HTML引用,这样第一次下载后就会在客户端浏览器里缓存,从而加快一定的页面显示速度.

第二步,JS在HTML中的引用位置, 把响应时间长的JS文件放到页面头部，当整个JS文件下载完毕后,整个文档也几乎同时下载完成,与把JS放到页尾的速度感觉上还是提升很大的.

第三步,优化CSS文件,把冗余的代码清除,拆分成两个CSS样式表文件

hx.gif

下载页面整个过程1.08m.进一步优化中.

Tags : , , , , , ,
3 位领导批示

target=”new”,target=”_blank”与rel=”external”,不可调合的矛盾(3 位领导批示)

  • 2007-12-3
  • 分类：XHTML+CSS
  • 作者：银子
  • 3,605 位领导视察

在新开窗口的这个问题上,已经讨论过很多次, 大多数人认为不经用户同意就弹开一个新页面是不礼貌的作法.但中国人的习惯,就是喜欢弹出很多个页面,(据说与以前用电话线上网时,多开多个窗口,下载完所有页面,把猫一关,然后看网页可以省不少网费,如今虽没有网费的问题,但新开N个窗口却做为一个习惯流传下来了)

个人也反对新开窗口,无耐需求如是,按照过渡期的办法target=”new”;问题却出现了,使用这种方法后,只能新开一个窗口,再次点击链接始终只能在那一个窗口显示.

这时我想到了rel属性,这个HTML4.0时添加的属性有一个关于新开窗口的属性值:external;使用这个属性值时还必须用到javascript

代码如下：

function externallinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") == "external")
     anchor.target = "_blank";
 }
}
window.onload = externallinks;

为了个新开个窗口,写下这么多行代码,似乎有点不值,SO,最后我选择了不符合标准的写法:target=”_blank”;
问题解决了

标准有时真难捉摸,也许它本身也在不断完善中…　

Tags : , , , ,
3 位领导批示

可恶的IE6双倍浮动BUG及解决办法(7 位领导批示)

  • 2007-11-29
  • 分类：XHTML+CSS
  • 作者：银子
  • 8,930 位领导视察

制作页面时常会碰到IE6双倍浮动BUG,以前我的解决方法就是多写一行CSS HACK

如：

margin-left:12px;
-margin-left:6px;

这种方法虽然有效,但在讲究完美的coder来说使用CSS HACK是不能接受的

真正的解决方法：

加上display:inline

是的,没有看错,就是这么简单,被IE双倍浮动BUG困扰的朋友试一下吧

困难终于实践

Tags : , , , ,
7 位领导批示

CSS小技巧,文字与Input垂直居中对齐(1 位领导批示)

  • 2007-11-22
  • 分类：XHTML+CSS
  • 作者：银子
  • 10,058 位领导视察

最近跟表单经常打交道，经常出现文字与所对应该的input不能垂直居中对齐的问题(文字默认是与input底部对齐的),查找了下css2.0帮助手册,找到了解决办法，原来是这么easy.

<p>
<input type="text" name="author" id="author" style="vertical-align:middle" />
<label for="author"><small>呢称</small></label>
</p>

vertical-align:middle
将支持 valign 特性的对象的内容与对象中部对齐

Tags : , , , ,
1 位领导批示

Input 设为只读 readonly 与 disabled 的区别(1 位领导批示)

  • 2007-11-17
  • 分类：XHTML+CSS
  • 作者：银子
  • 9,401 位领导视察

怎样使input中的内容为只读，也就是说不让用户更改里面的内容。

  1. <input type="text" name="input1" value="中国" onfocus=this.blur() />
  2. <input type="text" name="input1" value="中国" readonly />
  3. <input type="text" name="input1" value="中国" disabled />

最好不要用disabled,不然就无法取出里面的值了.

  1. <input type="text" name="input1" value="中国" readonly="true" />
  2. <input type="text" name="input1" value="中国" readonly style="color:#999 ;" />

注意:在JS更改readonly属性时区分大小写 readOnly

Tags : , ,
1 位领导批示

仿163邮箱的按钮效果(0 位领导批示)

  • 2007-11-17
  • 分类：XHTML+CSS
  • 作者：银子
  • 3,618 位领导视察

163邮箱是用JS来实现的，我这里用到了CSS伪类 hover

Demo http://www.zdyi.com/lab/mail163/

HTML

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>163邮箱按钮</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
	<div id="logo"><img src="163logo.gif" alt="logo" /></div>
</div>
<div id="nav">
	<ul>
		<li><a href="#"><span class="left"></span><span class="center">发送</span><span class="right"></span></a><span class="img1"></span></li>
		<li><a href="#"><span class="left"></span><span class="center">存草稿</span><span class="right"></span></a><span class="img2"></span></li>
		<li><a href="#"><span class="left"></span><span class="center">贺卡</span><span class="right"></span></a><span class="img3"></span></li>
		<li><a href="#"><span class="left"></span><span class="center">查词典</span><span class="right"></span></a><span class="img4"></span></li>
	</ul>
</div>
</body>
</html>

全文阅读 »

Tags : ,
0 位领导批示

随机显示的10篇日志

评论最多的10篇日志

浏览最多的10篇日志