html5 css3响应式表单框架特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

10 36 13



特效描述:响应式表单框架。精美实用的21款响应式表单,基于html5 css3制作适用于各种类型的网页表单填写提交代码。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="core/css/main.css">
<link rel="stylesheet" type="text/css" href="core/css/font-awesome.min.css">

2. HTML代码

	<div id="menu">
        <div id="color-bars">
                <div id="bar-1" class="color-bar"></div>
                <div id="bar-2" class="color-bar"></div>
                <div id="bar-3" class="color-bar"></div>
                <div id="bar-4" class="color-bar"></div>
                <div id="bar-5" class="color-bar"></div>
                <div id="bar-6" class="color-bar"></div>
                <div id="bar-7" class="color-bar"></div>
                <div id="bar-8" class="color-bar"></div>
                <div id="bar-9" class="color-bar"></div>
                <div id="bar-10" class="color-bar"></div> 
        </div>    
		<div class="inner">
			<h1>精美的纯css3 html5表单框架</h1>
		</div>
	</div><!-- end menu section -->
    <div class="full-wrapper demos" id="demos">
    	<div class="smart-grid">
            <div class="row tac">
                <!--<h1 class="main-heading ftr">Demos</h1>-->
            </div><!-- end .row section -->
            <div class="web-box">
            <div class="web-box-inner">
            <div class="subz">
                <h6 class="sub-heading">演示例子</h6>
            </div><!-- end .row section -->            
        	<div class="row">
            	<div class="col4 first">
					<div class="mx-wrapper">
                    	<ul>
                        	<li><a href="demos/ui-elements-theme-default.html" target="_blank">默认风格</a></li>
                            <li><a href="demos/ui-elements-theme-blue.html" target="_blank">蓝色风格 </a></li>
                        	<li><a href="demos/ui-elements-theme-green.html" target="_blank">绿色风格 </a></li>
                        	<li><a href="demos/ui-elements-theme-red.html" target="_blank">红色风格 </a></li>
                            <li><a href="demos/ui-elements-theme-orange.html" target="_blank">橙色风格 </a></li>
                        	<li><a href="demos/ui-elements-theme-indigo.html" target="_blank">靛蓝风格</a></li> 
                            <li><a href="demos/ui-elements-theme-pink.html" target="_blank">粉色风格 </a></li>                           
                        </ul>
                    </div><!-- .mx-wrapper -->               
                </div><!-- end .col4 section -->
                <div class="col4">
					<div class="mx-wrapper">
                    	<ul>
                        	<li><a href="demos/ui-elements-theme-purple.html" target="_blank">紫色风格</a></li>
                            <li><a href="demos/ui-elements-theme-yellow.html" target="_blank">黄色风格</a></li>
                        	<li><a href="demos/template-order.html" target="_blank">订单模板</a></li>
                            <li><a href="demos/template-checkout.html" target="_blank">确认模板</a></li>
                            <li><a href="demos/template-review.html" target="_blank">评价模板</a></li> 
                            <li><a href="demos/template-bank-account.html" target="_blank">创建账户 </a></li>
                            <li><a href="demos/template-comments.html" target="_blank">回复模板</a></li>                                  
                        </ul>
                    </div><!-- .mx-wrapper -->                
                </div><!-- end .col4 section -->
                <div class="col4 last">
					<div class="mx-wrapper">
                    	<ul>
                            <li><a href="demos/template-signup.html" target="_blank">注册模板</a></li>
                            <li><a href="demos/template-contact.html" target="_blank">联系模板 </a></li>
                        	<li><a href="demos/template-shadows.html" target="_blank">阴影模板 </a></li>
                            <li><a href="demos/ui-grid.html" target="_blank">网格表单</a></li>
                        	<li><a href="demos/ui-elements-state-error.html" target="_blank">错误状态</a></li>
                        	<li><a href="demos/ui-elements-state-success.html" target="_blank">成功状态</a></li>
                            <li><a href="demos/ui-elements-state-disabled.html" target="_blank">禁用状态</a></li>                                  
                        </ul>
                    </div><!-- .mx-wrapper -->                
                </div><!-- end .col4 section -->
            </div><!-- end .row  section -->
            </div>
         </div>                      
        </div><!-- end section -->
    </div><!-- end .full-wrapper .demos section -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片头像上传 文件上传 文本框 下拉框 复选 单选 登录框 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 切换按钮 form表单

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到