记自己的Form布局一种

caiceclb

浏览: 242428 次
性别:
来自: 郑州

最近访客更多访客>>

nucleus

f0rb

Mr_冰凉

raolongbao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

XHTML CSS

Nokia XHTML CSS 框架 HTML

<!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>
  <title> new document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="author" content="tofishes@163.com" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css">
body { font-size:14px; }
ul { list-style:none; }


fieldset .text, fieldset .radio, fieldset .checkbox, fieldset label, fieldset dfn, fieldset img, fieldset .submit, fieldset a, fieldset textarea, fieldset select { padding:0 2px;  vertical-align: middle;  }
fieldset .text { width: 13em; height: 18px; line-height: 18px; font-size: 14px; }
fieldset .title { width: 40em; }
fieldset .short { margin-right: 5px; width: 40px; }
fieldset .medium {width: 80px; }
fieldset label { display: inline-block; margin:0 10px 0 0;width: 80px; font-weight: 700; color: #666; text-align: right;}
fieldset p, fieldset .action { margin: 0 0 15px; }
	fieldset.long label { width: 100px; }
fieldset .desc { padding-left: 20px; color: #666; line-height: 150%;  }
fieldset p.desc, fieldset .action { padding:0 0 0 100px; }
	fieldset.long .action, fieldset.long p.desc { padding: 0 0 0 120px; }
fieldset p.desc {margin-top: -10px;}
fieldset dfn { margin:0 0 0 10px; font-style: normal; color: red; }
fieldset .radio, fieldset .checkbox { margin: -2px 5px 0 0; }
fieldset .submit { border: none; }
fieldset select{ margin:0 10px 0 0; padding:0; font-size: 14px; color: #666;}
fieldset a, fieldset a:visited, #result a, #result a:visited { color: #39c; }
fieldset a:hover { color: #f60; }
fieldset textarea { padding:2px; width: 400px; height: 120px; vertical-align: top; font-size: 14px; }
fieldset .file { height: 22px; line-height: 22px; vertical-align: middle; }
fieldset .preview { padding:2px; border: 1px solid #aaa; }
fieldset .category, fieldset .select { margin:0 0 15px; zoom:1;overflow:hidden; }/* select用于右侧还有多个输入框选择，比如多个联系方式 */
/* 特殊行使用div布局，label左浮动，右边可以是个div wrapper，保证整个框架不乱，然后这个div wrapper里面想怎样布局都行了 */
	fieldset .category label { float: left; }
	fieldset .category ul { float:left; display: inline; margin:0 5px; width: 190px; height: 180px; border: 1px solid #ccc; verticla-align:top; overflow: auto; }
		fieldset .select ul li { margin: 5px 0; }
		fieldset .category ul li { margin:1px; padding:0 5px; cursor: default;}
		fieldset .category ul li.title { background: #fcc; width: auto; }
		fieldset .category ul li:hover, fieldset .category ul li.curr { background: #dcf url(img/icon.png) no-repeat right -294px; }
fieldset iframe.editor { vertical-align: top; width: 560px; height: 230px; border: 1px solid #ccc; }/*如果有iframe的可视化编辑器*/
  </style>
 </head>

 <body>
  		<form enctype="multipart/form-data" method="post" action="" >
						<fieldset>
							<p><label>标题：</label>
								<input type="text" class="text title" name="title" /><dfn>*</dfn>
							</p><p class="desc">简洁形象的标题，方便用户搜索及浏览</p>
							<p><label>TAG标签：</label>
								<input type="text" class="text title" name="" />
							</p><p class="desc">多写几个与内容有关的标签，会让更多的人找到你的资源哦！(用逗号分开)</p>
							<p><label>作者：</label>
								<input type="text" class="text" name="" /><dfn>*可以作为错误警示信息的地方</dfn>
							</p>
							<p><label>分类：</label>
								<select name="">
									<option value="">请选择分类...</option>
								</select><dfn>*</dfn>
							</p>							
							<p><label>是否原创：</label>
								<input type="radio" class="radio" name="" />原创(<a href="">请阅读原创声明</a>)
								<input checked="checked" type="radio" class="radio" name="" />转载(<a href="">请阅读转载声明</a>)
							</p>
							<p><label>下载所需：</label>
								<input type="text" class="text short" name="" value="0" />
								<select name="">
									<option value="">积分</option>
								</select>
							</p>
							<p><label>图片预览：</label><!-- 如果不需要就去掉这一段 -->
								<img id="preview" class="preview" src="http://pic.digu.com/file/11/50/24/12/default/SIGN11502412_128x128.jpg?t=1270015986409" />
							</p>
							<p><label>缩略图：</label>
								<input type="file" class="file" name="" size="35" /><dfn>*</dfn>
							</p><p class="desc">允许上传格式:jpg|gif|png|bmp|jpeg</p>
							<p><label>上传文件：</label>
								<input type="file" class="file" name="" size="35" /><dfn>*</dfn>
							</p><p class="desc">允许上传格式:jar|sis</p>
							<div class="category"><label>系统平台：</label>
								<ul><!-- 最多放3个ul，应该够用了-->
									<li class="title">请选择品牌</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
									<li>Nokia</li>
									<li>Mootaool</li>
								</ul>
								<ul>
									<li class="title">请选择型号</li>
									<li>S40系列</li>
									<li>S90系列</li>
								</ul>
								<ul>
									<li class="title">请选择系统</li>
									<li>S40系列</li>
									<li>S90系列</li>
								</ul>
							</div>			
							<p><label>文件简介：</label>
								<textarea rows="6" cols="60" name=""></textarea>
							</p>
							<p class="action"><!-- 所有的隐藏域和隐藏iframe可以写这里 -->
								<input type="submit" class="submit btn-red-small" value="确认并提交" />
							</p>
						</fieldset>
 </body>
</html>

分享到：

转一个原文：Tell,Don't Ask | js递归实现一个问题的解答

2010-04-02 10:43
浏览 1127
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

记自己的Form布局一种

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

记自己的Form布局一种

评论

发表评论

相关推荐

使用绝对定位的透明背景研究

暂时感觉IE6这个莫名的bug...

IE6这个大SB... ...

纯css边框实现菜单下拉三角箭头动态效果，又见IE奇现象

发现IE6、IE7下列表li中内联块级元素的错位bug

一行内，左右分离的布局一例

不用embad标签的object嵌入flash

IE6对Eclipse新建的xhtml文件有点感冒

IE对百分比宽度的理解。。。貌似很囧

一时灵感之遮罩层妙用

最简洁图片圆角边框-无需额外标签

div内部块级元素设置外间距（margin）对其的影响

CSS巧用text-shadow做图片阴影（小小研究版）

浮动列表在ie6

IE下由浮动引起的外侧div边框部分消失

浏览器视窗内纯CSS的层固定位置及发现的一个针对IE6的怪癖问题

IE和火狐中关于禁止选取文本

CSS技巧代码搜刮

莫名其妙的IE 3像素Bug

块级元素相互不能任意包含，比如p中不能包含任何块级元素

最近访客更多访客>>