JSFiddle - React, Tailwind, and code Playground

by lueichun

HTML

<body>
    <html>
        <body>
            <header>
                <div><img src="https://imgur.com/YtOejpS.png" class="headerimg"></div>
                <div class="headernav">
                    <nav>
                        <a href="">訂位</a>
                        <a href="">查詢訂位</a>
                        <a href="">修改/取消訂位</a>
                        <a href="">查詢餐廳</a>
                        <a href="">推薦餐廳</a>
                        <a href="">關於我們</a>
                    </nav>
                    <nav>
                        <a href="">註冊</a>
                        <a href="">登入</a>
                        <a href="">忘記密碼？</a>

                    </nav>
                </div>
            </header>
            <main>
                <div class="mainDiv"><img src="https://imgur.com/tJuGXUM.png" id="mainImg"></div>
            </main>
            <footer>
                <div id="fooText">web © 2015 , Update @2023 Maintain by TSuiling ( tsuiling1020@gmail.com )</div>
            </footer>
        </body>
    </html>
</body

CSS

* {
        margin:0;
        padding:0;
        box-sizing: border-box;
    }
    header{
        display: flex;
        justify-content: space-between;
        height:20vh;
        background-image: linear-gradient(rgb(179, 39, 184), rgba(255, 255, 0, 0))
    }
    /* header正下一層是圖片框與nav框兩部分，圖片框包含img、nav框包含上、下兩個nav，
    所以header正下方會有2個div */
    /* header正下方第一個div */
    header div{
        /*background-color: rgb(212, 124, 23);*/
        width: 40%;
        height:100%;
    }
    header div .headerimg{
        display:inline-block;/*改成block也可*/
        height:100%;
        /* 這樣LOGO會有個預設寬度 */
        /* 改變LOGO預設寬度 */
        /* 方法一 */
        /*width:300px;*/
       /* 方法二 */
        transform: scaleX(3);
        transform-origin:0 0;
    }
    /* header正下方第二個div */
    header .headernav{
        /*background-color: aquamarine;*/
        display: flex;
        flex-direction:column;
        justify-content: space-between;
        /* 設定第2個div要占滿爸爸剩餘的空間 */
        /* width:60%; */
        /* 要讓第2個div可以依照爸爸剩餘的空間來動態縮放 */
        flex:1;
    }
    header .headernav nav{
        width:100%;/*這樣width也會有足夠的空間來放anchor，就可彈性增加anchor*/
        text-align: right;
        padding-right: 30px;
    }
    header .headernav nav a{
        background-color: #fffb0000;
        color: black;
        font-family:Arial, Helvetica, sans-serif;
        font-size: 25px;
        text-decoration: none;

        display: inline-block;
        height:100%;
        /* 兒子要相對爸爸來定位，爸爸要設定可以被相對定位 */
        position: relative;
    }
    /* 令anchor的底線是一個元素，較容易設定底線 */
    /* 但底線又不算是真正的元素，故設定底線為偽元素，且是位在anchor下方的偽元素 */
    header .headernav nav a::after{
        /* 這樣就是設定偽元素(底線)在anchor下一層(非anchor下方) */
        content: '';/*一定要寫，不然偽元素無法存在*/
        display:inline-block;/*偽元素預設是inline，要改成block才能有寬高*/
        height: 4px;
        width: 0%;  
        background-color: #000000;
        
        /* 令該偽元素在anchor下方 */
        position: absolute;
        left: 0;
        bottom: 0;  
        
       ...