页面调整大小时,页面上的元素会继续移动

时间:2017-02-21 09:56:13

标签: positioning elements

我确实检查了其他问题,但没有一个能解决我的问题。当我调整页面大小时,我的元素随处可见,都被压扁了。我甚至试过做一个包装div,这没有用。我们是否可以发布网站?因为我有网站直播。

<!DOCTYPE html>
<html>
<head>
<title>Promises!-Contact</title>
<meta charset="UTF-8">
<style>
#body  {
  margin: 0 auto;
  width: 370px;
  height: 1%;
  margin-top: 100px;
  border-radius: 15px;
  border: 5px dotted #00A396;
  background-clip: content-box;
  background-color: #F8B72E;
  text-align: justify;
  font-family: Kirvy;
  overflow: hidden;
  font-size: 13px;
}

#wrapper {
  width: 100%;
  margin: 0%;
  padding: 0%;
}

p { padding: 10px;}

#title {
  text-align: center;
  font-size: 24px;
  top-margin: 0px;
  padding: 0px;
}

nav {
  font-family: KBAStitchInTime;
  font-size: 12px;
  color: #EC225F;
  right: 220px;
  top: 140px;
  position: relative;}

#dot1  {
  font-size: 100px;
  display: inline-block;
  line-height: 20px;}

#dot2 {
  font-size: 100px;
  display: inline-block;
  line-height: 20px;}

#dot3 {
  font-size: 100px;
  display: inline-block;
  line-height: 20px;}

#dot4 {
  font-size: 100px;
  display: inline-block;
  line-height: 20px;}

 a:link { color:#EC225F; text-decoration:none; }
 a:visited{ color: purple; }
 a:hover{ color: ;}
 a:active {}   
body {background-color: #262626;
  text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
  <span id="dot1">.</span><a href="about.html">About</a><br>
  <span id="dot2">.</span><a href="pages.html">Pages</a><br>
  <span id="dot3">.</span><a href="poems.html">Poems</a><br>
  <span id="dot4">.</span><a href="index.html">Home</a><br> 
</nav>
<div id="body">
  <p id="title">Contact!</p>
  <p> I love getting mail! Find me at:</p>
</div>
</div>
</body>
</html>

0 个答案:

没有答案