Day25 切版筆記 - 導覽列 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 25

自我挑戰組

文組視角的初學前端筆記系列第 25 篇

Day25 切版筆記 - 導覽列

13th鐵人賽

ptsai129

2021-09-25 21:19:49

1260 瀏覽

運用到的觀念

行內元素與區塊元素特性
flexbox
利用margin: auto;會平均分配剩餘空間的特性來設定元素的排列位置
使用:focus 改掉點到搜尋欄位時會出現的預設outline樣式
使用絕對定位、相對定位搭配偽元素(::after)及偽類(:hover)和transition設定出底線消失出現的動畫效果
使用transform搭配偽類(:hover)和transition設定出連結往上移動的動畫效果

HTML結構

    <header class="main-header">
      <div class="container">
        <a href="#" class="logo">
          <img src="/image/shiba.png" alt="ShibaInu" />
        </a>
        <nav class="main-nav">
          <a href="#">總柴吃什麼</a>
          <a href="#">總柴去哪玩</a>
          <a href="#">總柴學切版</a>
          <a href="#">總柴的廢話</a>
        </nav>
        <form class="header-search">
          <input type="search" name="" id="" />
          <button><i class="fa fa-search"></i></button>
        </form>
      </div>
    </header>

head內有載入google fonts 字體和font awesome

  <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" />
    <title>鐵人賽Day25</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap"rel="stylesheet"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="./styles/style.css" />
  </head>

目前看到的畫面

CSS結構

1.將container區塊內的內容設成橫向並排
並設定寬度是滿版但不要超過1200px
使用margin:auto; 將內容水平置中

* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Noto Sans TC", sans-serif;
}

.main-header .container {
  display: flex;
  align-items: center;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
}

調整logo圖片的大小
將img的外容器(logo區塊)寬度固定
使用width:100%; 設定img圖片寬度佔滿logo
並且改變圖片對齊方式以消除多出來往下的區塊

.main-header .logo {
  width: 100px;
}

.main-header .logo img {
  width: 100%;
  vertical-align: middle;
}

3. 運用margin: auto;會平均分配剩餘空間的特性，將nav部分設成水平置中

.main-header .main-nav {
  margin: auto;
}

設定header區塊的背景色彩

 .main-header {
  background: linear-gradient(20deg, #ffa042, #842b00);
}

設定nav區塊a連結的顏色和樣式並增加內距

.main-header .main-nav a {
  text-decoration: none;
  color: #fff;
  padding: 5px 1em;

更改搜尋欄的樣式

更改前

使用display:flex; 將form內的button和input設成緊密排列

.main-header .header-search {
  display: flex;
}

將邊框線去掉
更改背景色
並增加上下左右的內距

 .main-header .header-search button,
.main-header .header-search input {
  border: none;
  background-color: #fff;
  padding: 5px 10px;
}

使用border-radius 將外框的角度改成圓弧形

.main-header .header-search button {
  border-radius: 0 200px 200px 0;
}
.main-header .header-search input {
  border-radius: 200px 0 0 200px;
}

點到搜尋欄時，會出現不好看的黑框

使用:focus來更改outline的設定

.main-header .header-search button:focus,
.main-header .header-search input:focus {
  outline: none;
}

在a連結下設定有互動效果的底線

使用絕對定位將底線固定在a連結內
高度設為0

.main-header .main-nav a {
  text-decoration: none;
  color: #fff;
  padding: 5px 1em;
  position: relative;
  }
.main-header .main-nav a::after {
  content: " ";
  position: absolute;
  left: 0%;
  right: 0%;  
  height: 0; 
  border-bottom: 1px solid #fff;
}

設定bottom:-5px 將底線移動位置到a連結下方

.main-header .main-nav a::after {
  content: " ";
  position: absolute;
  left: 0%;
  right: 0%;  
  height: 0;    
  bottom: -5px;  
  border-bottom: 1px solid #fff;
}

將底線設定成游標碰到才會出現
left,right都設定成50% 就把底線設定到中間且消失不見
游標碰到時和left right的距離變成0 就變成了完整的底線


.main-header .main-nav a::after {
  content: " ";
  position: absolute;
  left: 50%;
  right: 50%; 
  height: 0;    
  bottom: -5px;  
  border-bottom: 1px solid #fff;
  transition:.3s; 
}


.main-header .main-nav a:hover::after {
  left: 0;
  right: 0;
}

因為a連結是行內元素，會沿著同一行的區塊排列
要將外容器設定成display: flex
才能設定滑鼠碰到往上移動的效果

.main-header .main-nav {
  margin: auto;
  display: flex; 
}
.main-header .main-nav a {
  text-decoration: none;
  color: #fff;
  padding: 5px 1em;
  position: relative; 
  transform: translateY(0px);
  transition: 0.3s; 
}


.main-header .main-nav a:hover {
  transform: translateY(-10px);
}