1、新建html文档。
2、书写html。<input name="" type="text" value="姓名" onfocus="if(this.value=='姓名'){this.value=''}" onblur="if(this.value=='') {this.value='姓名'}"/><br /><br /><input name="" type="text" value="" placeholder="目的地" ><br /><br /><input type="text" class="text" value="请输入您要查询的内容" onfocus="if(this.value == '请输入您要查询的内容')this.value=''" onblur="if(this.value == '')this.value='请输入您要查询的内容'" name="word"><br />
3、书写css样式。<style>* { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; outline: 0; -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent }body { margin:0; padding:0; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 16px;color: #000; background-color: #fff;-webkit-text-size-adjust:none; padding:20px;}div,form,img,ul,ol,li,p,dl,dt,dd { margin: 0; padding: 0; border: 0;}h1,h2,h3,h4,h5,h6 { margin:0; padding:0;font-family:'\5FAE\8F6F\96C5\9ED1';font-weight:normal;font-size:14px;}address, caption, cite, code, dfn, th, var { font-style: normal; font-weight: normal;}fieldset, img, input { border: 0 none;}table{border-collapse: collapse; border-spacing: 0;}ul,li {list-style:none;}i,em{ font-style:normal;}fieldset,img{border:0px;}textarea { resize: vertical }a {text-decoration:none; color: #007aff }a:focus { outline:0;}a:hover{text-decoration:none;}a:active { color:red;}.clear:after{content:"";display:block;visibility:hidden;height:0;clear:both;}.clear{zoom:1}/*--以上为格式化标签样式--*/input{ border:0; background:#f1f1f1; display:inline-block; height:30px; padding:0 40px 0 10px; width:200px; color:#999; outline:none;}</style>
4、页面代码结构。
5、查看效果。
