亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

網(wǎng)格作業(yè)

<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()函數(shù)簡化 /
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%) !important;
/ repeat 重復(fù) 1fr 是比例 /
}

.red {
width: 200px;
height: 400px;
background-color: saddlebrown;
border: 1px solid blue;
/ 怪異盒子模型 讓邊框占據(jù)實際位置 /
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 作業(yè)
<div class="stckey">
<!-- <header> -->
<div class="thesa">
<a href="">首頁</a>
<a href="">導(dǎo)航欄</a>
<a href="">導(dǎo)航欄</a>
<a href="">導(dǎo)航欄</a>
<a href="">導(dǎo)航欄</a>
<a href="">導(dǎo)航欄</a>
<a href="">導(dǎo)航欄</a>
<a href="">導(dǎo)航欄</a>

</div>
<!-- </header> -->
<div class="box">
<ul class="contgrid">
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>

<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</li>
<li>這是一份作業(yè)</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>

批改老師：PHPz

批改狀態(tài)：合格

老師批語：代碼內(nèi)容可以用老師叫的markdown語法，使用代碼塊包裹起來，這樣會方便閱讀