个人中心
gpt4 book ai didi

css - 我在设计响应式 header 时遇到了一些问题

转载 作者：技术小花猫 更新时间：2023-10-29 10:20:25 26 4
gpt4 key购买 nike

我正在设计一个页眉，有几个关于我遇到的问题的问题。

demo is here代码如下，任何帮助将不胜感激。 

.menu {
  position: relative;
  width: 100%;
  height: 66px;
  max-height: 90px;
  background: green;
}
.menu img {
  max-height: 30px;
}
.menu ul {
  left: 0;
  margin: 0 auto;
  width: 80%;
  margin: -30px auto 0 auto;
  font-size: 16px;
  font-weight: bold;
  max-width: 1200px;
}
.menu ul li:first-child {
  border-left: 1px solid gray;
}
.menu ul li {
  //
  width: 140px;
  width: 14%;
  display: block;
  float: left;
  text-align: center;
  border-right: 1px solid gray;
  color: white;
  height: 50px;
  line-height: 70px;
  vertical-align: bottom;
}
.menu ul li a {
  color: white;
}
.menubtn {
  width: 30px;
  height: 30px; //
  opacity: 0.5;
  cursor: pointer;
}
.menubtn .fa {
  font-size: 26px;
  color: rgb(75, 0, 130)
}
#menubtn {
  position: absolute;
  top: 2px;
  left: 4px;
}
@media only screen and (min-width: 501px) {
  .topbar {
    display: none;
  }
  .menu ul li a {
    font-size: 14px;
  }
  #mybody {
    margin-top: 8%;
  }
}
@media only screen and (max-width: 1200px) {
  .menu ul li a {
    font-size: 12px;
  }
}
@media only screen and (max-width: 888px) {
  .menu ul li a {
    font-size: 12px;
  }
}
@media only screen and (max-width: 685px) {
  .menu {
    height: 40px;
  }
  .menu ul {
    margin: 0;
  }
  .menu img {
    display: none
  }
  .menu ul {
    width: 100%;
  }
  .menu ul li {
    line-height: 40px;
    height: 40px;
    font-size: 13px;
  }
}
@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) {
  .menu {
    display: none;
  }
}
@media only screen and (min-width: 320px) and (max-width: 480px) and (orientation: landscape) {
  .menu {
    display: none;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
</head>

<body>



  <header>
    <div class="container-fluid">
      <div class="row" style="background-color: lightblue;">
        <div class="col-md-8 col-sm-8 col-xs-1">
          <div id="banner" style="margin-left: 59%;">
            <img height="25px" width="25px" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRROdI3yg-dOO1Wl56Ci6AHheWnzUA6j01oJDvxaUNViODWLpLX" />
            <img height="40px;" width="253px;" src="http://staticx.ibncollege.com/wcsstore/ExtendedSitesCatalogAssetStore/907_90722_1_21939/images/FULLIMAGE_88753.jpg" />

          </div>
        </div>
        <div class="col-md-2">
          <div id="images" style="float: right;">
            <a class="btn btn-social-icon btn-sm btn-facebook" style="text-align: center;" href="#"> <i class="fa fa-facebook"></i>
            </a>
            <a class="btn btn-social-icon btn-sm btn-twitter" href="#"> <i class="fa fa-twitter"></i>
            </a>
            <a class="btn btn-social-icon btn-sm btn-google-plus" href="#">
              <i class="fa fa-google-plus"></i>
            </a>
          </div>
        </div>

        <div class="container">
          <div class="row">

            <div class="col-md-12 col-sm-12 col-xs-12 search-container">

              <form id="searchbox" role="form" action="#" method="GET">
                <div class="col-md-4 col-sm-12 col-xs-12 searchbox">
                  <div class="ui-widget">
                    <input id="Name" name="name" class="form-control searchinput" type="text" placeholder="name" value="">
                  </div>
                </div>
                <div class="col-md-4 col-sm-12 col-xs-12">
                  <input id="family" name="family" class="form-control searchinput" type="text" placeholder="family" value="">
                </div>
                <div class="col-md-2 col-sm-2 col-xs-1">
                  <button style="background-color: blue; border-radius: 14px; border-style: solid;" class="btn-search" type="submit" title="Search">
                    <div style="background-color: blue;">
                      <span class="glyphicon glyphicon-search"></span>

                    </div>
                  </button>

                </div>

              </form>
              <div style="float: right; text-align: right;" class="col-md">
                <a href="#">Click1</a>  <a href="#">Click2</a>
              </div>
            </div>
          </div>
        </div>
        <div class="hidden-xs">
          <div class="menu">
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTnYmtXUnZ6g5TwfPndnVQMcVdJO8qkSJqm-dPkNRJ_13IaeTP6Pw" style="width: 100%; max-height: 40px;">
            <ul id="idmenu">
              <li><a href="#">Item1</a>
              </li>
              <li><a href="#">Item2</a>
              </li>
              <li><a href="#">Item3</a>
              </li>
              <li><a href="#">Item4</a>
              </li>
              <li><a href="#">Item5</a>
              </li>
              <li><a href="#">Item6</a>
              </li>
              <li><a href="#">Item7</a>
              </li>
              <li><a href="#">Item8</a>
              </li>
            </ul>

          </div>
        </div>
      </div>
    </div>
  </header>
</body>

</html>

我想要的方式如下:

enter image description here

如您所见，我在搜索框的右侧有一个 Logo ，即从页面顶部到搜索框底部。

中间有一个横幅，三个社交媒体链接和两个位于社交媒体链接右下方的链接。

我在菜单顶部还有一个白色图像，它将被替换为正确的图像。

(我没有使用 nav 创建菜单，因为该图像应该位于菜单顶部；因此，我也有移动尺寸屏幕的问题，因此需要手动执行此操作，帮助设计导航也将不胜感激)

我被要求缩小要求，

  • 我需要将 Logo 放在屏幕截图中显示的位置，而不是它所在的位置，(它现在位于横幅的左侧 - 请点击“演示在这里”链接到见)。

  • 还需要为移动屏幕创建一个汉堡包样式的菜单，因为我没有使用导航，所以很难实现。如果您知道如何使用 nav 解决问题，我将不胜感激，因为您可以看到当前菜单不是基于 nav 的。

我需要它能够响应，所以如果您做出任何更改，如果您能考虑的话，我将不胜感激。

最佳答案

首先，对于移动设备上的汉堡式菜单，我强烈推荐 FlexNav .

现在，您尝试做的大部分事情都可以通过添加一些额外的 div 来完成，我将解释:

响应式设计的整体理念是元素相互堆叠，当您到达某个点(断点)时，它们会浮起并坐在其他元素旁边。

enter image description here

上面的示例显示了如果所有容器都在宽屏断点处float: left;会发生什么。

所有你想 float 在其他元素旁边的元素都需要在同一个容器中。在你的情况下，这意味着一个容器应该有你的标志，下一个容器应该有你的横幅、输入字段和搜索框，最后一个容器应该有你的社交链接。或者，如果您希望在移动设备上靠近顶部的社交链接，您可以使用 float: right; 而不是 float: left; 并将它们放在较早的容器中。

要让您的表单元素并排放置，它们的宽度 需要等于或小于 50%。百分比非常适合响应式主题。

最后，如果您计划进行大量响应式主题设计，那么可以使用一些工具来设置和学习，这些工具可能会有点挑战，但可以使整个过程更加顺畅，例如:

关于css - 我在设计响应式 header 时遇到了一些问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29788465/

26 4 0
文章推荐： CSS:使相对定位的父级适合绝对定位的子级的高度
文章推荐： css - margin : auto is not centering
文章推荐： css - 在 Google Chrome Dev Tools 中获取选定元素的所有 CSS 规则
文章推荐： css - 是否可以为单个装订线覆盖 grid-row-gap/grid-column-gap？
技术小花猫
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com