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是一种超文本标 ...
随机推荐
- etrace 跟踪 nginx之HTTP请求流程
curl 127.0.0.1 | | | \--ngx_epoll_process_events | | | | \--ngx_time_update | | | | | \--ngx_gmtime ...
- 动态代理与AOP
1. 代理的分类: 静态代理:每个代理类只能为一个接口服务 动态代理:可以通过一个代理类完成全部的代理功能(由JVM生成实现一系列接口的代理类,即:生成实现接口的类的代理) 2. 动态代理: 在Jav ...
- iOS原生CIFilter创建二维码
iOS原生CIFilter创建二维码 2016-05-31 未来C iOS原生CIFilter创建二维码 关于二维码生成,网上也是有很多,很早以前的第三方库大多数都是通过C++写,也是有的如zxing ...
- 11.2 afternoon
#include<iostream> #include<cstdio> #define ll long long using namespace std; ll n,ans; ...
- JavaScript正则验证数字、英文、电话号、身份证号、邮箱地址、链接地址等
验证是否为数字:/^[0-9]*$/验证是否为汉字:/^[\u4e00-\u9fa5],{0,}$/验证x-y位的数字:/^\d{x,y}$/验证由26个英文字母组成的字符串:/^[A-Za-z]+$ ...
- youphp学习整理
<?php //后台公共模块 // _list 数据显示 // add 添加/编辑 视图 // insert 添加处理函数 // edit 添加/编辑 视图 // update 更新处理函数 / ...
- ssh配置事务
http://blog.csdn.net/jianxin1009/article/details/9202907(不错)
- wsdlLocation可以写成项目的相对路劲吗
如果客户端的代码使用wsdl生成的话,这个地址是从wsdl描述的<service>里的<location>获取的,如果开发过程中服务地址换了,那只能手工来修改了,好像只有一个地 ...
- oracle数据表误删恢复
1.查看回收站中的表: select object_name,original_name,partition_name,type,ts_name,createtime,droptime from re ...
- iOS 相机手动对焦
AVCaptureDevice的方法,之前查了网上和stackoverflow上,没有,于是自己试着做了下,成功了,分享下. //实例化 AVCaptureDevice *captureDevice ...