2021-06-03 - Githubissues

Lichen5221 commented 3 years ago

變化的導覽列

html 檔：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Test</title>
    <link rel="stylesheet" href="./test.css" />
    <script src="https://kit.fontawesome.com/9c374a27e2.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <header class="main-header">
      <div class="container">
        <a href="#" class="logo">
          <img src="https://picsum.photos/200?random=1" alt="loge Test" />
        </a>
        <nav class="main-nav">
          <a href="#">關於作者</a>
          <a href="#">作品列表</a>
          <a href="#">角色介紹</a>
          <a href="#">社群媒體</a>
        </nav>
      </div>
    </header>
  </body>
</html>

CSS 檔：

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-header{
    background: linear-gradient(0deg, #cc4380, #fb6c75);
}

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

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

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

.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: .3s;
}

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

.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;
}

Lichen5221 commented 3 years ago

將 Logo 放置中央， nav 切成兩段的改法。

也可以將 html 檔中直接調換順序，但那樣太 low ，所以採用 order 的方式。

html 檔：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Test</title>
    <link rel="stylesheet" href="./test.css" />
    <script src="https://kit.fontawesome.com/9c374a27e2.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <header class="main-header">
      <div class="container">
        <a href="#" class="logo">
          <img src="https://picsum.photos/200?random=1" alt="loge Test" />
        </a>
        <nav class="main-nav">
          <a href="#">關於作者</a>
          <a href="#">作品列表</a>
        </nav>
        <nav class="main-nav">
          <a href="#">角色介紹</a>
          <a href="#">社群媒體</a>
        </nav>
      </div>
    </header>
  </body>
</html>

CSS 檔：

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-header{
    background: linear-gradient(0deg, #cc4380, #fb6c75);
}

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

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

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

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

.main-header .main-nav:first-of-type{
    order: -1;
}

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

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

.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;
}

Lichen5221 commented 3 years ago

不把 nav 分段切的時候，把 Logo 放中央的方法。

第一個：絕對定位。

html 檔：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <title>Test</title>
    <link rel="stylesheet" href="./test.css" />
    <script src="https://kit.fontawesome.com/9c374a27e2.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <header class="main-header">
      <div class="container">
        <a href="#" class="logo">
          <img src="https://picsum.photos/200?random=1" alt="loge Test" />
        </a>
        <nav class="main-nav">
          <a href="#">關於作者</a>
          <a href="#">作品列表</a>
          <a href="#">角色介紹</a>
          <a href="#">社群媒體</a>
        </nav>
      </div>
    </header>
  </body>
</html>

CSS 檔：

*{
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-header{
    background: linear-gradient(0deg, #cc4380, #fb6c75);
}

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

.main-header .logo{
    width: 100px;
    position: absolute; /* 這裡定位 */
}

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

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

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

.main-header .main-nav a:nth-child(3){
    margin-left: 140px;
}

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

.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;
}

Lichen5221 / Report-Daily

2021-06-03 #45

變化的導覽列