[Day 5]新手村外的首战是史莱姆应该是定番吧

今天我们来完成Header，不过位置方面我是使用Tailwinds CSS，要花时间客制化位置，但我没那麽多时间所以没办法对的很准，请看官们见谅。

这是Native Camp的Header，

先上今日成果，可以看到尺寸些微的不准

图片是使用Native Camp的图片来源，url是透过浏览器开发者工具的network找到的。
图片不是使用img而是使用NextJs 的Image组件，对图片进行转化及压缩做优化。
因为是使用外部来源的图片，记得一定要在专案中新增next.config.js，然後在里面加入图片来源网站!

module.exports = {
    images: {
        domains: ['nativecamp.net']
    },
}

除了这个要注意外，还有就是颜色还有一些高度的设定，是tailwinds预设中没有的，所以需要在tailwind.config.js设定自己要的参数，以下是我自己目前所设定的客制化参数。
tailwind.config.j

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        nativeCamp: {
          header: {
            bg: "#112844",
            signup: '#F1890E',
            signupHov: '#ffa436',
            login: "#03c9a9",
            loginHov: "#22d6b8",
          },
        }
      },
      height: {
        logo: "30px",
        header: "83px"
      },
      fontSize: {
        headerLogo: ['2.0px', '1.2rem'],
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
  ],
}

这边都设定好了，就可以在Header.js中根据Native Camp的排版来想办法排，颜色还有排版都是透过浏览器的开发者工具中去找到设定，我今天才发现原来开发者工具可以选hover类的filter去看改变前後的参数，因为这个功能我才能够找到按钮hover後的颜色。

再来就是将header.js给实作完毕，
header.js

import Image from "next/image";

function Header() {
    return (
        <header className="bg-nativeCamp-header-bg h-header flex justify-center items-center">
            <div className="flex items-center">
                {/* Left */}
                <div className=" m-auto py-4 pr-80">
                    <div className="relative flex  h-logo cursor-pointer my-auto">
                        <Image
                            src="https://nativecamp.net/user/images/common/logo_s-zh-tw.png?v=2.1"
                            layout="fill"
                            objectFit="contain"
                            objectPosition="left"
                        />
                    </div>
                    <h1 className="text-white text-headerLogo">
                        线上英语会话的NativeCamp.7天免费体验进行中！
                    </h1>
                </div>
                {/* Right */}
                <div className=" pl-80 mb-4 space-y-2">
                    <ul className="flex justify-end ">
                        <li>
                            <a
                                className="text-white text-sm  hover:text-opacity-75"
                                href="https://nativecamp.net/zh-tw/tutors"
                            >
                                FOR TUTORS
                            </a>
                        </li>
                    </ul>
                    <ul className="flex space-x-2">
                        <li>
                            <a className='bg-nativeCamp-header-signup hover:bg-nativeCamp-header-signupHov text-white text-center text-xs py-2 px-6 rounded-sm  cursor-pointer'>注册</a>
                        </li>
                        <li>
                            <a className='bg-nativeCamp-header-login hover:bg-nativeCamp-header-loginHov text-white text-center text-xs py-2 px-6 rounded-sm  cursor-pointer'>登入</a>
                        </li>
                        <li>
                            <a className="bg-transparent hover:border-opacity-75 border border-bg-white text-white text-center text-xs p-2 px-4 rounded-sm  cursor-pointer">重新加入</a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>
    );
}

export default Header;

下一篇就来开始制作Nav