能自己手写出html5的坦克大战找份html5或者前端的工作没问题吧

帅狗 发布于 2016/05/18 13:56
阅读 408
收藏 0
自己手写了一个html5的坦克大战
加载中
1
yak
yak
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
  <title></title>
  <meta charset="UTF-8">

<style type="text/css">
html,body {
    height:100%;
   overflow:hidden;
}
*{margin:0;padding:0}
li,input,button{height:35px;}

#content{
height:100%;
margin-top:100px;
margin-left:100px;
width:60%;
}
#box{

height:100%;
text-align:center;

 background:plum;
 overflow:scroll;
}
li{
border:1px solid red;
margin-top:10px;
}
#header {
   width:300px;
    height:100px;
position:fixed;
top:0;

    background:#FeE4B5;
}
#footer{
    clear:left;    / /
    width:380px;
    height:80px;
position:fixed;
bottom:0;
right:0;
    background:#FFE4B5;
    border:1px solid crimson;
}
</style>

<script type="text/javascript">

function $(id) {
	return document.getElementById?document.getElementById(id):document.all?d.all[id]:document.layers[id];
}
function send(){

  $("box").innerHTML+="<h1>"+$("msg").value+"</h1>";

$("box").scrollTop+=1000;

}
window.onload=function(){
$("box").onscroll=function(){

console.log(this.scrollTop);

}

}


</script>
</head>
<body>
   <div id="header"> this is header</div>
            <div id="footer">
<input id='msg' type="" vavlue='1111'>
<button onclick='send()' >SEND</button>

</div>
<div id="content">
<div id='box'>

dfsfaf 

</div>

  </div>
</body>
</html>


  帮我看一下这个 box 自适应浏览器屏幕高度 怎么样才能留出固定高度的footer  header可以用margin-top 来实现  但是 footer margin-bottom 对height:100% 无效

0
月_霜影


这个方法是定位的,还有一个方法是布局+margin

<!DOCTYPE HTML>

<html lang="ru-RU">
<head>
  <title></title>
  <meta charset="UTF-8">
 
<style type="text/css">
html,body {
    height:100%;
   overflow:hidden;
}
*{margin:0;padding:0}
#header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:50px;
background-color: #000;
}
#content{
position: absolute;
top: 50px;
bottom: 50px;
left: 0;
width: 100%
height:50px;
width: 100%;
}
#footer{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height:50px;
background-color: #000;
}
#box{
height: 100%;
background-color: #fac24f;
}
</style>
 
</head>
<body>
   <div id="header"> this is header</div>
            <div id="footer">
<input id='msg' type="" vavlue='1111'>
<button onclick='send()' >SEND</button>
 
</div>
<div id="content">
<div id='box'>
 
dfsfaf 
 
</div>
 
  </div>
</body>
</html>
返回顶部
顶部