<div class="ai-learning-section">
<div class="home-section-bottom">
<div class="container">
<div class="items">
<div class="item">
<a href="https://xaiao.com/category/hh/midjourney/#photoshop" target="_blank"><span class="item-thumb"> <i class="icon-course-1"></i> </span><h2>midjourney</h2><h4>1123870人学习</h4></a>
</div>
<div class="item">
<a href="https://xaiao.com/category/hh/uncategorized/#illustrator" target="_blank"><span class="item-thumb"> <i class="icon-course-2"></i> </span><h2>StableDiffusion</h2><h4>6857448人学习</h4></a>
</div>
<div class="item">
<a href="https://xaiao.com/category/gaomi/#aftereffects" target="_blank"><span class="item-thumb"> <i class="icon-course-3"></i> </span><h2>AI稿米教学</h2><h4>335569人学习</h4></a>
</div>
<div class="item">
<a href="https://xaiao.com/category/aigc%e5%bc%80%e6%ba%90%e9%a1%b9%e7%9b%ae/#cinema4d" target="_blank"><span class="item-thumb"> <i class="icon-course-4"></i> </span><h2>AI开源项目合集</h2><h4>2223123人学习</h4></a>
</div>
<div class="item">
<a href="https://xaiao.com/category/chatgpt/#draw" target="_blank"><span class="item-thumb"> <i class="icon-course-5"></i> </span><h2>GTP学习使用</h2><h4>987646人学习</h4></a>
</div>
<div class="item">
<a href="https://xaiao.com/c/#photography" target="_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://xaiao.com/ranklist/#videoedit" target="_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://xaiao.com/shop/#buy" target="_blank"><span class="item-thumb"> <i class="icon-course-8"></i> </span><h2>知识付费</h2><h4>432人学习</h4></a>
</div>
<div class="item">
<a href="https://xaiao.com/category/gj/#other" target="_blank"><span class="item-thumb"> <i class="icon-course-9"></i> </span><h2>AI工具导航</h2><h4>49840人学习</h4></a>
</div>
<div class="item">
<a href="https://xaiao.com/%e7%95%99%e8%a8%80%e7%89%88/#knowledge" target="_blank"><span class="item-thumb"> <i class="icon-course-10"></i> </span><h2>留言板</h2><h4>990848人学习</h4></a>
</div>
</div>
</div>
</div>
</div>css
/*学习模块*/
/* 添加一个新的包装类 */
.ai-learning-section {
/* 可以在这里添加一些基础样式 */
}
/* 修改所有选择器，使其更具体 */
.ai-learning-section [class^="icon-"]:before,
.ai-learning-section [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin: 0 0.2em;
text-align: center;
opacity: 0.8;
font-variant: normal;
text-transform: none;
line-height: 1em;
font-size: 120%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
}
/* 图标内容 */
.ai-learning-section .icon-course-1:before { content: 'N'; }
.ai-learning-section .icon-course-2:before { content: 'P'; }
.ai-learning-section .icon-course-3:before { content: 'C'; }
.ai-learning-section .icon-course-4:before { content: 'I'; }
.ai-learning-section .icon-course-5:before,
.ai-learning-section .icon-course-10:before { content: 'K'; }
.ai-learning-section .icon-course-6:before { content: 'N'; }
.ai-learning-section .icon-course-7:before { content: 'P'; }
.ai-learning-section .icon-course-8:before { content: 'C'; }
.ai-learning-section .icon-course-9:before { content: 'I'; }
/* 主要样式 */
.ai-learning-section .home-section-bottom {
background: #fff;
}
.ai-learning-section .container {
width: 100%;
margin: 0 auto;
padding: 0 15px;
position: relative;
overflow: hidden;
*zoom: 1;
}
.ai-learning-section .home-section-bottom .container {
padding-top: 20px;
padding-bottom: 0px;
}
@media (min-width: 768px) {
.ai-learning-section .container {
overflow: visible;
max-width: 1330px;
}
.ai-learning-section .home-section-bottom .container {
padding-top: 80px;
padding-bottom: 0;
}
}
.ai-learning-section .home-section-bottom .container .items {
display: flex;
flex-wrap: wrap;
}
.ai-learning-section .home-section-bottom .container .item {
width: 50%;
position: relative;
margin-bottom: 25px;
padding: 0 5px 0 60px;
}
@media (min-width: 768px) {
.ai-learning-section .home-section-bottom .container .item {
margin-bottom: 70px;
padding: 0 35px 0 80px;
}
}
@media (min-width: 1024px) {
.ai-learning-section .home-section-bottom .container .item {
width: 20%;
}
}
.ai-learning-section .home-section-bottom .container .item h2 {
font-size: 14px;
color: #0c253d;
margin-bottom: 10px;
line-height: 1.2;
height: 1.2em;
overflow: hidden;
}
.ai-learning-section .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) {
.ai-learning-section .home-section-bottom .container .item h2 {
font-size: 20px;
margin-bottom: 15px;
}
.ai-learning-section .home-section-bottom .container .item h4 {
font-size: 14px;
}
}
.ai-learning-section .home-section-bottom .container .item .item-thumb {
position: absolute;
left: 0;
top: 0;
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 4px;
color: #fff;
text-align: center;
font-size: 22px;
}
@media (min-width: 768px) {
.ai-learning-section .home-section-bottom .container .item .item-thumb {
line-height: 60px;
width: 60px;
height: 60px;
border-radius: 6px;
}
}
/* 缩略图背景 */
.ai-learning-section .home-section-bottom .container .item:nth-child(1) .item-thumb { background-image: linear-gradient(180deg, #0075ce, #46bbfe); }
.ai-learning-section .home-section-bottom .container .item:nth-child(2) .item-thumb { background-image: linear-gradient(180deg, #ff6b01, #ffa15f); }
.ai-learning-section .home-section-bottom .container .item:nth-child(3) .item-thumb { background-image: linear-gradient(180deg, #8803ff, #c17bff); }
.ai-learning-section .home-section-bottom .container .item:nth-child(4) .item-thumb { background-image: linear-gradient(180deg, #676fb6, #8d99fd); }
.ai-learning-section .home-section-bottom .container .item:nth-child(5) .item-thumb { background-image: linear-gradient(180deg, #ff3600, #ff7800); }
.ai-learning-section .home-section-bottom .container .item:nth-child(6) .item-thumb { background-image: linear-gradient(180deg, #5e99b7, #aed6ea); }
.ai-learning-section .home-section-bottom .container .item:nth-child(7) .item-thumb { background-image: linear-gradient(180deg, #c300e6, #ea77ff); }
.ai-learning-section .home-section-bottom .container .item:nth-child(8) .item-thumb { background-image: linear-gradient(180deg, #00cfd3 1%, #00e4bb); }
.ai-learning-section .home-section-bottom .container .item:nth-child(9) .item-thumb { background-image: linear-gradient(180deg, #f708f9, #ff26be); }
.ai-learning-section .home-section-bottom .container .item:nth-child(10) .item-thumb { background-image: linear-gradient(180deg, #008be5, #00dbff); }
.ai-learning-section .home-section-bottom .container .item a:hover h2 {
color: #3385ff;
}
/* 基础训练营样式 */
/* 基础训练营样式 */
/* 基础训练营样式 */
.knowledge-section {
/* 这里可以添加一些基础样式 */
}
@charset "utf-8";
/* 基础容器样式 */
.knowledge-section .container {
width: 100%;
max-width: 1330px;
margin: 0 auto;
padding: 0 15px;
position: relative;
}
/* 图标样式 */
.knowledge-section .icon-play-1:before {
content: '☛';
}
/* 热门知识部分样式 */
.knowledge-section .part-hot-knowledge .part-title {
font-size: 20px;
color: #3c3c3c;
margin: 0 -15px;
font-weight: 400;
background: #f5f9fc;
padding: 15px;
}
.knowledge-section .part-hot-knowledge .part-content {
margin: 0 0 30px;
}
/* 文章列表样式 */
.knowledge-section .articles_knowledge {
margin: 0 -14px;
overflow: hidden;
}
.knowledge-section .articles_knowledge .item_wrap {
float: left;
width: 100%;
padding: 25px 14px 15px;
}
.knowledge-section .articles_knowledge .item {
background: #fff;
padding: 15px;
border-radius: 20px;
transition: all 0.2s;
min-height: 145px;
}
.knowledge-section .articles_knowledge .item:hover {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
transform: translateY(-3px);
}
/* 文章主体样式 */
.knowledge-section .articles_knowledge .item-main {
position: relative;
padding-right: 126px;
}
.knowledge-section .articles_knowledge .item-main .item-thumb {
position: absolute;
right: 0;
top: 0;
width: 110px;
}
.knowledge-section .articles_knowledge .item-main .item-thumb .item-href {
display: block;
border-radius: 20px;
}
.knowledge-section .articles_knowledge .item-main .item-thumb .thumb {
padding-top: 130%;
border-radius: 6px;
background-size: contain;
}
.knowledge-section .articles_knowledge .item-main h2 {
font-size: 14px;
line-height: 1.5;
height: 3em;
overflow: hidden;
margin-bottom: 5px;
font-weight: 400;
color: #2c3e50;
}
.knowledge-section .articles_knowledge .item-main h2 a {
color: #2c3e50;
}
.knowledge-section .articles_knowledge .item-main h2 a:hover {
color: #3385ff;
}
/* 列表样式 */
.knowledge-section .articles_knowledge .item-main ul li {
display: block;
padding: 5px;
overflow: hidden;
font-size: 12px;
}
.knowledge-section .articles_knowledge .item-main ul li:nth-child(odd) {
background: hsla(0, 0%, 84.7%, 0.16);
}
.knowledge-section .articles_knowledge .item-main ul li a {
position: relative;
display: block;
height: 22px;
line-height: 22px;
overflow: hidden;
color: #7c808a;
}
.knowledge-section .articles_knowledge .item-main ul li a:hover {
color: #3385ff;
}
/* 附加信息样式 */
.knowledge-section .articles_knowledge h4 {
font-size: 12px;
line-height: 24px;
font-weight: 400;
color: #bdbdbd;
overflow: hidden;
height: 24px;
display: none;
}
.knowledge-section .articles_knowledge h4 a {
color: #bdbdbd;
}
.knowledge-section .articles_knowledge h4 a:hover {
color: #3385ff;
}
.knowledge-section .articles_knowledge h4 span {
float: left;
margin-right: 40px;
}
.knowledge-section .articles_knowledge .avatar {
width: 24px;
height: 24px;
border-radius: 100%;
padding: 0;
display: inline-block;
vertical-align: top;
}
/* 通用缩略图样式 */
.knowledge-section .thumb {
display: block;
width: 100%;
height: 0;
padding-top: 66.7%;
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
background-color: transparent;
position: relative;
overflow: hidden;
}
/* 按钮样式 */
.knowledge-section .section-more {
text-align: center;
margin-bottom: 30px;
}
.knowledge-section .section-more .btn {
display: block;
text-align: center;
background: #f7f7f7;
border-radius: 3px;
color: #9e9e9e;
height: 50px;
line-height: 50px;
padding: 0 50px;
white-space: nowrap;
}
/* 响应式布局 */
@media (min-width: 768px) {
.knowledge-section .home-section-knowledge {
padding: 0px 0;
}
.knowledge-section .container {
overflow: visible;
}
.knowledge-section .part-hot-knowledge .part-title {
font-size: 30px;
background: transparent;
margin: 0 0 30px;
padding: 0;
}
.knowledge-section .part-hot-knowledge .part-content {
margin: 0;
}
.knowledge-section .articles_knowledge .item {
padding: 30px 40px;
}
.knowledge-section .articles_knowledge .item-main {
height: 210px;
padding-right: 246px;
margin-bottom: 30px;
}
.knowledge-section .articles_knowledge .item-main .item-thumb {
top: -50px;
width: 200px;
}
.knowledge-section .articles_knowledge .item-main h2 {
font-size: 18px;
margin-bottom: 20px;
}
.knowledge-section .articles_knowledge .item-main ul li {
padding: 10px;
font-size: 14px;
border-radius: 20px;
}
.knowledge-section .articles_knowledge h4 {
display: block;
}
.knowledge-section .section-more {
margin-bottom: 0;
}
.knowledge-section .section-more .btn {
background-color: #3385ff;
background-image: linear-gradient(90deg, #006eff, #13adff);
box-shadow: 0 5px 10px 0 rgba(16, 110, 253, 0.3);
border-radius: 20px;
color: #fff;
display: inline-block;
font-size: 16px;
}
.knowledge-section .section-more .btn:hover {
background-image: linear-gradient(270deg, #006eff, #13adff);
}
}
@media (min-width: 1024px) {
.knowledge-section .articles_knowledge .item_wrap {
width: 50%;
margin-bottom: 30px;
}
}
温馨提示：