Question

我正在开发一个网站;我注意到当我将浏览器的窗口缩小到700px以下时，会出现导航栏（如预期的那样）：

真正的问题是放大或缩小时;我制作的RGB块移动了：

我一直将这些块放在左上角（使用margin和px）。我该如何解决这个问题？

我的代码如下：

＆＃13;

#Topnav{
	background: -moz-linear-gradient(-45deg,  rgba(44,44,44,0.82) 0%, rgba(19,19,19,0.82) 1%, rgba(19,19,19,0.82) 13%, rgba(19,19,19,0.75) 34%, rgba(28,28,28,0.68) 56%, rgba(50,50,50,0.6) 78%, rgba(71,71,71,0.6) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(44,44,44,0.82) 0%,rgba(19,19,19,0.82) 1%,rgba(19,19,19,0.82) 13%,rgba(19,19,19,0.75) 34%,rgba(28,28,28,0.68) 56%,rgba(50,50,50,0.6) 78%,rgba(71,71,71,0.6) 100%);
background: linear-gradient(135deg,  rgba(44,44,44,0.82) 0%,rgba(19,19,19,0.82) 1%,rgba(19,19,19,0.82) 13%,rgba(19,19,19,0.75) 34%,rgba(28,28,28,0.68) 56%,rgba(50,50,50,0.6) 78%,rgba(71,71,71,0.6) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d12c2c2c', endColorstr='#99474747',GradientType=1 );

	margin:0px 12px;
	z-index: 10;
	position: fixed;
	width: 90vw;
	height: 55px;
	top: -5px
}

#Topnav li{
    height: 10vh;
    width: 15vw;
    font-family: 'Passero One', cursive;
    text-decoration: none;
    float: left;
    margin: 10px 0px 0px 10px;
}

#Topnav ul{
    list-style: none;
    margin: 10px -20px ;
    overflow: hidden;
    list-style: none;
	
	
}

#Topnav a {

  padding:-1.5em;

  text-decoration: none;
  color: white;
  position: relative;
}


.red-1 {
margin: -8px -9px;
position: relative;
background-color: red ;
border-color:red;
border-style: outset;
height: 5px ;
width: 5px;
}

.red-2{ margin: 8px -9px;

background-color: red ;
border-color:red;
border-style: outset;
height: 5px ;
width: 5px;
}


.red-3{ margin: -8px -9px;

background-color: red ;
border-color:red;
border-style: outset;
height: 5px ;
width: 5px;
}


.red-4{ margin: -11px 2px;

background-color: red ;
border-color:red;
border-style: outset;
height: 5px ;
width: 5px;
}


.blue-1 {
margin: -14px -3px;
background-color: blue ;
border-color:blue;
border-style: outset;
height: 5px ;
width: 5px;
}

.blue-2{ margin: -22px -3px;

background-color: blue ;
border-color:blue;
border-style: outset;
height: 5px ;
width: 5px;
}


.green-1 {
margin: 44px -3px;
background-color: green ;
border-color:green;
border-style: outset;
height: 5px ;
width: 5px;
}

.green-2{ margin: -55px -14px;

background-color: green ;
border-color:green;
border-style: outset;
height: 5px ;
width: 5px;
}

.green-3 {
margin: 55px -3px;
background-color: green ;
border-color:green;
border-style: outset;
height: 5px ;
width: 5px;
}

.green-4{ margin: -60px -14px;

background-color: green ;
border-color:green;
border-style: outset;
height: 5px ;
width: 5px;
}

＆＃13;

<html>
  
   <head>

<meta charset="utf-8" />
   <link rel="stylesheet" type="text/css" href=".css"/>
   <link rel="stylesheet" type="text/css" href="TETRIS.css"/>
       <link href=".css" rel="stylesheet" media="all and ()">
       <link href=".css" rel="stylesheet" media="all and ()">   
       <link href="RAGECSS.css" rel="stylesheet" media="all and (max-width: 700px)">


       <link href='https://fonts.googleapis.com/css?family=Passero+One' rel='stylesheet' type='text/css'>



   </head>

   <title>
   
   The rage
   
   </title>
   
<body>

   <div id="Topnav">                     <!-- very top nav bar -->

   <nav>
  <ul>
   <li><a href="#">Shop</a></li>
   <li><a href="#">Blog</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Login</a></li>
  </ul>
</nav>
 

        </div>
                                             <!-- very top nav bar--> 
         <div id="tetris">

   <div class="red-1">

         </div>

   <div class="red-2">

         </div>
   
   <div class="red-3">

         </div>

   <div class="red-4">


   <div class="blue-1">

         </div>

   <div class="blue-2">

         </div>
   
   <div class="green-1">

         </div>

   <div class="green-2">

         </div>

   <div class="green-3">

         </div>

   <div class="green-4">

         </div>


         </div>

</body>

</html>

＆＃13;

缩放工具将层拧紧

0 个答案: