用表单结合CSS写这个效果,求助~
发布网友
发布时间：2022-05-14 01:56
共3个回答
懂视网
时间：2022-05-14 06:17
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>by 阿会楠 2008-12-4</title>
<script language="javascript" type="text/javascript">
//js辅助
window.onload = function(){
var initleft = 200;// 初始化第一个定位
var lis = document.getElementById("menu").getElementsByTagName("li");
for(var i = 0;i < lis.length;i++){
lis[i].style.left = initleft + i*100 + "px";
}
}
</script>
<style type="text/css">
*{
font-size:12px;
padding:0;
margin:0;
}
body{
text-align:center;
}
#reg{
margin:0 auto;
width:600px;
background:#cccccc;
height:500px;
}
h6{
background:black;
height:28px;
color:white;
text-align:left;
line-height:28px;
padding-left:3px;
}
#menu{
height:30px;
text-align:left;
padding-top:15px;
padding-left:10px;
overflow:hidden;
}
li{
list-style-type:none;
}
#menu li{
float:left;
color:green;
height:30px;
padding:0 5px;
line-height:30px;
margin-left:20px;
position:absolute;
}
.current{
border:1px solid blue;
border-bottom:0;
background:white;
}
#content{
border:1px solid blue;
height:400px;
margin:8px;
margin-top:0;
background:white;
padding:10px;
}
#content dl{
border-top:1px solid #ccc;
border-left:1px solid #ccc;
width:560px;
height:116px;
}
#content dl dd,#content dl dt{
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
height:28px;
}
#content dl dt{
width:200px;
float:left;
text-align:right;
padding-right:3px;
background:#F0F0F0;
line-height:28px;
}
#content dl dd{
width:352px;
float:left;
text-align:left;
padding-left:3px;
}
/*兼容ie 6.0*/
#content dl dd p{
padding-top:3px;
}
</style>
</head>
<body>
<p id="reg">
<h6>欢迎您注册玩具购会员！</h6>
<p id="menubox">
<ul id="menu">
<li style="left:200px;">确认服务条款</li>
<li class="current" style="left:300px;">选择用户名</li>
<li style="left:400px;">选择用户类型</li>
<li style="left:500px;">填写详细资料</li>
</ul>
</p>
<p id="content">
<form>
<dl>
<dt>用户名</dt>
<dd><p><input type="text" /></p></dd>
<dt>密码</dt>
<dd><p><input type="text" /></p></dd>
<dt>确认密码</dt>
<dd><p><input type="text" /></p></dd>
<dt></dt>
<dd><input type="button" value="注册" /></dd>
</dl>
</form>
</p>
</p>
</body>
</html>相关推荐：
p css表单布局的五个小技巧_html/css_WEB-ITnose
DIV+CSS表单布局的五个小技巧_html/css_WEB-ITnose
thinkphp表单上传文件并将文件路径保存到数据库中
热心网友
时间：2022-05-14 03:25
#myForm{width:600px;}
fieldset{border:4px solid #333 ;padding: 20px 0px 20px 20px;}
label{display: block;line-height: 2;}
input,textarea{border:1px solid #666;}
</style>
<form action="#" id="myForm" name="myForm" method="post">
<fieldset>
<legend>您的联系信息</legend>
<label for="yourName">您的姓名：（<i>必需</i>）</label>
<input type="text" name="yourName" id="yourName">
<label for="yourEmail">您的邮件：</label>
<input type="text" name="yourEmail" id="yourEmail">
<label for="yourWeb">您的网页：</label>
<input type="text" name="yourWeb" id="yourWeb">
</fieldset>
<fieldset>
<legend>您的评论</legend>
<label for="yourComment">评论内容：（<i>必需</i>）</label>
<textarea name="yourComment" id="yourComment" cols="30" rows="10"></textarea>
</fieldset>
</form>
热心网友
时间：2022-05-14 04:43
