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是一种超文本标 ...
随机推荐
- Cstyle的UEFI导读：第18.0篇 NVRAM的工作原理(上)
虽有句话说的好,实用的东西记在脑子里.没有的记在笔记本上. 可是如今的信息量越来越大,并且随着时间的推移记忆力会越来越不可靠,所以仅仅好把近期工作之余看的一些东西记录下来,避免被迅速忘记.这里 ...
- android 26 设置项目有多个入口Activity。
第一个activity package com.sxt.day04_11; import android.os.Bundle; import android.app.Activity; import ...
- Java语言基础（五）
Java语言基础(五) 一.浮点数 浮点数就是小数,其标准是IEEE 754,用指数和尾数表示 例如30000=3*10000=3*10^4 其中4是指数,3是尾数 Java中,浮点数有float ...
- javascript高级培训课程(一)
执行上下文 可执行代码类型-- 执行上下文类型 全局代码-- 全局上下文 函数代码-- 函数上下文 eval代码 -- eval上下文 arguments 超出传入参数个数的index 与形参不 ...
- css考核点整理（十一）-响应式开发经验，响应式页面的三种核心技术是什么
响应式开发经验,响应式页面的三种核心技术是什么
- codevs 1817 灾后重建
/* 暴力暴力 离线每次添边 堆优化dij 70 SPFA 80..... */ #include<iostream> #include<cstdio> #include< ...
- 使用java注解的例子有没有
使用java注解的例子 参考文档:http://www.cnblogs.com/pepcod/archive/2013/02/20/2918719.html http://www.shaoqun.co ...
- Axiom3D学习日记 0.Axiom基础知识
Axiom 3D Engine An open-source, cross-platform, managed 3D rendering engine for DirectX, XNA and Ope ...
- CentOS 7设置iptables防火墙开放proftpd端口
由于ftp的被动模式是这样的,客户端跟服务器端的21号端口交互信令,服务器端开启21号端口能够使客户端登录以及查看目录.但是ftp被动模式用于传输数据的端口却不是21,而是大于1024的随机或配置文件 ...
- Java study 2:The note of studying Socket which based TCP
TCP concept: 传输控制协议(Transmission Control Protocol, TCP)是一种面向连接(连接导向)的.可靠的.基于字节流的运输层(Transport layer) ...