领导需要web页面的开发,这玩意之前弄过,后来遗失了,现在回来再弄,倍感生涩,不过没事,慢慢来就好了,遇到一些容易混淆的东西,做个记录。好了,这就开始:
目标需求:
如图:
- 1 左上div区为视频 “视频”
- 2 右上div区为标签绘制区 “canvas1”
- 3 下部分div区为标签绘制区“canvas2”
H5的布局思想和android略有差别,按照以前做android的思路,伪android布局代码:
<!-- 上部分 -->
<RelativeLayout>
<RelativeLayout>
<视频>
</RelativeLayout>
<RelativeLayout>
<canvas1>
</RelativeLayout>
</RelativeLayout>
<!-- 下部分 -->
<RelativeLayout>
<RelativeLayout>
<canvas2>
</RelativeLayout>
</RelativeLayout>
但事实上h5的布局思路不需要这么麻烦, 接触了h5的人,都知道:
div是块级元素,默认是自占一行。如果想让两个div排至一行,需要两种方式:
1. 添加float属性,如:float: left;
2. 添加display属性,如:display: inline;
这里使用添加float属性的方式,代码如下:
样式:
<style type="text/css">
html, body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: #141925;
color: #b7ffff;
overflow: hidden;
}
div.container-l{
width: 100%;
height: 100%;
}
div.container-l > div{
height: 50%;
padding: 10px;
}
div.container-l > div.top-left-div{
width: 50%;
float: left;
}
div.container-l > div.top-left-div > div.video{
height: 100%;
border: 1px solid #b7ffff;
border-radius: 5px;
}
div.container-l > div.top-right-div{
width: 50%;
float: left;
}
div.container-l > div.top-right-div > div.track{
height: 100%;
border: 1px solid #b7ffff;
border-radius: 5px;
}
div.container-l > div.bottom-div{
width: 100%;
clear: both;
}
div.container-l > div.bottom-div > div.map{
height: 100%;
border: 1px solid #b7ffff;
border-radius: 5px;
}
</style>
布局:
<div class="container-l">
<div class="top-left-div">
<div class="video">video here</div>
</div>
<div class="top-right-div">
<div class="track">track here</div>
</div>
<div class="bottom-div">
<div class="map">map here</div>
</div>
</div>
解释一下:
- 3个div(以div1 div2 div3称呼)放在一个层次下,然后通过float: left属性控制div1和div2同行排列;
- 通过clear: both 控制div3忽略div1和div2的浮动属性,排在二者的下方.
这里,需要注意: 如果是要div2和div1相邻排列的话,那最好是用float:left,如果是float:right,会使div1和div2之间有margin.