-6ren">
个人中心
gpt4 book ai didi

html - 如何使菜单可以越过 Logo ？

转载 作者：太空宇宙 更新时间：2023-11-04 04:01:04 24 4
gpt4 key购买 nike

在我安装了 Twitter Bootstrap gem 的 Ruby on Rails Spree 应用程序中，我的 header 有以下代码:

<body class="<%= body_class %>" id="<%= @body_id || 'default' %>" data-hook="body">

<%= render :partial => 'spree/shared/header' %>
 (...)
</body>

shared/header 如下所示:

<div class="container header">

    <header id="header" data-hook>
        <div class="container">
            <figure id="logo" class="text-center col-md-4" data-hook>
                <%= logo('store/Logo.png') %>
            </figure>
            <%= render :partial => 'spree/shared/nav_bar' %>
            <%= render :partial => 'spree/shared/main_nav_bar' if store_menu? %>
        </div>
    </header>


</div>

Logo 加载到 figure 标签中。

我想做的是 Logo 向下延伸并成为背景的一部分。例如，

Like this .

我怎样才能做到这一点？我是否需要将其作为页眉和正文背景的一部分？或者我应该在整个页面上使用 css 背景吗？如果是这样，我怎样才能使它随页面重新缩放？

我希望有人能指出我正确的方向!

/edit 生成的 HTML:

<body class="one-col" id="default" data-hook="body">

  <div class="container header">

    <header id="header" data-hook>
        <div class="container">
            <figure id="logo" class="text-center col-md-4" data-hook>
                <a href="/"><img alt="Logo" src="/assets/store/Logo-c0fd8c5c71ef79825dba0315b84bdef5.png" /></a>
            </figure>

  <ul id="nav-bar" class="nav navbar-nav navbar-right" data-hook>
<li><a href="/account">My Account</a></li>
  <li><a href="/logout">Logout</a></li>
<li id="search-bar" data-hook>
      <form accept-charset="UTF-8" action="/products" class="navbar-form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>

<div class="form-group">
  <input class="form-control" id="keywords" name="keywords" placeholder="Search" type="search" />
</div>
<input class="btn btn-success" type="submit" value="Search" />
</form>
</li>
  </ul>
            <nav class="col-md-12"><div id="main-nav-bar" class="navbar">
    <ul class="nav nav-pills navbar-nav" data-hook>
<li id="home-link" data-hook><a href="/">Home</a></li>
      <li id="shop-link" data-hook><a href="/shop">Products</a></li>
      <li id="about-link" data-hook><a href="/about">About us</a></li>
      <li id="contact-link" data-hook><a href="/contact">Contact</a></li>
    </ul>
<ul class="nav navbar-nav navbar-right" data-hook>
<li id="link-to-cart" data-hook><a class="cart-info empty" href="/cart"><span class='glyphicon glyphicon-shopping-cart'></span> Cart: (Empty)</a></li>
    </ul>
<div id="locale-select" style="float: right; margin-right: 10px;" data-hook>
    <form accept-charset="UTF-8" action="/locale/set" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="mx8tcgWHDqyVslG5Fxvz6N03KRhtVtr9eXYyqDJpEhQ=" /></div><select class="form-control" data-href="/locale/set" id="locale" name="locale"><option selected="selected" value="en">English (US)</option>
<option value="nl-NL">Nederlands (NL)</option></select><noscript>
        <input name="commit" type="submit" value="Save changes" />
</noscript>
</form></div>
</div>
</nav>
        </div>
    </header>


</div>

  <div class="container row" style="margin: 0 auto;" data-hook>
    <.. MAIN CONTENT>
  </div>
</body>

最佳答案

添加类或修改现有类(text-center 或 col-md-4)的 Logo 。

写入:margin-bottom:-30px;。如果可行，请将 30px 值替换为适合的值。

关于html - 如何使菜单可以越过 Logo ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22054521/

24 4 0
文章推荐： Python 正则表达式可以在线运行但不能在代码中运行
文章推荐： java - 在 android jni 中执行 shell 时出现以下错误
文章推荐： python - 如何在单行中插入 SQL 表中的所有嵌套字典值
文章推荐： c - 使用管道进行 IPC