所以我刚开始用html / css编码并使用网格布局。
我制作了6列，共4行。但最终得到了很多编码，想知道是否有更有效的方式来编写它。
请注意我下面显示的示例代码仅适用于Internet Explorer，我的原始编码使用ff和chrome，所以我现在只是在玩IE。
HTML＆amp; CSS -
.wrap2{
/*display:flex;
*/
/*flex-wrap:wrap;
*/
margin: auto;
padding:0 2em 0 2em;
color:#ffffff;
background-color:#000000;
max-width: 1000px;
}
.star-container{
display: grid;
display: -ms-grid;
width:400px;
max-width:100%;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
-ms-grid-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
-ms-grid-rows: 1fr 1fr 1fr 1fr;
text-align: left;
margin: 0 auto;
}
.star{
padding:0 20px;
-ms-grid-column: 1/2;
-ms-grid-row: 1;
}
.star.a{
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 2;
}
.star.b{
-ms-grid-column: 3;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
}
.star.c{
-ms-grid-column: 4;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
}
.star.d{
-ms-grid-column:5;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
}
.star.e{
-ms-grid-column:6;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
}
.star.f{
-ms-grid-column: 7;
-ms-grid-row: 1;
-ms-grid-column-span: 1;
}
.star.g{
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-column-span: 2;
}
.star.h{
-ms-grid-column: 3;
-ms-grid-row: 2;
-ms-grid-column-span: 1;
}
.star.i{
-ms-grid-column: 4;
-ms-grid-row: 2;
-ms-grid-column-span: 1;
}
.star.j{
-ms-grid-column:5;
-ms-grid-row: 2;
-ms-grid-column-span: 1;
}
.star.k{
-ms-grid-column: 6;
-ms-grid-row: 2;
-ms-grid-column-span: 1;
}
.star.l{
-ms-grid-column: 7;
-ms-grid-row: 2;
-ms-grid-column-span: 1;
}
.star.m{
-ms-grid-column: 1;
-ms-grid-row: 3;
-ms-grid-column-span: 2;
}
.star.n{
-ms-grid-column: 3;
-ms-grid-row: 3;
-ms-grid-column-span: 1;
}
.star.o{
-ms-grid-column: 4;
-ms-grid-row: 3;
-ms-grid-column-span: 1;
}
.star.p{
-ms-grid-column:5;
-ms-grid-row: 3;
-ms-grid-column-span: 1;
}
.star.q{
-ms-grid-column: 6;
-ms-grid-row: 3;
-ms-grid-column-span: 1;
}
.star.r{
-ms-grid-column: 7;
-ms-grid-row: 3;
}
.star.s{
-ms-grid-column: 1;
-ms-grid-row: 4;
-ms-grid-column-span: 2;
}
.star.t{
-ms-grid-column: 3;
-ms-grid-row: 4;
-ms-grid-column-span: 1;
}
.star.u{
-ms-grid-column: 4;
-ms-grid-row: 4;
}
.star.v{
-ms-grid-column:5;
-ms-grid-row: 4;
}
.star.w{
-ms-grid-column: 6;
-ms-grid-row: 4;
}
.star.x{
-ms-grid-column: 7;
-ms-grid-row: 4;
-ms-grid-column-span: 1;
}
.star:nth-child(-n+6){
border-top:1px solid #fff;
}
.star:nth-child(6n+1){
padding-left:2em;
}
.star:nth-child(6n+6){
padding-right:2em;
}<div class="wrap2">
<div class="sectionpadding column">
<h2>My skills</h2><br/><br/>
<div class="star-container">
<div class="star a">HTML/CSS</div>
<div class="star b"><i class="fas fa-star"></i></div>
<div class="star c"><i class="fas fa-star"></i></div>
<div class="star d"><i class="fas fa-star"></i></div>
<div class="star e"><i class="fas fa-star"></i></div>
<div class="star f" ><i class="far fa-star"></i></div>
<div class="star g">JavaScript/jQuery</div>
<div class="star h"><i class="fas fa-star"></i></div>
<div class="star i"><i class="fas fa-star"></i></div>
<div class="star j"><i class="fas fa-star"></i></div>
<div class="star k"><i class="far fa-star"></i></div>
<div class="star l" ><i class="far fa-star"></i></div>
<div class="star m">Bootstrap</div>
<div class="star n"><i class="fas fa-star"></i></div>
<div class="star o"><i class="fas fa-star"></i></div>
<div class="star p "><i class="fas fa-star"></i></div>
<div class="star q"><i class="far fa-star"></i></div>
<div class="star r" ><i class="far fa-star"></i></div>
<div class="star s">Photoshop</div>
<div class="star t"><i class="fas fa-star"></i></div>
<div class="star u"><i class="fas fa-star"></i></div>
<div class="star v"><i class="fas fa-star"></i></div>
<div class="star w"><i class="far fa-star"></i></div>
<div class="star x" ><i class="far fa-star"></i></div>
</div>
</div>
</div>
答案 0 :(得分：2)
关于在静态页面中执行此操作的最佳方式。
你可以在CSS中指定斜体以删除i标签。
对于CSS，您可以使用parent：grid-template-areas和child：grid-area。