eclipse写登录页⾯代码_闲来⽆事，写⼀个⽹页版的超简单的
计算器吧（html+css+。。。
今天我们⼀起来做⼀个⽹页版的计算器吧，如果没有学过前端，在后⾯我会慢慢介绍到的。
⾸先我们开始做⼀个html的页⾯，⽤来做⽹页的⼯具有很多，因为⼀直写java，所以我还是⽐较习惯⽤eclipse来写html代码。
跟写java代码⼀样，需要先创建⼀个项⽬，如果之前有练习⽤的项⽬也可，然后创建⼀个包。最后跟创建java类就不⼀样了，我们需要创建的是html页⾯：在包上右键--new--other--html file。
查询出html file以后，可以直接双击，或者单击然后再点击下⾯的next按钮
html制作一个网页
给⽂件命名，命名时需要后缀名.html，当然了，因为使⽤开发⼯具的原因，后缀可以省略不写，会⾃动添加上，蜗⽜就直接命名为jsq了，然后点击完成(finish)。
之后就开始实现计算器页⾯了，最开始，肯定是先在页⾯上添加计算器中需要的按钮，为了简单，我直接将按钮写在table表格中。
1.在页⾯上添加⼀个五⾏四列的表格，将第⼀⾏的前三个合并，作为计算器的屏幕。
2.在第⼀⾏第⼀个格⼦我使⽤⼀个输⼊框来作为计算器的屏幕；剩下其他的格⼦中全部添加按钮，写⼊相对应的按键的值。如下图
从html ⽂件上右键--open with--system editor，页⾯上会出现如图所⽰的效果图
3.给计算器设置想要的样式，我这⾥给所有的按钮设置宽度和⾼度均为50个像素。使⽤内联式设置css，在head标签中添加⼀个style标签：按钮的样式如下
input{
width:50px;/* 给input设置宽度 */
height:50px;/* 给input设置⾼度 */
}
设置完成以后，页⾯显⽰如下：
你会计算器位于屏幕的做左上⾓，⽽且由于屏幕使⽤的也是⼀个input输⼊框，所以，需要将计算器放到页⾯的中，设置table的margin属性，为了稍微好看⼀点，给table加⼀个外边框，以及需要对屏幕的
宽度⾼度单独进⾏设置，设置内容如下：
设置完成，来看⼀下效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。