Question

目前，我主要是自己学习html5和css，我需要构建一个带有背景图像的标题和一个位于徽标和导航按钮应该位于中间的水平栏。我试过任何方式，但无法提出具体的解决方案。拜托，有人可以帮忙吗？

Answer 1

你在找这样的东西吗？

＆＃13;

.header{
  text-align: center;
  background-image: url(http://i.ytimg.com/vi/bl1zq8EFQDQ/maxresdefault.jpg);
  padding: 2em;
}

＆＃13;

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="SitePoint">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->
</head>

<body>
  <header class="header">
    <h1 class="header-title">Title</h1>
    <img class="header-logo" src="http://www.placehold.it/350x150">
    <div class="header-menu">
      <a href="http://www.google.es">Google</a>
      <a href="http://www.google.es">Google</a>
      <a href="http://www.google.es">Google</a>
      <a href="http://www.google.es">Google</a>
    </div>

  </header>
</body>

＆＃13;

带有背景图像的标题和中间的水平条

1 个答案: