Jquery 简单的漂亮HTML表单元素

步青龙

浏览: 295633 次
性别:
来自: 杭州

最近访客更多访客>>

Franciswmf

wangchen.ily

jzwjzwjzw11

flyfoxs

博主相关

博客

微博

相册

留言

关于我

博客专栏

: Java面试
浏览量：0

文章分类

社区版块

存档分类

博客分类：

JavaScript

根据网上的一个网页稍微修改了一下，第一部分和第二部分效果不同，如果只需要一种效果，删除另外一种的JS即可，第一个是全div背景，第二个是单行背景，特别简单的一个表单样式，原链接

代码：<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jqueryform</title>
<style>
	 body{font-family:Arial, Helvetica, sans-serif;font-size: 13px;}
	.content,.contentA{padding:10px;width:370px}
	.left{width:150px;float:left;padding:7px 0px 0px 7px;min-height:24px;}
	.right{width:200px;float:left;padding:5px;min-height:24px;}
	.clear{float:none;clear:both;height:0px;}
	.row{background-color:none;display:block;min-height:32px;}
	.text{width:190px;}
	.ruler{width:400px; border-bottom:dashed 1px #dcdcdc;}
	tr:focus{background-color:#fcfcf0;}
	td{vertical-align:top;}
	.over{background-color:#e6e2af;}
	.out{background-color:none;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script>
		$(document).ready(function(){
			$('.content .left, .content input, .content textarea, .content select').focus(function(){
				$(this).parents('.content').addClass("over");
			}).blur(function(){
				$(this).parents('.content').removeClass("over");
			});
			$('.contentA .left, .contentA input, .contentA textarea, .contentA select').focus(function(){
				$(this).parents('.row').addClass("over");
			}).blur(function(){
				$(this).parents('.row').removeClass("over");
			});
		});
</script>

</head>



<body>

<form method="post">
<div style="float:left; margin-right:20px; width:400px;">
	第一部分
	<div class="contentA">
		<div class="row">
			<div class="left">First name</div>
			<div class="right"><input name="Text1" type="text" class="text" /></div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="left">Last name</div>
			<div class="right"><input name="Text1" type="text" class="text" /></div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="left">Email</div>
			<div class="right"><input name="Text1" type="text" class="text" /></div>
			<div class="clear"></div>
		</div>

		<div class="row">
			<div class="left">Password</div>
			<div class="right"><input name="Text1" type="text" class="text" /></div>
			<div class="clear"></div>
		</div>
	</div>
</div>

<div style="float:left; margin-right:20px;">
	第二部分
	<div class="content">
		<div class="row">
			<div class="left">First name</div>
			<div class="right"><input name="Text1" type="text" class="text" /></div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="left">Last name</div>
			<div class="right"><input name="Text1" type="text" class="text" /></div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="left">Email</div>
			<div class="right"><input name="Text1" type="text" class="text" /></div>
			<div class="clear"></div>
		</div>

		<div class="row">
			<div class="left">Password</div>
			<div class="right"><input name="Text1" type="text" class="text" /></div>
			<div class="clear"></div>
		</div>
	</div>
</div>
</form>
</body>
</html>

分享到：

Mysql操作 | DTO和POJO纠结

2012-05-22 00:47
浏览 1490
评论(1)
分类:Web前端
查看更多

1 楼影非弦 2013-09-26

亲，效果图怎么不贴出来啊

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

Jquery 简单的漂亮HTML表单元素

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论

Jquery 简单的漂亮HTML表单元素

评论

发表评论

相关推荐

jquery的幻灯片效果

Ajax

prototype

Javascript 面向对象

Javascript 作用域与this的用法

分享一款前端远程调试开发利器Fidder web Debugger

Javascript 特殊的对象声明与this作用域

Javascript Date的基本特点

Javascript Array的一些用法

Javascript Array的基本特点

Javascript Object 用法

Javascript 基本概念

使用Javascript

jquery formValdator 插件那些破事儿

互联网倒计时应用

常用JS 判断总结

js function

本地图片效果

css圆角效果

一个非常高效的js的trim截取字符串-原生方法-正则表达式

最近访客更多访客>>