CSS构造表单
结构化表单布局
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>选择符类型_标签选择符</title>
<style type="text/css">
#regForm fieldset {
padding:20px;;
border:0;
border-top:1px #d0d0bf solid;
}
#regForm legend {
padding:0 10px;
font-weight:bold;
}
#regForm .dataArea {
padding:3px 0;
}
#regForm .frist {
padding:8px 0 2px;
}
#regForm .subArea input {
padding:1px 4px;
}
#regForm label {
width:112px;
text-align:right;
float:left;
}
</style>
</head> <body>
<form id="regForm">
<fieldset>
<legend>登陆信息</legend>
<div class="dataArea frist">
<label for="username"> 用户 名 : </label><input type="text" id="username" class="input" />
</div>
<div class="dataArea">
<label for="password"> 密 码 : </label><input type="text" id="password" class="input" />
</div>
<div class="dataArea">
<label for="passwordVerify"> 确 认 密 码 : </label><input type="text" id="passwordVerify" class="input" />
</div>
</fieldset>
<fieldset>
<legend>个人信息</legend>
<div class="dataArea frist">
<label for="nickname"> 昵 称 : </label><input type="text" id="nickname" />
</div>
<div class="dataArea">
<label for="email" class="hint"> 电子邮 件 : </label><input type="text" id="email" />
</div>
<div class="subArea">
<input type="submit" value="注册 " /> <input type="button" value="返回" />
</div>
</fieldset>
</form>
</body>
表单外边框设置
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>选择符类型_标签选择符</title>
<style type="text/css">
Fieldset {
Margin:0 0 10px 0;
Padding: 5px;
Border: 1px solid #333;
}
Legend {
Background-color: #ddd;
Margin:0;
Padding: 5px;
Border-style: solid;
Border-width: 1px;
Border-color: #fff #aaa #666 #fff;
}
Fieldset {
Background: #ddd;
}
</style>
</head> <body>
<form>
<fieldset>
<legend>登陆信息</legend> </fieldset>
</form>
</body>
CSS构造表单的更多相关文章
- 26 , CSS 构造表单
1. 表单标签使用 2. 下拉菜单背景 3. 滚动条的使用 4. 结构化表单布局 1 1 1 1. . . . 表单标签的使用 <label for=”name”>姓名: <inpu ...
- 纯CSS实现表单验证
ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...
- (10)用css建立表单
1.用css建立表单 本篇资料主要介绍使用css设置表单元素的方法. 表单是网页与用户交互所不可缺少的元素,表单是网页的访问者进行交互的接口,例如大家都常遇到的:网上注册.网上登录.网上交易.网上投票 ...
- 学习笔记 第十章 使用CSS美化表单
第10章 使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1 表单的基本结构 表单包含多个标签,由很多控件组成 ...
- css中的单冒号和双冒号
最近突然被别人问起css单冒号和双冒号有什么区别,答曰:"不知道". 虽然还在填坑中,但作为一个跨过了初级的FEer,感觉着实汗颜,刚好今天下午在搜别的问题的时候,突然看到一个对比 ...
- css表格表单和统筹
css:表格表单和统筹 学习目标 1.表单标签及属性高级 2.表格标签及属性高级 3.CSS统筹 4.BFC概念和应用场景 一.表单标签及属性高级 回顾: 表单的作用:用来收集用户的信息的; 表单的组 ...
- CSS之表单元素
表单就是收集用户信息的,就是让用户填写的.选择的. 1 <div> 2 <h3>欢迎注册本网站&l ...
- 应用Css美化表单
原来的效果 美化之后的效果 实现代码 <style> .container { margin:0auto; width:620px; } fieldset { padding:18px ...
- CSS控制表单
一个简单的网站注册页面制作. 创建CSS文件如下: @charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0 ...
随机推荐
- ASP.NET制作一个简单的等待窗口
前一阵做一个项目,在处理报表的时候时间偏长,客户提出要做出一个等待窗口提示用户等待(页面太久没反映,用户还以为死了呢).在分析这一需求之后,觉得如果要实现像winform应用中的processbar太 ...
- Sqli-labs less 30
Less-30 Less-30与less-29原理是一致的,我们可以看到less-30的sql语句为: 所以payload为: http://127.0.0.1:8080/sqli-labs/Less ...
- Python中编码问题?
一.键盘输入 raw_input('请输入:'.decode('utf-8').encode('gbk'))raw_input(unicode('请输入:','utf-8').encode('gbk' ...
- POJ 2013
#include <iostream> #include <string> #define MAXN 20 using namespace std; string _m[MAX ...
- Android 内存剖析 – 发现潜在问题
简介 移动平台上的开发和内存管理紧密相关.尽管随着科技的进步,现今移动设备上的内存大小已经达到了低端桌面设备的水平,但是现今开发的应用程序对内存的需求也在同步增长.主要问题出在设备的屏幕尺寸上-分辨率 ...
- java EE 5 Libraries 删掉后怎么重新导入
(1)Add Library 中 MyEclipse Libraries (2)输入 java 即可找到 问题解决.
- shell如何自动输入密码
shell如何自动输入密码 http://linux.ctocio.com.cn/171/12162171.shtml
- [你必须知道的.NET]第三十二回,,深入.NET 4.0之,Tuple一二
发布日期:2009.06.01 作者:Anytao © 2009 Anytao.com ,Anytao原创作品,转贴请注明作者和出处. Tuple,是函数式编程的概念之一,早见于Elang.F#等动态 ...
- 十佳AngularJS框架
您是否还在烦恼如何没有困难地创建一个创新型的Web应用程序?那么一定不要错过这个集合!在本文中,小编为大家收集了十个非常棒的AngularJS框架.AngularJS框架拥有大量有用的工具和组件,可以 ...
- Java7编程高手进阶读书笔记--final学习
这段时间终于有了一些自己的时间,在网上淘了一本书把java学习下,顺便记下每日的学习心得 工作快两年多了,才知道基础的东西永远看的时候都有一个新的体验,今天中午看了下final,把自己炒的代码贴在这以 ...