|
Div+CSS速成第九天:CSS表单设计
来源：远方教程 作者：远方教程 发布时间：2015-04-09 查看次数： 8128 访问[新版]
好了，下面运行一下代码看看两者的效果吧
<!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=gb2312" />
<style type="text/css">
.text1 { border:1px solid #f60; color:#03C;}
.text2 { border:2px solid #390; width:200px; height:24px; font-size:16px; font-weight:bold; line-height:1.6;}
.text3 { border:2px solid #C3C; height:20px; background:#ffeeff url(/upload/2010-08/28/icon9.gif) right 3px no-repeat;}
.text4 { border:2px solid #F60; width:150px; height:29px;font-size:16px; line-height:1.6; background:url(/upload/2010-08/28/bg_9.gif) 0 0 no-repeat;}
.area { border:1px solid #F90; overflow:auto; background:#fff url(/upload/2010-08/28/bg_9_1.gif) right bottom no-repeat; width:99%; height:100px;}
</style>
</head>
<body>
<p>
<input type="text" name="textfield" id="textfield" />
这是默认样式
</p>
<p>
<input name="textfield2" type="text" class="text1" id="textfield2" value="我是蓝色的" />
这是改变边框的样式和文字颜色
</p>
<p>
<input name="textfield3" type="text" class="text2" id="textfield3" value="看我大吧" />
这是改变边框并设置高宽和字体大小的样式
</p>
<p>
<input class="text3" type="text" name="textfield4" id="textfield4" />
这是增加背景图片实例，也可放左侧
</p>
<p>
<input class="text4" type="text" name="textfield5" id="textfield5" />
这是增加了一个背景图片为gif动画
</p>
<p>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</p>
<p>
<textarea class="area" name="textarea2" id="textarea2" cols="45" rows="5"></textarea>
</p>
</body>
</html> |
提示：可以先修改部分代码后再运行
|
相关文章
图片新闻
|
|
|
美女户外健身, 美翻
真人美女和动漫美女