form表单内textarea背景图片设置

form表单内textarea背景图片设置

ID:13102819

大小:57.50 KB

页数:4页

时间:2018-07-20

form表单内textarea背景图片设置_第1页
form表单内textarea背景图片设置_第2页
form表单内textarea背景图片设置_第3页
form表单内textarea背景图片设置_第4页
资源描述:

《form表单内textarea背景图片设置》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库

1、DivCSS实例教程:Form表单内textarea背景图片设置 网站开发的过程不可避免的会遇到表单元素的应用。表单form元素是网页里面一种相对特殊的元素,它用来搜集信息。表单一般有多个元素组成,最常见的有,文本框、单选或复选、下拉菜单、文本域和按钮等。  为了美化页面,常常将表单元素设计在不同的外观样式。可以给文本框设置不同的背景色、边框和文字颜色等,文本域一般是一个较大的区域,可以加入背景图片予以美化。前几日,有一位朋友在进行文本域textarea背景图片设置的时候遇到了一点问题。背景图片并不是静止的,会随着文本域内的内容增加而出现位置上的变

2、化。下面开始一步一步加以说明。  首先来看一下本实例的效果。  这是一个简单的表单,由两个元素组成。上部是文本域textarea,下部是一个提交按钮input。编写XHTML代码如下。ExampleSourceCode[www.52css.com]     

3、   

    DivCSS实例教程:Form表单内textarea背景图片设置 -     www.52CSS.com

  建立一个表单form,并赋予其id为MrJin。在其内部建立一个文本域textarea元素,赋予id为MrJin_52CSS。最后放置一个提交按钮。  下面开始CSS样式定义,编码如下。Examp

4、leSourceCode[www.52css.com]#MrJin_52CSS {    display:block;    width:350px;    height:240px;    background:url(bg.jpg) no-repeat 10px 30px;    border:1px solid #06f;    padding:5px;    }   将textarea元素转换为块元素,设置其宽度和高度,定义背景图片为bg.jpg,不重复,定位于x轴10px、y轴30px。设置边框为1像素的实线,颜色为#06f。为了使输入文

5、本与边框之间有一定的距离,设置内边距为5px。  下面是本案例所用到的背景图片:  看此时表单的运行效果。

6、2"/>DivCSS实例教程:Form表单内textarea背景图片设置-www.52CSS.com
#MrJin_52CSS{display:block;width:350px;height:240px;background:url(http://www.52css.com/attachments/month_0804/c20084189415.jpg)no-repeat10px30px;border:1pxsolid#06f;padding:5px;}

7、e>

DivCSS实例教程:Form表单内textarea背景图片设置-

8、arget="_blank">www.52CSS.com

运行上面的代码,试着在

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。