热门
立即入驻

7b2优优教程网图标区块 – WordPress区块

7B2美化4个月前发布 admin
69 00

用ChatGPT写的7b2美化这是一款来自优优教程网的图标介绍wordpress区块，以两行五列的布局清晰明了的展示了各大图标，渐变的背景衬托出图标的灵动，每一个区块都可以点击链接。

7b2优优教程网图标区块 - WordPress区块

css代码

@charset "utf-8";
/*Npcink

	版本：1.0
	整理：Muze
	帮助：https://www.npc.ink/16669.html
*/

/*图标*/


[class*=" icon-"]:before, [class^=icon-]:before {
    margin: 0;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    opacity: .8;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    font-size: 120%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
}

/*1*/
.icon-course-1:before {
    content: 'N';
}
/*2*/
.icon-course-2:before {
    content: 'P';
}
/*3*/
.icon-course-3:before {
    content: 'C';
}
/*4*/
.icon-course-4:before {
    content: 'I';
}
/*5*/
.icon-course-5:before {
    content: 'NK';
}

/*6*/
.icon-course-6:before {
    content: 'N';
}

/*7*/
.icon-course-7:before {
    content: 'P';
}

/*8*/
.icon-course-8:before {
    content: 'C';
}

/*9*/
.icon-course-9:before {
    content: 'I';
}

/*10*/
.icon-course-10:before {
    content: 'NK';
}

.home-section-bottom {
    background: #fff;
}

.home-section-bottom .container {
    padding-top: 10px;
    padding-bottom: 20px;
}

@media (min-width: 768px) {
    .home-section-bottom .container {
        padding-top: 80px;
        padding-bottom: 0;
    }
}

.container {
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    overflow: hidden;
    *zoom: 1;
}

@media (min-width: 768px) {
    .container {
        overflow: visible;
        max-width: 1330px;
    }
}

.home-section-bottom .container .items {
    overflow: hidden
}

.home-section-bottom .container .item {
    float: left;
    width: 50%;
    position: relative;
    margin-bottom: 25px;
    padding: 0 5px 0 60px
}

@media (min-width:768px) {
    .home-section-bottom .container .item {
        margin-bottom: 70px;
        padding: 0 35px 0 80px
    }
}

@media (min-width:1024px) {
    .home-section-bottom .container .item {
        width: 20%
    }
}

.home-section-bottom .container .item h2 {
    font-size: 14px;
    color: #0c253d;
    margin-bottom: 10px;
    line-height: 1.2;
    height: 1.2em;
    overflow: hidden
}

@media (min-width:768px) {
    .home-section-bottom .container .item h2 {
        font-size: 20px;
        margin-bottom: 15px
    }
}

.home-section-bottom .container .item h4 {
    font-size: 12px;
    font-weight: 400;
    color: #8f8f8f;
    line-height: 1.1;
    height: 1.1em;
    overflow: hidden
}

@media (min-width:768px) {
    .home-section-bottom .container .item h4 {
        font-size: 14px
    }
}

.home-section-bottom .container .item .item-thumb {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 45px;
    height: 45px;
    line-height: 45px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    font-size: 22px
}

@media (min-width:768px) {
    .home-section-bottom .container .item .item-thumb {
        line-height: 60px;
        width: 60px;
        height: 60px;
        -webkit-border-radius: 6px;
        border-radius: 6px
    }
}

.home-section-bottom .container .item:first-child .item-thumb {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#0075ce),to(#46bbfe));
    background-image: -webkit-linear-gradient(top,#0075ce,#46bbfe);
    background-image: -o-linear-gradient(top,#0075ce 0,#46bbfe 100%);
    background-image: linear-gradient(180deg,#0075ce,#46bbfe);
    background-color: #46bbfe
}

.home-section-bottom .container .item:nth-child(2) .item-thumb {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ff6b01),to(#ffa15f));
    background-image: -webkit-linear-gradient(top,#ff6b01,#ffa15f);
    background-image: -o-linear-gradient(top,#ff6b01 0,#ffa15f 100%);
    background-image: linear-gradient(180deg,#ff6b01,#ffa15f);
    background-color: #ffa15f
}

.home-section-bottom .container .item:nth-child(3) .item-thumb {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#8803ff),to(#c17bff));
    background-image: -webkit-linear-gradient(top,#8803ff,#c17bff);
    background-image: -o-linear-gradient(top,#8803ff 0,#c17bff 100%);
    background-image: linear-gradient(180deg,#8803ff,#c17bff);
    background-color: #8803ff
}

.home-section-bottom .container .item:nth-child(4) .item-thumb {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#676fb6),to(#8d99fd));
    background-image: -webkit-linear-gradient(top,#676fb6,#8d99fd);
    background-image: -o-linear-gradient(top,#676fb6 0,#8d99fd 100%);
    background-image: linear-gradient(180deg,#676fb6,#8d99fd);
    background-color: #676fb6
}

.home-section-bottom .container .item:nth-child(5) .item-thumb {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#ff3600),to(#ff7800));
    background-image: -webkit-linear-gradient(top,#ff3600,#ff7800);
    background-image: -o-linear-gradient(top,#ff3600 0,#ff7800 100%);
    background-image: linear-gradient(180deg,#ff3600,#ff7800);
    background-color: #ff3600
}

.home-section-bottom .container .item:nth-child(6) .item-thumb {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#5e99b7),to(#aed6ea));
    background-image: -webkit-linear-gradient(top,#5e99b7,#aed6ea);
    background-image: -o-linear-gradient(top,#5e99b7 0,#aed6ea 100%);
    background-image: linear-gradient(180deg,#5e99b7,#aed6ea);
    background-color: #5e99b7
}

.home-section-bottom .container .item:nth-child(7) .item-thumb {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#c300e6),to(#ea77ff));
    background-image: -webkit-linear-gradient(top,#c300e6,#ea77ff);
    background-image: -o-linear-gradient(top,#c300e6 0,#ea77ff 100%);
    background-image: linear-gradient(180deg,#c300e6,#ea77ff);
    background-color: #c300e6
}

.home-section-bottom .container .item:nth-child(8) .item-thumb {
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#00cfd3),to(#00e4bb));
    background-image: -webkit-linear-gradient(top,#00cfd3 1%,#00e4bb);
    background-image: -o-linear-gradient(top,#00cfd3 1%,#00e4bb 100%);
    background-image: linear-gradient(180deg,#00cfd3 1%,#00e4bb);
    background-color: #00cfd3
}

.home-section-bottom .container .item:nth-child(9) .item-thumb {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#f708f9),to(#ff26be));
    background-image: -webkit-linear-gradient(top,#f708f9,#ff26be);
    background-image: -o-linear-gradient(top,#f708f9 0,#ff26be 100%);
    background-image: linear-gradient(180deg,#f708f9,#ff26be);
    background-color: #ff26be
}

.home-section-bottom .container .item:nth-child(10) .item-thumb {
    background-image: -webkit-gradient(linear,left top,left bottom,from(#008be5),to(#00dbff));
    background-image: -webkit-linear-gradient(top,#008be5,#00dbff);
    background-image: -o-linear-gradient(top,#008be5 0,#00dbff 100%);
    background-image: linear-gradient(180deg,#008be5,#00dbff);
    background-color: #008be5
}

.home-section-bottom .container .item a:hover h2 {
    color: #3385ff
}

ht代码

 <link href="style.css" rel="stylesheet" type="text/css" /> 
  <div class="home-section-bottom"> 
   <div class="container"> 
    <div class="items"> 
     <div class="item"> 
      <a href="https://www.npc.ink/16669.html/#photoshop" tareget="_blank"><span class="item-thumb"> <i class="icon-course-1"></i> </span><h2>Photoshop</h2><h4>1123870人学习</h4></a> 
     </div> 
     <div class="item"> 
      <a href="https://www.npc.ink/16669.html/#illustrator" tareget="_blank"><span class="item-thumb"> <i class="icon-course-2"></i> </span><h2>Illustrator</h2><h4>6857448人学习</h4></a> 
     </div> 
     <div class="item"> 
      <a href="https://www.npc.ink/16669.html/#aftereffects" tareget="_blank"><span class="item-thumb"> <i class="icon-course-3"></i> </span><h2>After Effects</h2><h4>335569人学习</h4></a> 
     </div> 
     <div class="item"> 
      <a href="https://www.npc.ink/16669.html/#cinema4d" tareget="_blank"><span class="item-thumb"> <i class="icon-course-4"></i> </span><h2>Cinema 4D</h2><h4>2223123人学习</h4></a> 
     </div> 
     <div class="item"> 
      <a href="https://www.npc.ink/16669.html/#draw" tareget="_blank"><span class="item-thumb"> <i class="icon-course-5"></i> </span><h2>手绘插画</h2><h4>987646人学习</h4></a> 
     </div> 
     <div class="item"> 
      <a href="https://www.npc.ink/16669.html/#photography" tareget="_blank"><span class="item-thumb"> <i class="icon-course-6"></i> </span><h2>摄影后期</h2><h4>3467人学习</h4></a> 
     </div> 
     <div class="item"> 
      <a href="https://www.npc.ink/16669.html/#videoedit" tareget="_blank"><span class="item-thumb"> <i class="icon-course-7"></i> </span><h2>视频剪辑</h2><h4>8944人学习</h4></a> 
     </div> 
     <div class="item"> 
      <a href="https://www.npc.ink/16669.html/#buy" tareget="_blank"><span class="item-thumb"> <i class="icon-course-8"></i> </span><h2>买买 - Npcink</h2><h4>432人学习</h4></a> 
     </div> 
     <div class="item"> 
      <a href="https://www.npc.ink/16669.html/#other" tareget="_blank"><span class="item-thumb"> <i class="icon-course-9"></i> </span><h2>其它 - Npcink</h2><h4>49840人学习</h4></a> 
     </div> 
     <div class="item"> 
      <a href="https://www.npc.ink/16669.html/#knowledge" tareget="_blank"><span class="item-thumb"> <i class="icon-course-10"></i> </span><h2>知识树</h2><h4>990848人学习</h4></a> 
     </div> 
    </div> 
   </div> 
  </div>

© 版权声明
文章版权归作者所有，未经允许请勿转载。

相关文章

添加小工具
点此为“正文侧边栏”添加小工具