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 ...
随机推荐
- 为什么range不是迭代器？range到底是什么类型？
迭代器是 23 种设计模式中最常用的一种(之一),在 Python 中随处可见它的身影,我们经常用到它,但是却不一定意识到它的存在.在关于迭代器的系列文章中(链接见文末),我至少提到了 23 种生成迭 ...
- 设计模式(Design Patterns)的简单讲解
模式的诞生与定义 模式(Pattern)起源于建筑业而非软件业(小本本记下来--) 模式之父--美国加利佛尼亚大学环境结构中心研究所所长Christopher Alexander博士; 模式 : -C ...
- Bootstarp的安装以及简单的使用方法（pycharm中）
一.安装 首先打开Bootstarp的官网:https://v3.bootcss.com 下载完成后,解压压缩包,把解压后的文件导入pycham中 在HTML页面中的style中导入bootstrap ...
- Docker 创建 Crucible4.6.1 以及与 Crowd3.3.2 实现 SSO 单点登录
目录 目录 1.介绍 1.1.什么是 Crucible? 2.Crucible 的官网在哪里? 3.如何下载安装? 4.对 Crucible 进行配置 4.1.破解 Crucible 第一步 4.2. ...
- MUI开发大全
最近很久没有更新博客了,因为一直在学习前端h5 手机app的开发.曾经一度觉得自己css和js学得不错,进入到前端领域后才发现水很深~,写代码时HBuilder和VS混用,HBuilder的快捷键和代 ...
- Java Socket聊天室编程(二)之利用socket实现单聊聊天室
这篇文章主要介绍了Java Socket聊天室编程(二)之利用socket实现单聊聊天室的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下 在上篇文章Java Socket聊天室编程(一)之 ...
- 百度APP移动端网络深度优化实践分享(二)：网络连接优化篇
本文由百度技术团队“蔡锐”原创发表于“百度App技术”公众号,原题为<百度App网络深度优化系列<二>连接优化>,感谢原作者的无私分享. 一.前言 在<百度APP移动端网 ...
- dat.gui stats.js 通用参数配置及图像统计工具
在网上看到了一个非常好的JS烟雾效果 https://paveldogreat.github.io/WebGL-Fluid-Simulation/看源码时发现了dat.gui很好用. dat.gui ...
- Java集合-ArrayList源码解析-JDK1.8
◆ ArrayList简介 ◆ ArrayList 是一个数组队列,相当于 动态数组.与Java中的数组相比,它的容量能动态增长.它继承于AbstractList,实现了List, RandomAcc ...
- python的进程与线程（二）
线程 之前了解了操作系统的发展史,也知道了进程和线程的概念,归纳一下就是: 进程:本质上就是一段程序的运行过程(抽象的概念) 线程:最小的执行单元,是进程的实体 ...