26 , CSS 构造表单
1. 表单标签使用
2. 下拉菜单背景
3. 滚动条的使用
4. 结构化表单布局
1 1 1 1. . . . 表单标签的使用
<label for=”name”>姓名: <input type=”text” name=”name”id=”name”/>
2 2 2 2. . . . 去掉默认的表单间隔
Form {
Margin: 0;
Padding: 0;
}
3 3 3 3. . . . 给文本框添加漂亮的边框
Input,textarea {
Border: 3px double #333;
}
4. 给下拉菜单设置背景色
select {
background:red;
}
. 5. 给文本区域添加滚动条
textarea {
SCROLLBAR-FACE-COLOR: #333;
SCROLLBAR-HIGHLIGHT-COLOR: #666;
SCROLLBAR-SHADOW-COLOR: #333;
SCROLLBAR-3DLIGHT-COLOR: #999;
SCROLLBAR-ARROW-COLOR: #999;
SCROLLBAR-TRACK-COLOR: #000;
SCROLLBAR-DARKSHADOW-COLOR: #000;
}
6 6 6 6. . . . 表单外边框设置 t fieldset legend
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;
}
7. 结构化表单布局
<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>
#regForm fieldset {
padding:0 20px 10px;
border:0;
border-top:1px #d0d0bf solid;
}
#regForm legend {
padding:0 10px;
font-weight:bold;
}
#regForm .dataArea {
padding:2px 0;
}
#regForm .frist {
padding:8px 0 2px;
}
#regForm .subArea input {
padding:1px 4px;
}
#regForm label {
width:110px;
text-align:right;
float:left;
}
1 表单标签的使用
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
label{
background: red;
display: block;
}
</style>
</head> <body>
<form>
<label for="username">用户名：<input type="text" id="username" name="username"></label>
<label for="sex1"><input type="radio" value="男" id="sex1" name="sex"/>男</label><label for="sex2"><input type="radio" value="女" id="sex2" name="sex2"/>女</label>
</form>
只要点用户名就能够把光标定位在里面,label可以布局
</body>
</html>
2 去掉默认的表单间隔
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>去掉默认的表单间隔</title>
<style type="text/css">
form{
margin: 20px;
padding: 20px;
}
</style>
</head> <body>
<form>
<input type="text"/>
</form> </body>
</html>
3给文本框添加漂亮的边框
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>给文本框添加漂亮的边框</title>
<style type="text/css">
form{ }
input,textarea{
border:2px solid black;
}
</style>
</head> <body>
<form>
<input type="text"/>
<textarea cols="20" rows="8"> </textarea>
</form> </body>
</html>
4给下拉菜单设置背景色
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>给下拉菜单设置背景色,没成功</title>
<style type="text/css"> select option a.{
background: green；
}
select option b.{
background: red；
}
select option c.{
background: blue；
}
</style>
</head> <body>
<form>
<select>
<option class="a">上海</option>
<option class="b">盐城</option>
<option class="c">北京</option>
</select>
</form> </body>
</html>
5给文本区域添加滚动条
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>给文本区域添加滚动条</title>
<style type="text/css">
form{ }
textarea{
width: 300px;
height: 150px;
SCROLLBAR-FACE-COLOR: #333;
SCROLLBAR-HIGHLIGHT-COLOR: #666;
SCROLLBAR-SHADOW-COLOR: #333;
SCROLLBAR-3DLIGHT-COLOR: #999;
SCROLLBAR-ARROW-COLOR: #999;
SCROLLBAR-TRACK-COLOR: #000;
SCROLLBAR-DARKSHADOW-COLOR: #000;
}
</style>
</head> <body>
<form>
<textarea> </textarea>
</form>
ietester的IE8能显示出来
</body>
</html>
6表单外边框设置 t fieldset legend
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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>
</html>
7结构化表单布局
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>结构化表单布局</title>
<style type="text/css">
#regForm fieldset {
padding:0 20px 10px;
border:0;
border-top:1px #d0d0bf solid;
}
#regForm legend {
padding:0 10px;
font-weight:bold;
}
#regForm .dataArea {
padding:2px 0;
}
#regForm .frist {
padding:8px 0 2px;
}
#regForm .subArea input {
padding:1px 4px;
}
#regForm label {
width:110px;
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>
</html>
7结构化表单布局2
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>结构化表单布局</title>
<style type="text/css">
label{
background: red;
width: 110px;
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>
</html>
26 , CSS 构造表单的更多相关文章
- CSS构造表单
结构化表单布局 <head> <meta http-equiv="Content-Type" content="text/html; charset=G ...
- 学习笔记 第十章 使用CSS美化表单
第10章 使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1 表单的基本结构 表单包含多个标签,由很多控件组成 ...
- 纯CSS实现表单验证
ladies and 乡亲们,表单验证你在做吗?客户端or服务器端,javascript or jquery,动手写 or 使用插件,今天我们来探索下使用纯css实现表单验证,借以学习css sele ...
- （10）用css建立表单
1.用css建立表单 本篇资料主要介绍使用css设置表单元素的方法. 表单是网页与用户交互所不可缺少的元素,表单是网页的访问者进行交互的接口,例如大家都常遇到的:网上注册.网上登录.网上交易.网上投票 ...
- 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 ...
随机推荐
- Xshell访问和连接Linux
Xshell是一款强大的安全终端模拟软件,Xshell 模拟了远程主机的操作,其实质就是通过访问和连接到远程主机,在本地实现对远程主机的操作. 一.下载 官网:https://www.netsara ...
- 《前端之路》之 JavaScript 进阶技巧之高阶函数（下）
目录 第二章 - 03: 前端 进阶技巧之高阶函数 一.防篡改对象 1-1:Configurable 和 Writable 1-2:Enumerable 1-3:get .set 2-1:不可扩展对象 ...
- docker常规操作——启动、停止、重启容器实例
一.启动一个已经停止的容器实例 docker start 容器ID或容器名,建议使用容器ID,容器ID支持模糊查询而容器名称不支持1. 先查看已经暂停的容器实例信息 2. 通过docker start ...
- DSAPI 生成桌面图标（带数字）
功能:在桌面上创建一个带有指定数字的图标. 效果图: 生成的ICO图标 代码 Private Sub 生成桌面图标(消息数量 As Integer) Try Dim B As New Bitmap(M ...
- ASP.NET三层架构项目创建流程
1.进入VS2010,新建项目—>Visual C#—>Web—>ASP.NET空Web应用程序,如图所示: 2.在解决方案处右击—>新建项目—>Windows—> ...
- MTK Camera相关的Makefile Option详解
列举了所有Camera相关的MakefileOption,并对其功能含义和OptionValues做了详细的解释.[KEYWORD]Others[SOLUTION]YUVCAM_INTERPOLATI ...
- 不同数据库的表迁移SqlServer
INSERT INTO table SELECT * FROM OPENDATASOURCE ('SQLOLEDB', 'Data Source=172.168.44.146;User ID=s ...
- July 08th. 2018, Week 28th. Sunday
Make each day your masterpiece. 让生命中的每一天都成为杰作. From John Wooden. Try to focus on what we are doing r ...
- 基于开源CA系统ejbca community 6.3.1.1构建私有CA管理数字证书
最后更新于2017年01月24日 一.为什么 为什么写这篇文章?ca是什么?数字证书是什么?ejbca又是什么? 让我们从http与https说起.http是超文本传输协议(HyperText Tra ...
- CTF丨从零开始搭建WEB Docker靶场
第十二届全国大学生信息安全竞赛即将开始,小伙伴们有报名参加的吗?大家在比赛前是否开始进行模拟演练了?今天,i春秋将与大家分享靶场搭建的相关内容,帮助大家更好的进行实操演练. 学习搭建Docker靶场之 ...