我的网站非常重叠,我不知道该怎么办

时间:2019-11-15 22:48:57

标签: html css overlap overlapping

我正在尝试制作一个好的网站,但我遇到了一个大问题:重叠。 当我缩小窗口时,我所有的元素都会散开。 在手机上更糟。我能做什么? https://bucovina-tour.000webhostapp.com

2 个答案:

答案 0 :(得分:0)

我查看了您的.css定义,当您试图构建自适应/自适应网站时,似乎您放置html元素的方式并不理想。

例如,当您为margin-top: 500px类定义.button_center时,请注意,这些边距将在某些时候开始彼此叠加。

在使用标准分辨率(例如1366x768)的情况下,所有按钮都有足够的空间彼此内嵌,因此它们的边距将重叠并像一个按钮一样工作。但是,当缩小屏幕分辨率时,所有按钮都不会留在同一行中,因此它们将开始堆叠在一起。但是由于按照css的定义,每个按钮的顶部应留有500px的空白,因此它们将开始在屏幕上垂直分布。

这是您的网站重叠的原因之一,但还有更多原因。我强烈建议您查看Responsive Webdesign Principles,并在编辑模板之前以较小的比例进行响应。当您在CSS上堆叠多个意外行为时,难以理解为什么每个元素损坏了。

还要探索大多数浏览器具有的检查工具。使用此工具,您只需悬停在html组件上,就可以可视化它们的边距,边框,宽度和各种其他特征!对于Web调试真的很有用。

答案 1 :(得分:0)

  • 您的某些代码是非常硬编码的。在为元素指定大小之前,请尝试考虑移动设备大小(并通过控制台进行检查)。
  • 就像上面说的,对于每个步骤,请使用@media quary。
  • 我强烈建议您学习如何在CSS中使用flex。乍一看似乎有点复杂,但实际上并非如此。它为您完成了大多数响应式工作。这才是真正的美丽!

祝你好运:)