CSS Flex和響應(yīng)式移動端適配：現(xiàn)代主流網(wǎng)站APP小程序的界面布局方式【實踐
<!DOCTYPE html>
<html lang="en">
? <head>
? ? <meta charset="UTF-8" />
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0" />
? ? <title>Flex</title>
? ? <style>
? ? ? body {
? ? ? ? margin: 0;
? ? ? ? height: 100vh;
? ? ? ? background-color: #eee;
? ? ? }
? ? ? /* * {
? ? ? ? border: 1px solid black;
? ? ? } */
? ? ? .flex {
? ? ? ? display: flex;
? ? ? }
? ? ? .column {
? ? ? ? flex-direction: column;
? ? ? }
? ? ? .flex1 {
? ? ? ? flex: 1;
? ? ? }
? ? ? .white {
? ? ? ? background-color: white;
? ? ? }
? ? ? .mg8 {
? ? ? ? margin: 8px;
? ? ? }
? ? ? .mgr8 {
? ? ? ? margin-right: 8px;
? ? ? }
? ? ? .mgt8 {
? ? ? ? margin-top: 8px;
? ? ? }
? ? ? .yinying {
? ? ? ? box-shadow: rgb(0 0 0/ 20%) 0px 2px 1px -1px,
? ? ? ? ? rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px;
? ? ? }
? ? </style>
? </head>
? <body class="flex">
? ? <!-- 側(cè)邊欄 -->
? ? <div style="width: 180px; z-index: 2" class="white yinying">
? ? ? <!-- 頭像欄 -->
? ? ? <div
? ? ? ? class="flex"
? ? ? ? style="
? ? ? ? ? padding: 10px;
? ? ? ? ? align-items: center;
? ? ? ? ? justify-content: center;
? ? ? ? ? border-bottom: 1px solid #eee;
? ? ? ? ?
? ? ? ? "
? ? ? >
? ? ? ? <p style="margin-left: 10px; font-size: 12px">hbchen</p>
? ? ? </div>
? ? </div>
? ? <!-- 主區(qū)域 -->
? ? <div class="flex1 flex column">
? ? ? <!-- 頭部欄 -->
? ? ? <div style="height: 60px; z-index: 1" class="white yinying"></div>
? ? ? <!-- 內(nèi)容區(qū) -->
? ? ? <div style="overflow: auto" class="flex1 flex">
? ? ? ? <!-- 左區(qū) -->
? ? ? ? <div style="flex: 3" class="flex column mg8">
? ? ? ? ? <!-- 數(shù)據(jù)區(qū) -->
? ? ? ? ? <div class="flex">
? ? ? ? ? ? <!-- 數(shù)據(jù)塊 -->
? ? ? ? ? ? <div style="height: 100px" class="flex1 white mgr8 yinying"></div>
? ? ? ? ? ? <div style="height: 100px" class="flex1 white mgr8 yinying"></div>
? ? ? ? ? ? <div style="height: 100px" class="flex1 white mgr8 yinying"></div>
? ? ? ? ? ? <div style="height: 100px" class="flex1 white mgr8 yinying"></div>
? ? ? ? ? </div>
? ? ? ? ? <!-- 列表區(qū) -->
? ? ? ? ? <div class="flex column">
? ? ? ? ? ? <!-- 列表項 -->
? ? ? ? ? ? <div style="height: 140px" class="white mgt8 yinying"></div>
? ? ? ? ? ? <div style="height: 140px" class="white mgt8 yinying"></div>
? ? ? ? ? ? <div style="height: 140px" class="white mgt8 yinying"></div>
? ? ? ? ? ? <div style="height: 140px" class="white mgt8 yinying"></div>
? ? ? ? ? ? <div style="height: 140px" class="white mgt8 yinying"></div>
? ? ? ? ? ? <div style="height: 140px" class="white mgt8 yinying"></div>
? ? ? ? ? ? <div style="height: 140px" class="white mgt8 yinying"></div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <!-- 右區(qū) -->
? ? ? ? <div style="flex: 1" class="flex column mgr mgt8">
? ? ? ? ? <!-- 提示區(qū) -->
? ? ? ? ? <div style="height: 150px" class="white yinying"></div>
? ? ? ? ? <!-- 消息區(qū) -->
? ? ? ? ? <div style="height: 300px" class="white mgt8 yinying"></div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </body>
</html>
