基础布局
这一节我们将实现页面的基础的HTML+DIV布局
1、tab效果布局
由于需要做切换效果,我们需要将筛选条件、酒店列表两列对应的内容区域设置position为absolute,并设置其中之一为隐藏,同时我们要将筛选条件下的checkbox所在div隐藏,当点击时才会见到选项。
2、js加载数据布局
此外我在酒店列表对应内容中并未写入酒店内容,因为这些重复的东西我们可以通过ajax获取数据,用js写入
最后我们要得到的效果如图:
由于课程主要意图不在于讲布局,所以本章只会简略的解释一下布局,望见谅。
修改右方代码将酒店列表显示出来
hotel.style.display = 'block';