fieldset范例2
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>