html表单如何添加背景图片

html表单如何添加背景图片,第1张

在Dreamweaver CS6中新建一个html空白文档,将页面内容放入<body></body>中。选中背景图即可插入。

详细步骤:

工具/材料:

1、新建文件夹并将其命名为“表格”。

2、将背景图放入新建的”表格“文件夹里。

3、在Dreamweaver CS6中新建一个html空白文档。

4、将页面内容放入<body></body>中。

5、在<body后按一下空格键,找到background,再按空格,点击“浏览”,找到背景图的位置。

6、选中背景图,点击“确定”。

7、图片插入完成。

8、将这个html另存为在“表格”文件夹里。

9、点击这个预览图标,就可以在浏览器中查看效果。

10、完成效果图。

参考资料:

百度百科-HTML表单

自学自强,不懂就问,但不能太依赖对方哦,有时自己解决问题才是真正学到东西的,^.^

不废话,css代码:

<style>

.Gavin_Design ,.gd div{margin:0 auto overflow:hidden height:auto background-color:transparent color:#333}

.gd{width:1000px}

.gd input ,.gd textarea{margin:0 padding:0 background:none border:none font-size:14px resize:none outline:0}

.gd .part{padding:15px 0}

.gd .textarea{height:90px border:1px solid #ddd -webkit-box-shadow:inset 0 3px 2px rgba(0,0,0,.05) -moz-box-shadow:inset 0 3px 2px rgba(0,0,0,.05) box-shadow:inset 0 3px 2px rgba(0,0,0,.05) background:#fff padding:10px}

.gd .textarea textarea{width:100% height:90px overflow:hidden overflow-y:auto}

.gd .bottom_contorl{margin-top:15px}

.gd .bottom_contorl .express{float:left height:32px line-height:32px padding-left:10px}

.gd .bottom_contorl .button{float:right width:320px height:32px text-align:center font-size:0}

.bottom_contorl .button input{height:32px width:150px margin-left:10px color:#fff cursor:pointer}

.bottom_contorl .button input.submit{background:#4779be}

.bottom_contorl .button input.submit:active{background:#3c6eb4}

.bottom_contorl .button input.cancel{background:#b5b5b5}

.bottom_contorl .button input.cancel:active{background:#a9a9a9}

.gd .part .init{width:100% border-collapse:collapse color:#333}

.gd .part td{border-bottom:1px solid #e5e5e5 height:60px padding:2% vertical-align:middle}

.gd .part .user{overflow:hidden white-space:nowrap text-overflow:ellipsis font-size:12px width:60px}

.gd .part .me{color:#666}

.gd .part .reply{color:#22627d}

.gd .part .comments{font-size:14px}

</style>

html结构代码(div+css):

<div class="Gavin_Design gd">

 <div class="part">

  <div class="textarea">

   <textarea placeholder="你有什么好的建议请留言"></textarea>

  </div>

  <div class="bottom_contorl">

   <div class="express">表情</div>

   <div class="button">

    <input type="button" class="submit" value="提交">

    <input type="button" class="cancel" value="取消">

   </div>

  </div>

 </div>

 <div class="part">

  <table cellpadding="0" cellspacing="0" class="init">

   <tr>

    <td width="10%"><div class="user me">我</div></td>

    <td width="90%" class="comments">老师你好,周末快乐!</td>

   </tr>

   <tr>

    <td><div class="user reply">秋叶,很长的名字</div></td>

    <td class="comments">下午好,秋荷!</td>

   </tr>

   <tr>

    <td width="10%"><div class="user me">我</div></td>

    <td width="90%" class="comments">好长不想打字,好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字。</td>

   </tr>

   <tr>

    <td><div class="user reply">秋叶,很长的名字</div></td>

    <td class="comments"><b>亲爱的。。。好长不想打字,好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字好长不想打字</b></td>

   </tr>

  </table>

 </div>

</div>

希望能帮助到你^.^


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8294981.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存