<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title>網(wǎng)格系統(tǒng)</title>
<link?type="text/css"?rel="stylesheet"?href="bootstrap-5.1.3-dist/bootstrap-5.1.3-dist/css/bootstrap.css">
<script?type="text/javascript"?src="bootstrap-5.1.3-dist/bootstrap-5.1.3-dist/js/bootstrap.js"></script>
<meta?name="viewport"?content="width=device-width,initial-scale=1"/>
<style?type="text/css">
.q{
??? width:?100%;
height:1500px;
background-color:fuchsia;
display:?flex;
flex-direction:column;
flex-wrap:?wrap;
justify-content:space-between;
align-items:?center;
}
.im{
width:1000px;
height:?150px;
background-color:pink;
display:?flex;
flex-direction:row;
flex-wrap:?wrap;
justify-content:center;
align-items:?center;
}
p.{
width:100%
height:1500px;
background:?chartreuse;
}
.container{
display:?flex;
flex-direction:column;
flex-wrap:?wrap;
justify-content:center;
align-items:?center;
}
.row{
display:?flex;
flex-direction:row;
flex-wrap:?wrap;
justify-content:flex-start;
align-items:?center;
}
.col-lg-6,.col-sm-12{
width:450px;
height:400px;
}
.ti{
width:?435px;
height:?50px;
display:?flex;
flex-direction:column;
flex-wrap:?wrap;
justify-content:flex-start;
align-items:?flex-start:;
background:white;
}
.yi{
width:?435px;
height:?330px;
display:?flex;
flex-direction:column;
flex-wrap:?wrap;
justify-content:flex-start;
align-items:?flex-start:;
background:white;
}
.ni{
width:?435px;
height:?380px;
background:?orange;
display:?flex;
flex-direction:column;
flex-wrap:?wrap;
justify-content:flex-start;
align-items:?flex-start:;
}
</style>
</head>
<body>
<div?class="q">
<div?class="im">
<h1?class="h1">Advance?your?thinking?today?and?every?day.</h1>
</div>
<div?class="container">
<div?class="row">
<div?class="col-lg-6?col-sm-12">
<div?class="ti"><h4>Accelerate?knowledge?from?day?one.</h4></div>
<div?class="yi">
<p>
Type?brackets?around?an?`[idea]`?to?create?a?new?link?or?see?auto-complete? results.?You?can?instantly?click?to?jump?to?a?new?page?and?keep?typing?ideas.
</p>
</div>
</div>
<div?class="col-lg-6?col-sm-12"><div?class="ni">第2塊</div></div>
</div>
<div?class="row">
<div?class="col-lg-6?col-sm-12"><div?class="ni">第1塊</div></div>
<div?class="col-lg-6?col-sm-12">
<div?class="ti"><h4>Accelerate?knowledge?from?day?one.</h4></div>
<div?class="yi">
<p>
Type?brackets?around?an?`[idea]`?to?create?a?new?link?or?see?auto-complete? results.?You?can?instantly?click?to?jump?to?a?new?page?and?keep?typing?ideas.
</p>
</div>
</div>
</div>
<div?class="row">
<div?class="col-lg-6?col-sm-12">
<div?class="ti"><h4>Accelerate?knowledge?from?day?one.</h4></div>
<div?class="yi">
<p>
Type?brackets?around?an?`[idea]`?to?create?a?new?link?or?see?auto-complete? results.?You?can?instantly?click?to?jump?to?a?new?page?and?keep?typing?ideas.
</p>
</div>
</div>
<div?class="col-lg-6?col-sm-12"><div?class="ni">第2塊</div></div>
</div>
</div>
</div>
</body>
</html>
