如何将主菜单移至右上角并向下移动至文本？

debugcn 发表于 Dev

jsonissshi

我正在尝试为我的网站制作Iphone 6/7/8版本。不幸的是，我不知道如何将主菜单移到右上角，因此在网站上看起来像这样：

现在，该站点如下所示：

您能告诉我如何移动此菜单吗？而且，我不知道如何将这6个正方形向下移动到文本。我正在尝试在SquaresDOWN div或UP上使用marigin-bottom等，但没有任何反应。

如果您能在这两件事上帮助我，我将不胜感激。

的CSS

*
{
  margin: 0;
  padding: 0;
}

header
{
  width: 1920;
  height: 1080px;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin:0;
  height: 1080px;
  width: auto;
  background-image:  linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
}

footer{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
}

footer img{
  margin-top: 5px;
  height: 30px;
  display: inline-block;
  padding: 0px 10px 0px 0px;
}

.main-nav
{
  float: right;
  color: #000000;
  margin-top: 40px;
}

.main-nav li
{
  display: inline-block;
}

.main-nav li a
{
  color: #000000;
  text-decoration: none;
  font: Bold 25px/15px Arial;
  padding: 5px;
}

#logo
{
  margin-top: 10px;
  float: left;
}

#sign a
{
  background-color: #DCDFDE;
  padding: 30px 15px 17px 15px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  border-left: 3px solid black;
  border-right: 3px solid black;
}

.left h1{
  font-size: 20px;
  color:rgb(0, 1, 253);
  text-align: justify;
  margin-left: 100px;
}

.left {
  float: left;
  width: 50%;
  margin-right: 500px;
}


#ourteam
{
  margin-top: 300px;
  margin-left: 100px;
  font-size: 60px;
  font-weight: bold;
  color:rgb(24, 188, 253);
}

#squaresUP div {

  display: inline-block;
  width: 200px;
  height: 200px;
  margin-right: 30px;
}
#squaresDOWN div {

  display: inline-block;
  width: 200px;
  height: 200px;
  margin-right: 30px;
}
#tytul
{
  font: Bold 20px/23px Arial;
  letter-spacing: 0;
  color: #2699FB;
  margin-left: 33px;
  margin-top: 60px;
}

#tytul1
{
  font: Regular 14px/30px Arial;
  letter-spacing: 0;
  color: #2699FB;
  margin-left: 28px;
  margin-top: 100px;
}

.square1 {  background: #7FC4FD 0% 0% no-repeat padding-box;}
.square2 {  background: #7FC4FD 0% 0% no-repeat padding-box;}
.square3 {  background: #7FC4FD 0% 0% no-repeat padding-box;}
.square4 {  background: #7FC4FD 0% 0% no-repeat padding-box;}
.square5 {  background: #7FC4FD 0% 0% no-repeat padding-box;}
.square6 {  background: #7FC4FD 0% 0% no-repeat padding-box;}

@media only screen and (max-device-width: 500px){

  body {
    background-image:  linear-gradient(180deg, #EFEFEF00 0%, #0F4A37 100%);
    background-size:100% 3000px;
  }
  #ourteam
  {
    margin-top: 300px;
    margin-left: 700px;
    font-size: 80px;
    font-weight: bold;
    width: 400px;
    color:rgb(24, 188, 253);
  }

  .left h1{
    font-size: 27px;
    width: 1500px;
    color:rgb(0, 1, 253);
    text-align: justify;
    margin-left: 100px;
    margin-top: 50px;
  }

  .left {
    float: left;
    margin-right: 500px;
  }

  .main-nav
  {

    float: right;
    color: #000000;
    margin-top: 40px;
    width: 1150px;
  }

  .main-nav li
  {
    display: inline-block;

  }

  .main-nav li a
  {
    color: #000000;
    text-decoration: none;
    font: Bold 35px/15px Arial;
    padding: 5px;
    width: 50px;
  }
}

html

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>DingDog</title>
  <link rel="stylesheet" href="css-images/style-authors.css" >
</head>

<body>
  <header>
    <div class="row">
      <ul id ="logo"> <img src="css-images/dingdog-logo.png"> </ul>

      <ul class="main-nav">
        <li style="padding-left:10px"><a href="">NEWS FEED</a></li>
        <li style="padding-left:10px"><a href="">ABOUT DINGDOG</a></li>
        <li style="padding-left:10px"><a href="authors.html">AUTHORS</a></li>
        <li style="padding-left:10px"><a href="">CONTACT</a></li>
        <li style="padding-left:10px" id ="sign"><a href="signin.html">SIGN IN</a></li>
      </ul>
    </div>

    <section>
      <article>
        <p id="ourteam">Our Team.</p>
        <div class="left">
          <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. ILorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum nisi ac nunc lobortis auctor. Nam nec congue ex, nec ornare elit. Donec feugiat massa vitae mauris euismod malesuada. Pellentesque iaculis dui felis, sit amet molestie augue scelerisque et. Nullam eget mi neque. Ut maximus enim ac fringilla scelerisque. Quisque sit amet sem semper, rutrum nulla eu, fermentum sapien. I</h1>

        </div>
        <div class="row2">
          <div id="squaresUP">
            <div class="square1" style='position:absolute;left:1100px; top:292px;'></div>
            <div class="square2"style='position:absolute;left:1350px; top:292px;background: #F1F9FF 0% 0% no-repeat padding-box;'>
              <h1 id="tytul" style='position:absolute;left:0px; top:0px;'>Name Surname</h1>
              <h1 id="tytul1" style='position:absolute;left:0px; top:0px;'>Co-Founder & CTO</h1>
            </div>
            <div class="square3"style='position:absolute;left:1600px; top:292px;'></div>
          </div>
          <div id="squaresDOWN">
            <div class="square4"style='position:absolute;left:1100px; top:560px;'></div>
            <div class="square5"style='position:absolute;left:1350px; top:560px;'></div>
            <div class="square6"style='position:absolute;left:1600px; top:560px;'></div>
          </div>
        </div>
      </article>
    </section>
  </header>
  <footer>
    <img src="social/instagram.png" />
    <img src="social/twitter-white-logo.png" />
    <img src="social/facebook.png" />
  </footer>
</body>
</html>

//编辑方块应在此处。它们应位于文本下方。

凯

我已经整理了一下代码，在这里您可以找到一个示例，该示例说明如何在css网格内创建标题菜单，对于iphone 7/8视图来说不错。如果您不想创建更多按钮，则可以根据您的要求更改百分比，以使其更大一些，如果它不能完全帮助您，至少可以作为参考。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
.row{
    display: grid;
    grid-template-columns: 20% 80%;
}
.main-nav{
    float: right;
    display: inline-flex;
    list-style: none;
    font-size: 50%;
}
.main-nav li{
    font-size: 50%;
}

    </style>
</head>
<body>
    <div class="row">

        <div id ="logo"><img src="css-images/dingdog-logo.png"></div>
<div>
        <ul class="main-nav">
          <li style="padding-left:10px"><a href="">NEWS FEED</a></li>
          <li style="padding-left:10px"><a href="">ABOUT DINGDOG</a></li>
          <li style="padding-left:10px"><a href="authors.html">AUTHORS</a></li>
          <li style="padding-left:10px"><a href="">CONTACT</a></li>
          <li style="padding-left:10px" id ="sign"><a href="signin.html">SIGN IN</a></li>
        </ul>
    </div>  
</div>

<!-- create your html elements and divs below -->
<!-- make sure to arrange them in a decent way to be organzied with y our page -->
<!-- i would suggest you use css grid as i did for the menu and follow almost the same settings
which will make your view look more adjusted and responsive -->

</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。