直播平臺軟體開發,flex佈局例項

zhibo系統開發發表於2022-12-22

直播平臺軟體開發,flex佈局例項

<!DOCTYPE html>
<html lang="">
<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>Vue3</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="cleartype" content="on">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="renderer" content="webkit">
    <style>
        :root{
            --color1:var(--color1)
        }
        *{
            margin: 0%;
            padding: 0%;
        }
        html{
            font-size: 16px;
        }
        #app{
            /* display: grid;
            place-content: center; */
            height: 100vh;
            width: 100vw;
        }
        .wrap-main{
        }
        .plate{
            padding: 3rem;
            border: .3rem solid #999595;
            font-size: 1rem;
            background-size: 100% 100%;
            background-clip: border-box;
        }
        .plate-1{
            padding: 3rem;
            border: .3rem solid #999595;
            font-size: 2rem;
            background-size: 100% 100%;
            background-clip: border-box;
            height: 5rem;
            width: 50rem;
            display: flex;
        }
        .plate-1-item-1{
            flex:1 1;
            display: grid;
            place-content: center;
            background-color: aquamarine;
            margin: .2rem;
        }
        .plate-1-item-2{
            background-color: bisque;
            width: 100%;
            margin: .2rem;
            display: grid;
            place-content: center;
        }
        .plate-2{
            padding: 3rem;
            border: .3rem solid #999595;
            font-size: 2rem;
            background-size: 100% 100%;
            background-clip: border-box;
            height: 5rem;
            width: 50rem;
            display: flex;
            align-items: center;
        }
        .plate-2-item-1{
            flex:1 1;
            display: grid;
            place-content: center;
            background-color: aquamarine;
            margin: .2rem;
            font-size: .8rem;
        }
        .plate-2-item-2{
            background-color: bisque;
            flex: 2;
            margin: .2rem;
            display: grid;
            place-content: center;
            font-size: .8rem;
        }
        .plate-2-self{
            align-self: stretch;
        }
        /* 等高佈局table */
        .plate-3{
            padding: 3rem;
            border: .3rem solid #999595;
            font-size: 2rem;
            background-size: 100% 100%;
            background-clip: border-box;
            height: 5rem;
            width: 50rem;
            display: table;
        }
        .plate-3-item-1{
            width: 30%;
            font-size: .8rem;
            display: table-cell;
            border: .1rem solid #999595;
        }
        /* 等高佈局grid */
        .plate-4{
            padding: 3rem;
            border: .3rem solid #999595;
            font-size: 2rem;
            background-size: 100% 100%;
            background-clip: border-box;
            width: 50rem;
            display: grid;
            grid-auto-flow: column;
        }
        .plate-4-item-1{
            font-size: .8rem;
        }
        .plate-4-item-1:nth-child(1){
            background-color: aqua;
        }
        .plate-4-item-1:nth-child(2){
            background-color: rgb(95, 228, 90);
        }
        .plate-4-item-1:nth-child(3){
            background-color: rgb(228, 90, 125);
        }
        /* 等高佈局,相容最強 */
        .plate-5{
            padding: 3rem;
            border: .3rem solid #999595;
            font-size: 2rem;
            background-size: 100% 100%;
            background-clip: border-box;
            width: 50rem;
            font-size: .8rem;
            color: white;
        }
        .plate-5-main{
            overflow: hidden;
        }
        .plate-5-left{
            float: left;
            display: inline-block;
            width: 30%;
            background-color: rgb(228, 90, 125);
            padding-bottom: 999999rem;
            margin-bottom: -999999rem;
        }
        .plate-5-right{
            display: inline-block;
            width: 50%;
            background-color: rgb(95, 228, 90);
        }
        /* 導航欄 */
        .plate-6{
            background-color: blueviolet;
            color: white;
            display: flex;
        }
        .plate-6-right{
            display: flex;
            margin-left: auto;
            cursor: pointer;
            background-color: #999595;
        }
        .plate-6-right div{
            margin: 0 2rem;
        }
        .plate-6 nav ul{
            display: flex;
            list-style: none;
            background-color: #999595;
        }
        .plate-6 nav ul li{
            margin: 0 2rem;
            cursor: pointer;
        }
        .plate-6 nav ul li:hover,.plate-6-right div:hover{
            transform:scale(1.2);
            -webkit-transform:scale(1.2);
            -moz-transform:scale(1.2);
            -o-transform:scale(1.2);
            -ms-transform:scale(1.2);
            color: rgb(123, 255, 0);
        }
        /* flex自適應 */
        .plate-7{
            display: flex;
            flex-wrap: wrap;
        }
        .plate-7-left{
            flex: 0 0 15rem;
            /* width: 15rem; */
        }
        .plate-7-right{
            flex: 1 0 0;
        }
        /* flex效果搜尋框 */
        .plate-8{
            display: flex;
            flex-wrap: nowrap;
        }
        .search-left{
            padding: 1rem 2rem;
            background-color: rgb(0, 153, 255);
            border-radius: 30%;
            color: white;
            font-weight: 600;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            text-align: center;
        }
        .search-right{
            flex-grow: 1;
            display: flex;
        }
        .search-right input[type='text']{
            border-top: none;
            border-right: none;
            border-left: none;
        }
        .search-right input[type='text']:focus{
            border-top: none;
            border-right: none;
            border-left: none;
            flex-grow: 1;
        }
        /* 聖盃佈局 */
        .plate-9{
            /* width: 50rem; */
            /* height: 25rem; */
            display: flex;
            flex-direction: column;
        }
        
        @media (max-width:789px) {
            section{
                flex-direction: column !important;
                flex: 1;
            }
            .plate-9-center{
                flex: 1;
            }
            .plate-9-left,.plate-9-right{
                flex: 0 0 5rem !important;
            }
        }
        .plate-9-header{
            background-color: rebeccapurple;
        }
        .plate-9-footer{
            background-color: aquamarine;
        }
        .plate-9 section{
            display: flex;
            flex: 1;
            flex-direction: row;
        }
        .plate-9-left{
            background-color: beige;
            flex: 0 0 15rem;
            order: -1;
        }
        .plate-9-center{
            background-color: rgb(28, 123, 196);
            flex: 1;
        }
        .plate-9-right{
            background-color: rgb(150, 34, 125);
            flex: 0 0 15rem;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            板塊1:Flex佈局
            <div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>2</div>
                <div>2</div>
                <div>2</div>
            </div>
            板塊2 align-items 和 align-self
            <div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>2</div>
                <div>2</div>
                <div class="plate-2-item-1 plate-2-self">1</div>
                <div>2</div>
            </div>
            板塊3 等高佈局實現方式一:table佈局
            <div>
                <div>素位於容器的基線上。 如彈性盒子元素的行內軸與側軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對齊。</div>
                <div>測試</div>
                <div>素位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行,該值等效於'center'。在其它情況下,各行會按一定方式在彈性盒容器中排列,以保持兩兩之間的空間相等,同時第一行前面及最後一行後面的空間是其他空間的一半。</div>
            </div>
            板塊4 等高佈局實現方式二:grid佈局
            <div>
                <div>素位於容器的基線上。 如彈性盒子元素的行內軸與側軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對齊。</div>
                <div>測試</div>
                <div>素位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行,該值等效於'center'。在其它情況下,各行會按一定方式在彈性盒容器中排列,以保持兩兩之間的空間相等,同時第一行前面及最後一行後面的空間是其他空間的一半。</div>
            </div>
            板塊5 等高佈局,相容最強
            <div>
                <div>
                    <div>位於容器的基線上。 如彈性盒子元素的行內軸與側軸為同一條,則該值與'f</div>
                    <div>素位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行,該值等效於'center'。在其它情況下,各行會按一定方式在彈性盒容器中排列,以保持兩兩之間的空間相等,同時第一行前面及最後一行後面的空間是其他空間的一半</div>
                </div>
            </div>
            板塊6 導航欄
            <div class="plate-6 plate">
                <nav>
                    <ul>
                        <li>
                            導航一
                        </li>
                        <li>
                            導航二
                        </li>
                        <li>
                            導航三
                        </li>
                    </ul>
                </nav>
                <div>
                    <div>登入</div>
                    <div>註冊</div>
                </div>
            </div>
            板塊7 自適應flex
            <div class="plate-7 plate">
                <div>標題資訊</div>
                <div>內容資訊位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈,兩端保留子元素與子元</div>
            </div>
            板塊8 自適應flex下的搜尋框
            <div class="plate-8 plate">
                <div>搜尋</div>
                <div>
                    <input type="text" name="" id="">
                </div>
            </div>
            板塊9 聖盃佈局
            <div class="plate-9 plate">
                <div>頭部</div>
                <section>
                    <div>中間</div>
                    <div>右側</div>
                    <div>左側</div>
                </section>
                <div>底部</div>
            </div>
        </div>
    </div>
</body>
<script src="
<script src="./learnTs/02_baseType.js"></script>
<script>
    const Counter = {
        data:function(){
            return {
                num:0,
                name:'張三'
            }
        }
    }
    let app =Vue.createApp(Counter).mount('#app')
    console.log(app)
</script>
</html>


以上就是直播平臺軟體開發,flex佈局例項, 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69978258/viewspace-2929033/,如需轉載,請註明出處,否則將追究法律責任。

相關文章