百度地图API实战 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

基础布局

这一节我们将实现页面的基础的HTML+DIV布局

1、tab效果布局

由于需要做切换效果,我们需要将筛选条件、酒店列表两列对应的内容区域设置position为absolute,并设置其中之一为隐藏,同时我们要将筛选条件下的checkbox所在div隐藏,当点击时才会见到选项。

2、js加载数据布局

此外我在酒店列表对应内容中并未写入酒店内容,因为这些重复的东西我们可以通过ajax获取数据,用js写入

最后我们要得到的效果如图:

布局

由于课程主要意图不在于讲布局,所以本章只会简略的解释一下布局,望见谅。

修改右方代码将酒店列表显示出来
hotel.style.display = 'block';