CSS Flex和响应式移动端适配：现代主流网站APP小程序的界面布局方式【实践
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>导航页</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="请输入关键词" />
<!-- 搜索按钮 -->
<input class="button" type="submit" value="搜索" />
</form>
</div>
<!-- 内容 -->
<div class="flex body">
<!-- 侧栏 -->
<div class="left white">
<div class="sign flex center">导航</div>
<div class="sign flex center">导航</div>
<div class="sign flex center">导航</div>
<div class="sign flex center">导航</div>
<div class="sign flex center">导航</div>
<div class="sign flex center">导航</div>
<div class="sign flex center">导航</div>
<div class="sign flex center">导航</div>
</div>
<!-- 右边 -->
<div class="flex column right">
<!-- 盒子 -->
<div class="box white">
<!-- 标题 -->
<div class="title">
<h1>标题</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>
