
表单宽高不固定情况下,表单外面加一个父标签fa 表单加一个类centered
<body><div class="fa">
<form name="search" method="post" action="#" class="centered">
<input value="请输入关键词" type="text" name="q" />
<input type="submit" value="搜索"/>
</form>
</div>
</body> 清除页面默认样式后(margin padding)
<style type="text/css">
html,body{width: 100%height: 100%}
.fa {text-align: centerheight: 100%}
.fa:before {content: ''display: inline-blockheight: 100%vertical-align: middle}
.centered {display: inline-blockvertical-align: middlebackground: redwidth: auto}
</style>
<STYLE type="text/css">#login{
width:400px
height:280px
position:absolute
left: 50%
top: 50%
margin-left:-200px
margin-top:-140px
border:1px
background-color:red
align:center
}
#form{
width:300px
height:160px
position:relative
left:50%
top:50%
margin-left:-150px
margin-top:-80px
}
</STYLE>
</head>
<body>
<div id="login">
<div id="form">
<s:form action="" >
<s:textfield name="username" label="用户名" ></s:textfield>
<s:password name="password" label="密码" ></s:password>
<s:select list="{}" listKey="1" listValue="1" label="用户类型"></s:select>
<tr align="center">
<td colspan="2" align="center" valign="middle">
<s:submit value="登录" theme="simple"></s:submit>
<s:reset value="重置" theme="simple"></s:reset> </td>
</tr>
</s:form>
</div>
</div>
</body>
</html>
原理就是使用两个div,一个是绝对定位,一个是相对定位,绝对定位用于控制在浏览器中位置;相对定们的div把表单包起来,控制让其居中。
设置html 表单按钮的位置的代码是:
<tr>
<td><input type="submit" value="注册">
<input type="reset" value="重置"></td>
</tr>
“ 超文本 ”就是指页面内可以包含图片、 链接,甚至音乐、 程序等非文字元素。
超级文本标记语言文档制作不是很复杂,但功能强大,支持不同数据格式的 文件镶入,这也是万维网( WWW)盛行的原因之一,其主要特点如下:
简易性:超级文本标记语言 版本升级采用 超集方式,从而更加灵活方便。
可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加 标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证。
平台无关性:虽然 个人计算机大行其道,但使用 MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是 万维网( WWW)盛行的另一个原因。
通用性:另外, HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)