打印

[求助] 请教一个关于表单排版的方法。（已解决）

zzguo28 [楼主]

中级会员

帖子: 134
体力: 258
威望: 0
当前: 广东茂名
离线: 2 天

1^# 大中小发表于 2008-5-18 04:03

如图。为方便您赐教，给出基本代码供您复制。敬请指点一下.

提示：您可以先修改部分代码再运行

[ 本帖最后由 zzguo28 于 2008-5-18 21:47 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

Elking

中级会员

帖子: 170
体力: 339
威望: 0
当前: 广东广州

2^# 大中小发表于 2008-5-18 13:46

这些东西还是用表格来的方便！！

提示：您可以先修改部分代码再运行

TOP

美橙vps独立IP月付189元

zzguo28 [楼主]

中级会员

帖子: 134
体力: 258
威望: 0
当前: 广东茂名
离线: 2 天

3^# 大中小发表于 2008-5-18 18:30

谢谢指点，既然form里可以嵌表格，那么嵌DIV也应该可以吧？如果这样符合标准，那我就能搞定了。

TOP

请大家尊重和保护奥运知识产权。

bujichong

初级会员

帖子: 45
体力: 94
威望: 0
离线: 20 天

专长 网页设计,前端制作,JS

4^# 大中小发表于 2008-5-18 19:02

不要为了标准而标准，
其实更重要的是代码是合理的，
这个版面你用table也不算错，
不过用标签的浮动也不难做到

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

zzguo28 [楼主]

中级会员

帖子: 134
体力: 258
威望: 0
当前: 广东茂名
离线: 2 天

5^# 大中小发表于 2008-5-18 19:18

引用:

原帖由 bujichong 于 2008-5-18 19:02 发表
不要为了标准而标准，
其实更重要的是代码是合理的，
这个版面你用table也不算错，
不过用标签的浮动也不难做到

是吗？那请您尝试用标签浮动给个实例代码赐教赐教。我正是因为定义标签浮动发觉弄不出来，才会有这个求助贴。

TOP

fuguojian1988

天天向网NET

银牌会员

帖子: 914
体力: 1868
威望: 0
当前: 河南商丘
离线: 1 天

专长 网页设计,平面,前端制作

6^# 大中小发表于 2008-5-18 20:58

既然用表格排版那表单就方便的很，何必去找麻烦呢

一个人的路，还是一个人走！

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 447
体力: 895
威望: 0
当前: 广东深圳
离线: 1 天

专长 前端制作

7^# 大中小发表于 2008-5-18 21:02

兼容ie6,ie7,FF，不过无论在结构和样式上都不是很满意！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单效果</title>
<style type="text/css">
*{  margin:0;
    padding:0;
	font-size:12px;
}
ul{ list-style:none;}
label {
	color: #0066CC;
	cursor:pointer;
}
fieldset {
	width:270px;
    position:relative;
}
p {
margin-bottom:2px;  	
}
#submit {
	height:40px;
	width:40px;
    float:right;
	margin-top:-42px;
}
#userId, #password {
	width:10em;
}
ul{ float:right; 
    margin-top:-40px;
	padding-left:10px;
	}
ul li{ margin-bottom:8px;}
</style>
</head>
<body>
<form method="post" action="">
  <fieldset>
  <legend>登录</legend>
  <p>
    <label for="userId">帐号：</label>
    <input type="text" id="userId"/>
  </p>
  <p>
    <label for="password">密码：</label>
    <input type="password" id="password" />
  </p>
  <ul>
  <li>立即注册</li>
  <li>忘记密码</li>
  </ul>
  <input type="submit" value="登陆" id="submit"/>
  </fieldset>
</form>
</body>
</html>

提示：您可以先修改部分代码再运行

我爱阿仙奴！

TOP

zzguo28 [楼主]

中级会员

帖子: 134
体力: 258
威望: 0
当前: 广东茂名
离线: 2 天

8^# 大中小发表于 2008-5-18 21:30

谢谢zidanezhicong，受教了。你的方法觉得很不错，同时提醒了我不要忘了语义化表单标签。

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 447
体力: 895
威望: 0
当前: 广东深圳
离线: 1 天

专长 前端制作

9^# 大中小发表于 2008-5-18 21:33

一个新版本，还是不够完美。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单效果</title>
<style type="text/css">
*{  margin:0;
    padding:0;
	font-size:12px;
}
ul{ list-style:none;}
label {
	color: #0066CC;
	cursor:pointer;
}
#login{
	width:260px;
	margin:0 auto;
	margin-top:50px;
}
#add{ float:left; width:170px}
#submit {
	height:40px;
	width:40px;
}
#userId, #password {
	width:10em;
	margin-bottom:3px;
}
#login ul{ float:right; 
    margin-top:-38px;
	
	}
#login ul li{ margin-bottom:10px;}
#login ul li a{ text-decoration:none; color:#333333;}
</style>
</head>
<body>
<div id="login">
<form method="post" action="">
  <p id="add">
    <label for="userId">帐号：</label>
    <input type="text" id="userId"/>
    <label for="password">密码：</label>
    <input type="password" id="password" />
  </p>
  <p>
  <input type="submit" value="登陆" id="submit"/>
  </p>
  <ul>
  <li><a href="#">立即注册</a></li>
  <li><a href="#">忘记密码</a></li>
  </ul>
</form>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

我爱阿仙奴！

TOP

zzguo28 [楼主]

中级会员

帖子: 134
体力: 258
威望: 0
当前: 广东茂名
离线: 2 天

10^# 大中小发表于 2008-5-18 21:47

TO：zidanezhicong
就这样已很满意了。您别让人太感动。
再次感谢您回答问题的认真和修改。
这已是我所希望达到的效果了。

-------------------------

引用:

既然用表格来排版就很简单，何必找麻烦

对于Elking的表格来排版我也认为不错，所用代码少些。
但这不是找自找麻烦。选择zidanezhicong的方法，并不是出于对标准方面的考虑，个人认为是这种方法才更适合扩展和美化。

[ 本帖最后由 zzguo28 于 2008-5-18 22:22 编辑 ]

TOP