1. 程式人生 > >H5程式碼編寫標準步驟

H5程式碼編寫標準步驟

1. 根據原型圖,在html的body中擺上一堆div等控制元件

<div>

  <img src=""></img>

  <input></input>

  <button>提交</button>

</div>

<div>

  我同意本協議

</div>

-----------------------------

效果如下圖:


2.給控制元件增加響應,給要訪問的控制元件增加id,實現功能。

...

<input  id=content></input>

<button onClick=onSubmit()>提交</button>

...

<script>

  function onSubmit(){

     var content = document.getElementById("content");

     var text = content.get();

    ......

     alert("success!");

}

</script>

3.根據UI設計圖細調介面,加入一堆css

(1)加一個檔案mycss.css

.icon{

width:20,

        height:20,

}

.left_center{

  align:left|center

}

---------------------------

(2)在html中引入這個檔案,給各個控制元件加上css

<div>

  <img src="" class="icon letf_center"></img>

  <input></input>

  <button>提交</button>

</div>

<div>

  我同意本協議

</div>