Day25 切版笔记 - 导览列

运用到的观念

行内元素与区块元素特性
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);
}