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 ...
随机推荐
- 使用MongoDB在项目中实际运用
一.MongoDB,一个数据库,我们怎么去使用它呢?我们首先了解一下什么是MongoDb 官网的介绍是:MongoDB是专为可扩展性,高性能和高可用性而设计的数据库.它可以从单服务器部署扩展到大型.复 ...
- C# 填充Excel图表、图例背景色
填充背景色,一般可以选择多种不同样式来填充背景,包括填充为纯色背景.渐变背景.图片背景或者纹理背景等.下面的内容将分别介绍通过C#来设置Excel中图表背景色.以及图表中的图例背景色的方法. 使用工具 ...
- 天津联通新兴ICT业务工程师面试经历
此次是天津联通来我们学校进行校招宣讲,参加的人挺多的.一开始没打印成绩单,临时去打印的,然后排到我的时候以经快结束了 == 面试 首先当然是自我介绍啦,就巴拉巴拉了一堆自己的专业,学过什么跟职位相关的 ...
- uboot的驱动模型理解
uboot的驱动模型,简称dm, 具体细节建议参考./doc/driver-model/README.txt 关于dm的三个概念: uclass:一组同类型的devices,uclass为同一个gro ...
- 20170319 - pycurl 提示 libcurl link-time version is older than compile-time version
使用 conda update anaconda 升级后,运行程序得到如下提示: ImportError: pycurl: libcurl link-time version (7.45.0) is ...
- Fusion Log
What is Fusion Log? Also known as the Fusion Log or Assembly Binding Log Viewer. This tool is instal ...
- 【死磕 Spring】----- IOC 之解析 bean 标签：开启解析进程
原文出自:http://cmsblogs.com import 标签解析完毕了,再看 Spring 中最复杂也是最重要的标签 bean 标签的解析过程. 在方法 parseDefaultElement ...
- nginx部署静态网站
实验环境 服务器:centos7.5 1核1G Nginx版本:nginx-1.14.2 主题 部署静态文件 根据不同url请求路径,定向到不同的系统文件夹 部署静态文件 假设nginx安装在“/us ...
- 0. VIM 系列 - 源码升级最新版本vim
卸载原来的vim: $ sudo apt-get remove --purge vim $ suso apt-get clean 下载最新版本源码: $ git clone https://githu ...
- Java数据结构和算法 - 数组
Q: 数组的创建? A: Java中有两种数据类型,基本类型和对象类型,在许多编程语言中(甚至面向对象语言C++),数组也是基本类型.但在Java中把数组当做对象来看.因此在创建数组时,必须使用new ...