H5程式碼編寫標準步驟
阿新 • • 發佈:2019-02-05
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>