Blogger Information
Blog 10
fans 0
comment 0
visits 3568
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
网格 和flex 的实际运用
失忆孤独患者
Original
367 people have browsed it

网格作业

<style>
.grid {
width: 800px;
height: 800px;
background-color: brown;

display: grid;
grid-template-columns: 110px 110px 110px 110px;
/ 每列的宽度 /
grid-template-rows: 110px 110px 110px 110px;
/ 每行高度 /

/ 百分比使用 /
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;

/ repeat()函数简化 /
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%) !important;
/ repeat 重复 1fr 是比例 /
}

.red {
width: 200px;
height: 400px;
background-color: saddlebrown;
border: 1px solid blue;
/ 怪异盒子模型 让边框占据实际位置 /
box-sizing: border-box;
/ 使用 /

}
</style>
</head>

<div class="grid">
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
</div>
flex 作业
<div class="stckey">
<!-- <header> -->
<div class="thesa">
<a href="">首页</a>
<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>
<a href="">导航栏</a>

</div>
<!-- </header> -->
<div class="box">
<ul class="contgrid">
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>

<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
<li>这是一份作业</li>
</ul>
</div>
</div>
<style>
.stckey .thesa {
width: 1190;
margin: 0 auto;
display: flex;
background-color: blueviolet;
position: sticky;
position: -webkit-sticky;
top: 0;
/ place-content: space-between; 两端对其 /
}

.thesa>a {
height: 35px;
width: 90px;
background-color: rgb(23, 246, 116);
color: aliceblue;
text-align: center;
line-height: 35px;
text-decoration: none;
margin: 0 auto;
}

.thesa>a:hover {
background-color: blue;
}

/ 1fr 是比例的意思 /
</style>

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:代码内容可以用老师叫的markdown语法,使用代码块包裹起来,这样会方便阅读
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post