表单填写进度提示效果 - 代码效果 - YouDove

登陆便民

表单填写进度提示效果

>首页 -> 社会专题 -> 代码效果 2014-04-07 来源:百度作者:佚名【大中小】浏览:796次评论:0条

Fort.js 是一款用于时尚、现代的表单填写进度提示效果的 java script 库，你需要做的就是添加表单，剩下的任务就交给 Fort.js 算法了，使用非常简单。提供了Default、Gradient、Sections 以及 Flash 四种效果，满足开发的各种场合需要。

360盘云下载【提取码 a9c7】百度云下载

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Fort.js - 表单填写进度提示效果--鸽码</title>
<link rel="stylesheet" href="daima/form-progress/default/style.css">
<link rel="stylesheet" href="daima/form-progress/default/fort.css">

<style>
.top-banner {
	background-color: #333;
}
.nav {
	margin-bottom: 30px;
}
.nav li.current a{
	background-color: #009DFF;
	color: #fff;
	padding: 10px;
}
.nav a {
	margin: 5px;	
	color: #333;
	text-decoration: none;
}
</style>
<script src="daima/form-progress/default/fort.js"></script>
</head>
<body>
<div class="form-wrapper">
	<div class="top"><div class="colors"></div></div>
	<div class="nav">
		<ul>
			<li class="current"><a href="daima/form-progress/default/index.html">效果一</a></li>
			<li><a href="daima/form-progress/flash/index.html">效果二</a></li>
			<li><a href="daima/form-progress/gradient/index.html">效果三</a></li>
			<li><a href="daima/form-progress/sections/index.html">效果四</a></li>
		</ul>
	</div>
	<form name="form" action="#">
		<div class="form">
			<div class="form-item">
				<input type="text" name="text" required="required" placeholder="Name" autocomplete="off">
			</div>
			<div class="form-item">
				<input type="text" name="text" required="required" placeholder="Username" autocomplete="off">
			</div>
			<div class="form-item">
				<input type="password" name="password" required="required" placeholder="Password" autocomplete="off">
			</div>
			<div class="button-panel">
				<input type="submit" class="button" title="Sign In" value="Test It Out">
			</div>
		</div>
	</form>
</div>
<div class="footer-banner" style="width:728px; margin:200px auto 0"></div>
<script>
    solid();
</script>
<script type="text/javascript" src="daima/form-progress/default/jquery.min.js"></script>

</body>
</html>

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

您看到此篇文章时的感受是：

Tags：用

责任编辑：佚名

【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

更多

上一篇：离开你网站时显示模态弹窗

下一篇：CSS 布局:40个教程、技巧、例子和..

最新文章

[代码效果]网页变黑色CSS代码2019-04-07

[代码效果]皮影客和优芽制作互..2018-07-06

[代码效果]满屏出现的烟花效果2018-01-20

[代码效果]网页对联代码2018-01-12

[代码效果]CSS排版页面实例代码2017-12-28

[代码效果]waterfall自适应瀑布..2017-03-10

[代码效果]手机屏幕尺寸测试—..2016-12-28

[代码效果]iframe去边框、无边..2016-07-16

[代码效果]历史今天择吉皇历代码2016-07-15

[代码效果]历史今天寿星万年历..2016-07-15

热门文章

[代码效果]CSS jquery实现Div底..2010-07-12

[代码效果]微软首页竖向TAB滑动..2011-02-11

[代码效果]一个带标号的CSS文章..2011-02-20

[代码效果]CSS垂直，水平居中2011-02-20

[代码效果]学习JS瀑布流的简单..2011-02-20

[代码效果]一个高宽自适用100%,..2011-02-20

[代码效果]Div透明代码，透明的..2011-02-20

[代码效果]网页Div层拖动，拖拽..2011-02-20

[代码效果]单行显示新历、农历..2011-03-06

[代码效果]横式图片幻灯代码2011-03-06

推荐文章

[代码效果]表单填写进度提示效果2014-04-07

[代码效果]禁止网页被另存为的..2016-02-21

[代码效果]HTML5 模拟现实物理..2014-04-07

[代码效果]微软首页竖向TAB滑动..2014-09-25

[代码效果]页面加入边框 2012-02-12

[代码效果]图片链接网址 2012-02-03

[代码效果]CSS jquery实现Div底..2010-07-12

[代码效果]div css下拉导航菜单2016-06-10

[代码效果]CSS简单重叠线效果2015-10-08

[代码效果]固定中栏宽度, 左右..2015-10-08

论坛互动
讨论留言

MAIL：gnlt@Dovechina.com
正在线上：

任何你想说的