<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>
分享到：
尤溪，很简单，但是却很实在。
相关推荐
该代码定义了一个名为`setsc`的`FieldSet`实例。这个实例包含两个主要部分：标题和内容。标题设置为"fieldset"，高度固定为80像素，并启用了边框显示。内容部分采用了表单布局(`layout:'form'`)，并分为两行两列。 ...
12. **tbar**和**bbar**: 分别用于定义FieldSet顶部和底部的工具栏，可以是Ext.Toolbar实例、工具栏配置对象或按钮配置项数组。 13. **header**和**footer**: 分别控制是否创建FieldSet的头部和底部元素。如果不...
2. **checkboxName**：当 `checkboxToggle` 设置为 `true` 时，这个配置用于为 FieldSet 的复选框分配一个名称。默认值是 `[checkboxid]-checkbox`。 3. **labelWidth**：此属性用于设置 FieldSet 中标签的宽度，会...
$('#fieldset2').coolfieldset({collapsed: true}); ``` 此插件还允许自定义动画速度。例如，要快速折叠或展开，可以设置`speed`选项： ```javascript $('#fieldset3').coolfieldset({speed: "fast"}); ``` 如果...
在这个实例中，我们关注的是一个名为`jquery.coolfieldset.js`的jQuery插件，它允许用户通过点击字段集（fieldset）的标题（legend）来展开或折叠其内容。 首先，确保在页面中引入了jQuery库和`jquery.coolfieldset...
- **实例**：`<form><label>Name:</label><input name="name"/><fieldset><label>Newsletter:</label><input name="newsletter"/></fieldset></form><input name="none"/>` - **JQuery代码**：`$("form input")` ...
jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组...
less 实例 z.less html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } fieldset, img { border:none; } img{display: block;} address, ...
例如，可以先创建一个顶级`<form>`元素，然后根据需要添加`<fieldset>`、`<label>`、`<input>`等子元素。同时，还可以使用事件监听器（如`addEventListener()`）为这些元素绑定功能，如提交表单或验证输入。 `...
此外，`<fieldset>`和`<legend>`元素可以用来组织和标记表单的各个部分，增强可读性。 在压缩包内的文件“132689912227384547”可能是HTML、CSS或JavaScript文件，或者是包含这些文件的目录。为了深入理解这个实例...
2. `xtype`: 设置组件类型为`form`，这意味着它是一个表单面板。 3. `title`: 设置表单的标题。 4. `width`: 设置表单的宽度。 5. `frame`: 添加边框以使表单看起来更像一个独立的窗口。 6. `layout`: 使用`column`...
### 多个Ajax实例案例分析 #### 概述 本文档将通过一个具体的Ajax实例来深入探讨Ajax在网页中的实际应用。此示例主要聚焦于如何利用jQuery库发起Ajax请求，实现动态数据加载与更新的功能。 #### 核心代码解析 ##...
关联控件与文字描述，定义按钮，<fieldset>和组织相关表单元素。 八、HTML5新增元素 HTML5引入了新的语义化元素，如、、、、，它们增强了网页的结构性和可访问性。 九、JavaScript交互 HTML与JavaScript结合，...
表单还可能包含`<fieldset>`元素来组织相关的表单控件，以及`<legend>`元素为字段集提供标题。 步骤提示通常通过JavaScript实现，利用`window.localStorage`或`sessionStorage`来保存用户的进度，或者使用cookies。...
{xtype:"fieldset", width:500, labelAlign:"right", labelWidth:70, title:"个人信息" , collapsible:true, autoHeight:true, defaultType:"textfield", items:[ {fieldLabel:"姓名", //width:250, //...
- `<fieldset>`：用于组织相关表单元素，可添加`<legend>`定义标题。 - `<datalist>`：定义预定义的选项列表，供`<input>`使用，增加输入提示。 3. **复杂表单示例** - 包括不同类型的输入字段，如文本、电子...
省、市、地区联动选择压缩版应用实例 直接就能用. 应用说明: 页面包含: js与html放在一个包里后引入area.js即可使用.如果不放一个包.你要修改引入路径 [removed] <fieldset 省市地区联动</legend> 出 生 地：...
字段集(`fieldset`)是一种特殊的容器，用于分组相关的字段，并可以添加标题和折叠功能，如`{xtype:'fieldset', title:'角色信息', labelWidth:20, id:'rolesList', name:'rolesList', collapsible:true, autoHeight:...
本实例将演示如何使用JavaScript来获取表单中的单选按钮组（radio button group）中用户选中的值。 首先，我们来看HTML部分。在这个例子中，我们有一个表单（form），其包含一组名称相同的单选按钮。每个单选按钮都...
在本篇文章中，我们将讨论简单form标准化实例的语义结构，并详细介绍如何使用fieldset、legend、label、accesskey和optgroup标签来实现form的标准化。 一、使用fieldset和legend标签 在form中，我们经常会对form中...