Html 保持css点到位_Html_Css - Fatal编程技术网

Html 保持css点到位

html css

Html 保持css点到位,html,css,Html,Css,各位下午好我正在为我的工作做一个小项目，他们让我绘制一张地图，并精确定位特定的城市。我已经在我的电脑上完成了它，我正在努力确保当我将它加载到另一台电脑（如他们的笔记本电脑）上时，这些点保持不变。我希望这是我试图做的足够的信息，因为这是我的第一篇文章。我们将非常感谢您的任何帮助代码的基本内容是： <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=devi

各位下午好

我正在为我的工作做一个小项目，他们让我绘制一张地图，并精确定位特定的城市。我已经在我的电脑上完成了它，我正在努力确保当我将它加载到另一台电脑（如他们的笔记本电脑）上时，这些点保持不变。我希望这是我试图做的足够的信息，因为这是我的第一篇文章。我们将非常感谢您的任何帮助

代码的基本内容是：

<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>States/Cities</title>
</head>
<style media="screen">
  html,body{
  background-color: #AADAFE;
  } 
  .Vegasdot{
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: black;
  top: 246px;
  left: 306px;
  position: absolute;
  z-index: 2;
  }

  .SaltLakedot{
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: black;
  top: 88px;
  left: 395px;
  position: absolute;
  z-index: 2;
  }

  .Phoenixdot{
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: black;
  top: 333px;
  left: 386px;
  position: absolute;
  z-index: 2;
  }

  .statesMap{
  padding-top:3%;
  padding-left:12%;
  position: absolute;
  z-index: 1;
  }

这里发生了几件事

第一，立场：绝对；是相对于其父容器的。所以，如果您将图像和点包装在包装器div中，您可以将点相对于这个包装器进行定位。包装器需要位置：相对；作为相对父位置的函数：绝对；孩子们

第二，你需要用百分比来定位你的点，这样它们就可以和图像一起缩放

第三，我们应用一个变换：translate-50%，-50%，它与自身的高度和宽度相关。这将使点的中心是我们所定位的，这样当图像缩放时，点的中心保持不变

此外，我们可以通过将通用规则移动到.dot类中来消除css

例如：

HTML:

所以你需要确保它的比例正确吗？您是否做过任何测试，将您的浏览器窗口调整为不同的大小？我以前做过，但不是很有趣。。。它基本上涉及到我对不同屏幕大小使用了很多不同的百分比定位和很多媒体查询。我在Chrome的F12功能中调整了它的大小。在我这边调整它的大小似乎很好，但我把文件发送给我的一个朋友查看，我的观点有点偏离。这是一个好的开始。你朋友的屏幕比你的大吗？你应该考虑使用一个类似的图书馆。另一个选项是使用缩放元素。最后一个选项是使用像素或百分比值来定位标记图像，但您必须创建多个媒体查询才能在不同的屏幕大小上获得正确的位置。我喜欢干燥部分。。。谁不喜欢干净的代码？谢谢。我会开始更好地清理和筑巢。非常感谢。

<img src="StatesGIMP.png" alt="States Map"
class="statesMap" usemap="#States">

<span class="Vegasdot"></span>
<span class="SaltLakedot"></span>
<span class="Phoenixdot"></span>

<div class="wrapper">
  <img src="http://ontheworldmap.com/usa/usa-states-map.jpg" alt="States Map"
       class="statesMap" usemap="#States">
  <span class="Vegasdot dot"></span>
  <span class="SaltLakedot dot"></span>
  <span class="Phoenixdot dot"></span>
</div>

html,body{
  background-color: #AADAFE;
}

.wrapper {
  position: relative;
}

.dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: black;
  z-index: 2;
  position: absolute;
  transform: translate(-50%,-50%);
}
.Vegasdot{
  top: 48%;
  left: 17%;
}

.SaltLakedot{
  top: 37%;
  left: 24.5%;
}

.Phoenixdot{
  top: 60%;
  left: 22%;
}

.statesMap{
  width: 100%;
  z-index: 1;
}