当前位置： 代码迷 >> Web前端 >> fieldset范例2
  详细解决方案

fieldset范例2

热度：133   发布时间：2012-11-23 22:54:33.0
fieldset实例2

<html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
	div.RoundedCorner{background: #78ACFF}
	b.rtop, b.rbottom{display:block;background: #FFFFFF}
	b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #78ACFF}
	b.r1{margin: 0 5px}
	b.r2{margin: 0 3px}
	b.r3{margin: 0 2px}
	b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head>
<body>
<form action="dreamdu.php" method="post" enctype="multipart/form-data" id="dreamdu">     
 <fieldset>
  <legend>用户名与密码:</legend>
  <input name="hiddenField" type="hidden" value="hiddenvalue" />
  <label for="username">用户名:</label>
  <input type="text" id="username" value="www.dreamdu.com" />
  <label for="pass">密码:</label>
  <input type="password" id="pass" />
 </fieldset>
 <fieldset>
  <legend>性别:</legend>
  <input type="radio" value="1" id="sex" />
  <label for="boy">男</label>
  <input type="radio" value="2" id="sex" />
  <label for="girl">女</label>
  <input type="radio" value="3" id="sex" />
  <label for="sex">保密</label>
 </fieldset>
 <fieldset>
  <legend>我最喜爱的:</legend>
  <input type="checkbox" value="1" id="fav" />
  <label for="computer">计算机</label>
  <input type="checkbox" value="2" id="fav" />
  <label for="trval">旅游</label>
  <input type="checkbox" value="3" id="fav" />
  <label for="buy">购物</label>
 </fieldset>
 <fieldset>
  <legend>对梦之都的意见:</legend>
  <label for="select">你对梦之都的感觉</label>
  <select size="1" id="select">
   <option>很全面,很好</option>
   <option>一般般吧,还要努力</option>
   <option>有很多问题,不过还可以</option>
  </select>
 </fieldset>
 <fieldset>
  <legend>梦之都编程语言选择:</legend>
  <label for="multipleselect">你想在梦之都学习的编程语言</label>
  <select size="10" multiple="multiple" id="multipleselect">
   <option>XHTML</option>
   <option>CSS</option>
   <option>JAVASCRIPT</option>
   <option>XML</option>
   <option>PHP</option>
   <option>C#</option>
   <option>JAVA</option>
   <option>C++</option>
   <option>PERL</option>
  </select>
 </fieldset>
 <fieldset>
  <legend>我要在梦之都学:</legend>
  <label for="WebDesign">选择一个你在梦之都最想学的</label>
  <select id="WebDesign">
   <optgroup label="client">
    <option value="HTML">HTML</option>
    <option value="CSS">CSS</option>
    <option value="javascript">javascript</option>
   </optgroup>
   <optgroup label="server">
    <option value="PHP">PHP</option>
    <option value="ASP">ASP</option>
    <option value="JSP">JSP</option>
   </optgroup>
   <optgroup label="database">
    <option value="Access">Access</option>
    <option value="MySQL">MySQL</option>
    <option value="SQLServer">SQLServer</option>
   </optgroup>
  </select>
 </fieldset>
 <fieldset>
  <legend>个人化信息:</legend>
  <label for="myimage">个性照片上传</label>
  <input type="file" id="myimage" size="35" maxlength="255" />
  <label for="contactus">联系我们</label>
  <textarea cols="50" rows="10" id="contactus">
   dreamer dreamdu[at]163[dot]com
  </textarea>
 </fieldset>
 <fieldset>
  <legend>提交:</legend>
  <input type="submit" value="submit" id="submit" />
  <input type="reset" value="reset" id="reset" />
 </fieldset>
</form>


<div class="RoundedCorner">
	<!-- top -->
	<b class="rtop">
		<b class="r1"></b>
		<b class="r2"></b>
		<b class="r3"></b>
		<b class="r4"></b>
	</b>
	
	<!-- center -->
	<p><center>中间内容(无图片实现圆角框)</center></p>
	
	<!-- bottom -->
	<b class="rbottom">
		<b class="r4"></b>
		<b class="r3"></b>
		<b class="r2"></b>
		<b class="r1"></b>
	</b>
</div>

</body>
</html>
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.