CSS/HTMLNavBar回應式-有解無憂

至少對我來說，試圖建立一些獨特的東西。這就是我到目前為止所擁有的，我在讓布局正確時遇到了一些問題。

我要做的是創建一個 H1 標題，該標題將鏈接回主頁。在導航欄下方將有 4 個鏈接均勻分布在頁面上。然后導航欄下的 3 個社交媒體圖示。我把所有的東西都放在那里，只是很困惑，因為我什么都做不好。導航欄看起來很合適，然后我把社交媒體放在那里，它聚集在一側。或者導航欄將居中，但即使我放入 CSS 展開也不會均勻展開。

   <header>
    <div>
      <h1>Amazing restaurant</h1>

      <!-- nav -->
      <nav>
        <a href="#Menu">Menu</a>
        <a href="#Reservations">Reservations</a>
        <a href="#Special Offers">Special Offers</a>
        <a href="#Contact">Contact</a>
      </nav>
      <a href="#" class="fa fa-facebook"></a>
      <a href="#" class="fa fa-twitter"></a>
      <a href="#" class="fa fa-instagram"></a>
    </div>
  </header>

   header {
  width: 100%;
  height: 100vh;
  background-image: url("../img/home-header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
 }
 nav {
 padding: 12px;
 color: white;
 text-decoration: none;
 font-size: 17px;
 width: 25%;
 text-align: center;
 }

uj5u.com熱心網友回復：

這是您的問題的解決方案，但我建議花一些時間學習 flex

header {
  width: 100%;
  height: 100vh;
  background-image: url("../img/home-header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header .headerTitle {
  text-decoration: none;
  color: black;
  margin-bottom: 25px;
}

header .navLinks {
  padding: 12px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
}

header .navLinks a {
  color: black;
  text-decoration: none;
  font-size: 17px;
  margin-bottom: 15px;
}

header .socialLinks a {
  color: black;
  text-decoration: none;
  font-size: 14px;
  margin: 7px 20px;
}

<header>

  <a class="headerTitle" href="index.html">
    <h1>Amazing restaurant</h1>
  </a>


  <div class="navLinks">
    <a href="#Menu">Menu</a>
    <a href="#Reservations">Reservations</a>
    <a href="#Special Offers">Special Offers</a>
    <a href="#Contact">Contact</a>
  </div>

  <div class="socialLinks">
    <a href="#">
      <i class="fa fa-facebook"></i>
    </a>
    <a href="#">
      <i class="fa fa-twitter"></i>
    </a>
    <a href="#" class="fa fa-instagram">
      <i class="fa fa-instagram"></i>
    </a>
  </div>
</header>

uj5u.com熱心網友回復：

嗨，我也從這個開始，也想向您展示可以解決您遇到的問題的方法。了解顯示選項非常有用。

html {
  box-sizing: border-box;
}

a,
a:before,
a:after {
  box-sizing: inherit;
}

header {
  width: 100%;
  height: 100vh;
  background-image: url("../img/home-header.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

.main-nav {
  background-color: lightseagreen;
}

.main-nav li {
  padding: 0.5rem;
  color: white;
  text-decoration: none;
  font-size: 1rem;
  text-align: center;
  display: inline-block;
}

.lis {
  text-decoration: none;
  color: white;
  font-size: 1.5rem;
}

.title {
  color: lightseagreen;
  font-size: 3rem;
}

<body>
  <header>
    <div>
      <h1 class="title">Amazing restaurant</h1>

      <!-- nav -->
      <nav class="main-nav">
        <li><a class="lis" href="#Menu">Menu</a></li>
        <li><a class="lis" href="#Reservations">Reservations</a></li>
        <li><a class="lis" href="#Special Offers">Special Offers</a></li>
        <li><a class="lis" href="#Contact">Contact</a></li>
      </nav>
      <a href="#" class="fa fa-facebook"></a>
      <a href="#" class="fa fa-twitter"></a>
      <a href="#" class="fa fa-instagram"></a>
    </div>
  </header>
</body>

uj5u.com熱心網友回復：

這是您如何實作您正在尋找的東西并同時使其回應的方法。CSS Flexbox 和 Grid 是 CSS 開始變得艱難的地方，并且明智地研究多個教授它的前端講師。我喜歡Wes Bos——他有 CSS Grid 和 Flexbox 課程。他們都是免費的。

如果你有能力花一些錢，我真的很喜歡前端大師，我實際上在 Jen Kramer 的CSS 課程中學習了如何撰寫這個 NavBar 。我發現在 CodePen 或類似的沙箱中創建 NavBar 確實很有幫助。只是一些對我有用的指標。

現在，還要澄清一下 - 我的標題中鏈接了 Oxygen 和 Oxygen mono 的 Google 字體，以及 Font Awesome 5。

/* variables declared here - these are the colors for our pages, as well as the font stacks and sizes. */
:root {
  --black: #171321;
  --dkblue: #0d314b;
  --plum: #4b0d49;
  --hotmag: #ff17e4;
  --magenta: #e310cb;
  --aqua: #86fbfb;
  --white: #f7f8fa;
  --font-size: 1.3rem;
  --mono: "Oxygen mono", monospace;
  --sans: Oxygen, sans-serif;
}
/* border box model: https://css-tricks.com/box-sizing/ */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
/* generic styles for the page */
body {
  padding: 0;
  margin: 0;
  font-family: var(--sans);
  background-color: var(--black);
  color: var(--white);
  font-size: var(--font-size);
}
h1,
h2,
h3 {
  margin: 0;
}
a {
  color: var(--magenta);
}

a:hover {
  color: var(--hotmag);
  text-decoration: none;
}
/* intro styles */
#intro {
  padding-bottom: 10rem;
}

#intro p {
  font-size: 1rem;
  line-height: 1.5;
}

#intro .name {
  font-family: var(--mono);
  font-size: 1rem;
}

.name span {
  font-family: var(--sans);
  font-size: 4rem;
  color: var(--aqua);
  display: block;
  font-weight: 300;
}

#intro h2 {
  font-size: 4rem;
}

/* contact section */

#contact {
  width: 400px;
  text-align: center;
  margin: 0 auto;
  padding: 3rem 0;
}

#contact p:last-child {
  margin-top: 3rem;
}

/* navigation */
nav {
  font-family: var(--mono);
  font-size: 80%;
  padding: 1rem;
}

nav h1 a {
  font-family: var(--sans);
}

nav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
nav li:first-child {
  flex-basis: 100%;
  text-align: center;
}
nav [class*="fa-"] {
  font-size: 150%;
  color: var(--aqua);
}
nav h1 [class*="fa-"] {
  font-size: 100%;
  color: var(--aqua);
}
nav a {
  color: white;
  text-decoration: none;
  display: block;
}

nav a:hover,
nav [class*="fa-"]:hover {
  color: var(--magenta);
}

@media (min-width: 850px) {
  nav {
    max-width: 1200px;
    margin: 0 auto;
  }
  nav li:first-child {
    flex-basis: auto;
    text-align: left;
    margin-right: auto;
  }
}

<head>
<meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Oxygen&family=Oxygen Mono&display=swap" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
</head>
<!-- instructions in JavaScript block -->
<nav>
  <ul>
    <li>
      <h1>
        <a href="index.html">
          <span class="navHeader" aria-hidden="true"></span>
          <span>Amazing Restaurant</span>
        </a>
      </h1>
    </li>
    <li><a href="#menu">Menu</a></li>
    <li><a href="#reservations">Reservations</a></li>
    <li><a href="#specialoffers">Special Offers</a></li>
    <li><a href="#contact">Contact</a></li>
    <li>
      <a href="#Facebook" target="_blank">
        <span class="fab fa-facebook" aria-hidden="true"></span>
        <span class="sr-only">Facebook</span>
      </a>
    </li>
    <li>
      <a href="#Twitter" target="_blank">
        <span class="fab fa-twitter" aria-hidden="true"></span>
        <span class="sr-only">Twitter</span>
      </a>
    </li>
    <a href="#Instagram" target="_blank">
    <span class="fab fa-instagram" aria-hidden="true"></span>
        <span class="sr-only">Instagram</span>
    </a>
  </ul>
</nav>

Keep playing with the code. Change the colors and margins and play around to see what happens in CodePen or your text editor. The next part is getting it to work with the rest of the page.

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/434315.html

標籤：html css 弹性盒导航

上一篇：如何替換“制表符”符號和多個空格，以便它們在HTML郵件正文中正確顯示

下一篇：從按鈕單擊React/Js上的元素中獲取值