input 标签左对齐
不要忘记下载jquery包，并引用到工程文件里。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<title>注册页面</title>
<script type="text/javascript">
$(document).ready(function () {
$("ul li:first-child").addClass("lifirst");
$("ul li:only-child").css("text-align", "center");
});
</script>
<style type="text/css">
body
{
background-image: url(/practice/.gif);
}
.lifirst
{
text-align: left;
font-size: 18px;
font-weight: bold;
}
ul li
{
height: 45px;
line-height: 45px;
list-style-type: none;
text-align:left;
}
.aa
{
float: right;
} .box
{
position: absolute;
width: 800px;
height: 500px;
left: %;
top: %;
margin-left: -400px;
margin-top: -250px;
text-align: center;
border: outset;
border-color: #FFFFFF;
background-color: #FBF5E6;
}
</style>
</head>
<body>
<div class="aa">
<a href="1.html">返回登陆首页</a>
</div>
<div class="box">
<hr />
<ul>
<li>选择账号名称 </li>
<li><p style="margin-left:65px; display:inline;">账号：</p>
<input type="text">
-12位之间，请用英文小写、数字，不能全部是数字。</li>
</ul>
<hr />
<ul>
<li>设置安全信息 </li>
<li>设置登录密码：
<input type="text">
-12位字符（字母、数字） </li>
<li>再次输入密码：
<input type="text">
请保证与第一次输入的密码一致。 </li>
</ul>
<hr />
<ul>
<li>填写验证码 </li>
<li><p style="margin-left:50px; display:inline;">验证码：</p>
<input type="text">
</li>
</ul>
<ul>
<li>
<input type="submit" value="提交" size="">
</li>
</ul>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册1</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: ;
padding: ;
text-align: center
}
.mainMin {
width: 1000px;
margin: auto;
position: relative;
}
.registeredStep {
margin: 20px ;
background: #fff;
overflow: hidden;
}
.registeredStep li {
float: left;
width: 270px;
padding-left: 30px;
height: 40px;
line-height: 40px;
font-size: 18px;
position: relative;
}
.registeredStep li.one {
*z-index: ;
}
.registeredStep li.two {
*z-index: ;
}
.registeredStep li.two, .registeredStep li.three {
width: 275px;
padding-left: 40px;
}
.registeredStep li em {
padding-right: 10px;
font-family: tahoma;
font-size: 19px;
}
.registeredStep li.active {
color: #fff;
background: #58a4ed;
}
.clearfix:before, .clearfix:after {
content: ".";
display: block;
height: ;
overflow: hidden;
visibility: hidden;
}
.registeredStep li i {
display: inline-block;
position: absolute;
overflow: hidden;
background: url(images/icon.png) no-repeat;
}
.forminfo {
margin: auto;
width: 600px;
height: auto;
border: 1px solid #F00;
}
.clearfix:after {
content: '\20';
display: block;
height: ;
clear: both;
}
.clearfix {
zoom: ;
}
.form {
padding: 20px 60px 30px;
}
.form dl {
position: relative;
padding: 10px 40px;
}
.form dl.pact {
padding: ;
}
.form dl.pact dd {
line-height: 14px;
}
.form dt {
float: left;
display: inline;
width: 120px;
line-height: 34px;
color: #;
text-align: right;
}
.form dt.short {
width: 80px;
}
.form dd {
float: left;
display: inline;
line-height: 26px;
margin-left:20px;
}
.form dd.phone {
line-height: 34px;
}
.form .text, .form .password {
width: 240px;
height: 18px;
padding: 8px 10px;
border: 1px solid #c1c1c1;
line-height: 18px;
font-size: 12px;
color: #4d4d4d;
vertical-align: middle;
outline: none;
font-family: "微软雅黑";
}
.form .text.short {
width: 250px;
}
.form .text.red {
border-color: #f00;
}
.form .btn {
width: 60px;
height: 36px;
border: none;
line-height: 36px;
border-radius: 3px;
background: #f50;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #fff;
cursor: pointer;
}
.form a {
color: #3a83e8;
}
.font {
float: left;
size: +;
font-weight: bold;
}
.center{
padding-top:7px;
padding-left:5px;
}
</style>
</head> <body>
<!--loginHead Star --> <div class="mainMin">
<!--registeredStep Star -->
<div class="registeredStep">
<ul class="clearfix">
<li class="one"> <i class="icon"></i><span>账号注册</span> </li>
<li class="two active"> <i class="icon"></i><span>填写基本信息</span></li>
<li class="three"><span>注册</span> </li>
</ul>
</div>
</div>
<!--registeredStep End -->
<!-- form start-->
<div class="forminfo">
<div class="form">
<form id="registerForm" class="formone">
<dl class="clearfix">
<dt>
<div class="font"> 基本信息 </div>
<div class="center">
<hr style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#eee,strength=10)" width="400px" color=#987cb9 SIZE=/>
</div>
</dt>
</dl>
<dl class="clearfix">
<dt>公司全称：</dt>
<dd>
<input class="text short" id="validateCode" name="validateCode" tabindex="" type="text">
<div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div>
</dd>
</dl>
<dl class="clearfix">
<dt>所在地区：</dt>
<dd>
<select name="choose" id="choose">
<option value="#" selected="selected">省份</option>
<option value="浙江省">浙江省</option>
<option value="云南省">云南省</option>
<option value="山西省">山西省</option>
</select>
</dd>
<dd>
<select name="choose" id="choose">
<option value="#" selected="selected">城市</option>
<option value="义乌">义乌</option>
<option value="杭州">杭州</option>
<option value="云南">云南</option>
</select>
</dd>
<dd>
<select name="choose" id="choose">
<option value="#" selected="selected">区块</option>
<option value="滨江区">滨江区</option>
<option value="上城区">上城区</option>
<option value="浦沿区">浦沿区</option>
</select>
</dd>
</dl>
<dl class="clearfix">
<dt>公司详细地址：</dt>
<dd>
<input class="text short" id="validateCode" name="validateCode" tabindex="" type="text">
<div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div>
</dd>
</dl>
<dl class="clearfix">
<dt>
<div class="font">基本信息</div>
<div class="center">
<hr style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#eee,strength=10)" width="400px" color=#987cb9 SIZE=/>
</div>
</dt>
</dl>
<dl class="clearfix">
<dt>联系人：</dt>
<dd>
<input class="text short" id="validateCode" name="validateCode" tabindex="" type="text">
<div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div>
</dd>
</dl>
<dl class="clearfix">
<dt>电子邮件：</dt>
<dd>
<input class="text short" id="validateCode" name="validateCode" tabindex="" type="text">
<div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div>
</dd>
</dl>
<dl class="clearfix">
<dt>手机号码：</dt>
<dd>
<input class="text short" id="validateCode" name="validateCode" tabindex="" type="text">
<div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div>
</dd>
</dl>
</dl>
<dl class="clearfix">
<dt>座机号码：</dt>
<dd>
<input class="text short" id="validateCode" name="validateCode" tabindex="" type="text">
<div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div>
</dd>
</dl>
<dl class="clearfix">
<dt>QQ：</dt>
<dd>
<input class="text short" id="validateCode" name="validateCode" tabindex="" type="text">
<div class="fail short span-error-show" style="display: none" id="span_errorshow_validate_code"> </div>
</dd>
</dl>
<input class="btn" id="registerPrevious" name="registerPrevious" value="上一步" type="button">
<input class="btn" type="submit" id="registerSubmit" name="registerSubmit" value="提交" />
</form>
</div>
</div>
<!--form End-->
</body>
</html>
input 标签左对齐的更多相关文章
- 控制label标签的宽度,不让它换行 label标签左对齐
1==>控制label标签的宽度.解决字段名太长时,不会换行显示 label-width="100px" label标签的宽度是100px; style="widt ...
- 关于input标签无法对齐的解决方法！
在布局中发现各个input之间很难对齐,解决方法如下: 将input设置vertical-align属性: vertical-align:middle vertical-align:top verti ...
- LI 标签中让文章标题左对齐，日期右对齐的方法
希望实现标题在左对齐,日期在右对齐,当直接给日期的span加上float:right时,IE8和FF都OK,但IE6/7则会换行,下面给出一个简单有效的解决办法. <!DOCTYPE html ...
- css实现一行文字居中，多行文字左对齐
问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框, ...
- 全面剖析 <input> 标签 ------ HTML\HTML5
<input>标签因其形式多样.功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一.下面就来对<input>做一个全面的剖析: 标签定义: <input> ...
- iOS上让按钮文本左对齐问题
一,问题分析 1.在做历史记录视图的时候,由于让键盘退出后才能触发表格的 didselect 那个代理方法,也就是得点两下才触发,而表格中的按钮点一下就可以立即响应. 2.于是我就有了用按钮事件代替 ...
- UICollectionView左对齐流水布局、右对齐流水布局
在平时使用的app中会经常碰到一些规格选择,筛选,标签等页面,这些页面的布局展示通常是左对齐流水布局.实现类似这样的左对齐流水布局有多种方式,如果选项少的话可以直接用UIButton实现.现在我们有一 ...
- css 表单标签两端对齐
来自:http://demo.doyoe.com/css3/justify/justify-form.htm 侵删 <!DOCTYPE html> <html lang=" ...
- HTML简单登录和注册页面及input标签诠释
今天第一次接触HTML这种语言,虽然不能完全理解其中的意思,过去学的英语单词几乎也忘了差不多了,但是感觉进入这门语言学习之后就没有那么难了,一步一步来吧!下面巩固下今天学内容: HTML是一种超文本标 ...
随机推荐
- JS浮点类型计算
/* ---------------- JS浮点数运算重置 ---------------- */ //加法函数 //调用:accAdd(arg1,arg2) //返回值:arg1加上arg2的精确结 ...
- 生成N个不重复的随机数(转)
有25幅作品拿去投票,一次投票需要选16幅,单个作品一次投票只能选择一次.前面有个程序员捅了漏子,忘了把投票入库,有200个用户产生的投票序列为空.那么你会如何填补这个漏子? 当然向上级反映情况.但是 ...
- iOS-UITableCell详情
iOS-UITableCell详情 表示UITableViewCell风格的常量有: UITableViewCellStyleDefault UITableViewCellStyleSubtitle ...
- css选择器优化
css选择器优化@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@impor ...
- OSI七层模型理解
物理层功能1,为数据端设备提供传送数据的通路 功能2,传输数据 接口.传输介质.信号的传输.网络设备 有线介质:双绞线(普通的网线),光纤. 无线介质:无线电.微波.激光.红外线. 例如手机.电视接收 ...
- jquery 银行卡号验证
具体参考:https://github.com/jondavidjohn/payform 插件js: jquery.payform.js 具体操作 alert($.payform.validateCa ...
- jQuery AJAX实现调用页面后台方法
1.新建demo.aspx页面.2.首先在该页面的后台文件demos.aspx.cs中添加引用. using System.Web.Services; 3.无参数的方法调用. 大家注意了,这个版本不能 ...
- 设置tomcat启动超时，不会自动停止
tomcat启动时如果1000ms没有起来,服务就会自动停止.设置位置如下
- ORACLE用户管理方式下备份数据和复制数据库
首先要明确的是,oracle数据库的备份可以分为逻辑备份和物理备份. 逻辑备份的是通过数据导出对数据进行备份,主要方式有老式的IMP/EXP和数据泵灯方式.适合变化较少的数据库,而 ...
- TOM大师脚本-show space 多个版本，谢谢大牛们
示例一 该脚本需区分 对象的管理方式是 自动还是 手动, 对手动管理方式 的表显示很全面 SQL> exec show_space_old('MAN_TAB','DEV','TABLE'); F ...