CSS Flex和響應(yīng)式移動端適配：現(xiàn)代主流網(wǎng)站APP小程序的界面布局方式【實踐
<!DOCTYPE html>
<html lang="zh-CN">
? <head>
? ? <meta charset="UTF-8" />
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0" />
? ? <title>導(dǎo)航頁</title>
? ? <style>
? ? ? /* {
? border: 1px solid black;
} */
? ? ? body {
? ? ? ? margin: 0px;
? ? ? ? display: flex;
? ? ? ? flex-direction: column;
? ? ? ? justify-content: center;
? ? ? ? align-items: center;
? ? ? ? background-color: #f1f5f8;
? ? ? }
? ? ? .flex {
? ? ? ? display: flex;
? ? ? }
? ? ? .column {
? ? ? ? flex-direction: column;
? ? ? }
? ? ? .center {
? ? ? ? justify-content: center;
? ? ? ? align-items: center;
? ? ? }
? ? ? .shadow {
? ? ? ? box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px 0px;
? ? ? }
? ? ? .head {
? ? ? ? width: 100vw;
? ? ? }
? ? ? .white {
? ? ? ? background-color: rgb(255, 255, 255);
? ? ? }
? ? ? .head-h {
? ? ? ? height: 80px;
? ? ? }
? ? ? .logo {
? ? ? ? width: 200px;
? ? ? }
? ? ? .main {
? ? ? ? width: 800px;
? ? ? }
? ? ? .ss {
? ? ? ? width: 200px;
? ? ? }
? ? ? .head-p {
? ? ? ? width: 1200px;
? ? ? ? height: 400px;
? ? ? ? margin-bottom: 10px;
? ? ? ? z-index: -1;
? ? ? }
? ? ? .search {
? ? ? ? width: 800px;
? ? ? ? height: 60px;
? ? ? ? background-color: white;
? ? ? ? border-radius: 5px;
? ? ? }
? ? ? .input {
? ? ? ? width: 650px;
? ? ? ? height: 40px;
? ? ? ? border: none;
? ? ? ? margin: 25px;
? ? ? }
? ? ? .button {
? ? ? ? width: 80px;
? ? ? ? height: 40px;
? ? ? ? border: none;
? ? ? ? border-radius: 5px;
? ? ? }
? ? ? .button:active {
? ? ? ? background-color: rgba(225, 0, 0, 0.8);
? ? ? }
? ? ? .body {
? ? ? ? width: 1200px;
? ? ? ? height: 600px;
? ? ? }
? ? ? .left {
? ? ? ? width: 80px;
? ? ? ? height: 600px;
? ? ? ? margin-right: 10px;
? ? ? ? padding-top: 10px;
? ? ? }
? ? ? .right {
? ? ? ? width: 100%;
? ? ? ? height: 600px;
? ? ? }
? ? ? .box {
? ? ? ? width: 100%;
? ? ? ? height: 600px;
? ? ? ? margin-bottom: 10px;
? ? ? }
? ? ? .title {
? ? ? ? width: 100%;
? ? ? ? height: 60px;
? ? ? ? border-bottom: 1px solid rgba(0, 0, 0, 0.1);
? ? ? }
? ? ? .card {
? ? ? ? width: 100%;
? ? ? ? height: 540px;
? ? ? }
? ? ? .line {
? ? ? ? flex: 1;
? ? ? }
? ? ? .cube {
? ? ? ? flex: 1;
? ? ? ? background-color: rgb(255, 255, 255);
? ? ? }
? ? ? .cube:hover {
? ? ? ? box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 10px 0px;
? ? ? }
? ? ? .sign {
? ? ? ? width: 100%;
? ? ? ? height: 40px;
? ? ? ? background-color: blueviolet;
? ? ? }
? ? ? .footer {
? ? ? ? width: 1200px;
? ? ? ? height: 200px;
? ? ? ? background-color: black;
? ? ? }
? ? </style>
? </head>
? <body>
? ? <!-- 頂欄 -->
? ? <div class="head head-h shadow flex center">
? ? ? <!-- logo -->
? ? ? <div class="logo head-h"></div>
? ? ? <!-- 菜單 -->
? ? ? <div class="main head-h"></div>
? ? ? <!-- 搜索 -->
? ? ? <div class="ss head-h"></div>
? ? </div>
? ? <!-- 頭圖 -->
? ? <div class="flex head-p center">
? ? ? <!-- 搜索框 -->
? ? ? <form class="flex search center">
? ? ? ? <!-- 輸入框 -->
? ? ? ? <input class="input" type="text" value="請輸入關(guān)鍵詞" />
? ? ? ? <!-- 搜索按鈕 -->
? ? ? ? <input class="button" type="submit" value="搜索" />
? ? ? </form>
? ? </div>
? ? <!-- 內(nèi)容 -->
? ? <div class="flex body">
? ? ? <!-- 側(cè)欄 -->
? ? ? <div class="left white">
? ? ? ? <div class="sign flex center">導(dǎo)航</div>
? ? ? ? <div class="sign flex center">導(dǎo)航</div>
? ? ? ? <div class="sign flex center">導(dǎo)航</div>
? ? ? ? <div class="sign flex center">導(dǎo)航</div>
? ? ? ? <div class="sign flex center">導(dǎo)航</div>
? ? ? ? <div class="sign flex center">導(dǎo)航</div>
? ? ? ? <div class="sign flex center">導(dǎo)航</div>
? ? ? ? <div class="sign flex center">導(dǎo)航</div>
? ? ? </div>
? ? ? <!-- 右邊 -->
? ? ? <div class="flex column right">
? ? ? ? <!-- 盒子 -->
? ? ? ? <div class="box white">
? ? ? ? ? <!-- 標(biāo)題 -->
? ? ? ? ? <div class="title">
? ? ? ? ? ? <h1>標(biāo)題</h1>
? ? ? ? ? </div>
? ? ? ? ? <!-- 卡片 -->
? ? ? ? ? <div class="flex card">
? ? ? ? ? ? <!-- 豎向 -->
? ? ? ? ? ? <div class="flex column line">
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <!-- 豎向 -->
? ? ? ? ? ? <div class="flex column line">
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <!-- 豎向 -->
? ? ? ? ? ? <div class="flex column line">
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? </div>
? ? ? ? ? ? <!-- 豎向 -->
? ? ? ? ? ? <div class="flex column line">
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? ? <div class="cube flex center">方塊</div>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? ? <!-- 底欄 -->
? ? <div class="footer"></div>
? </body>
</html>
