• 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- 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 {

    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{
	 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- 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 {
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;
		 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>

    　　

    柳志军：13418977808（手机微信），QQ:93684042
  • 相关阅读:
    【转】字典转模型需要注意的问题，以及第三方框架来处理字典转模型
    【转】使用SOAP访问Web服务
    Foundation框架2
    Foundation框架1
    什么是Protocol
    什么是Block
    什么么是Category
    ARC
    autorelease简介
    循环retain
  • 原文地址：https://www.cnblogs.com/liu-zhijun/p/10630225.html
Copyright © 2020-2023  润新知