实现一排图片只显示一张图的文字介绍

最新推荐文章于 2023-04-06 09:44:08 发布

原创最新推荐文章于 2023-04-06 09:44:08 发布 · 610 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #图片文字介绍的显示

本文分享了多位完成Java培训课程的学员成功就业的故事，包括他们的班级、学历背景、就业岗位、就业单位及薪资等详细信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>

<style>

html,input,button{

color: #555;
background: #fff;
font-family:"microsoft yahei";
}
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,images,span,i,a,em,strong,b,input,textarea,form,a,td,th{ margin:0; padding:0; }
body{margin:0 auto;width:100%;max-width:1920px;min-width:1080px;overflow-x:hidden;color:#313131;font-size: 14px;}
img{vertical-align: middle;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;color:#333;outline:none;}
li{list-style: none;}
.fl{float:left;}
.fr{float:right;}
.clear{clear:both; line-height:none;}

.fn-clear:after {display:block;clear:both; content:" ";font-size:0px;height:0px; visibility:hidden;}

.mstu {width:1008px;margin:0 auto 55px;}
.mstu ul li{float:left;width:139px;margin-left: 5px;}
.mstu ul li.desc{width:0px;background:#1ee1e1;color:#fff;height:255px;overflow:hidden;margin-left: 0px;}
.mstu ul li.desc p span{font-size: 18px;font-weight: bold;color:#fff;}
.mstu ul li.desc p{line-height: 24px;padding:20px 0 0 12px;font-size: 14px;}

</style>

<ul class="fn-clear">
<li class="stuimg"><img src="https://img-blog.youkuaiyun.com/2018033012121918" alt="" /></li>
<li class="desc" style="width:139px;margin-left:5px;">张*同学 
班级：T28班 学历：本科 就业岗位：Java 工程师 就业单位：金*软件有限公司 薪资：6500</li>
<li class="stuimg"><img src="https://img-blog.youkuaiyun.com/2018033012121918" alt="" /></li>
<li class="desc">贺*华 
班级：T68班 学历：大专 就业岗位：Java 工程师 就业单位：华*金融租赁股份有限公司 薪资：5500</li>
<li class="stuimg"><img src="https://img-blog.youkuaiyun.com/2018033012121918" alt="" /></li>
<li class="desc">周*坤 
班级：T28班 学历：本科 就业岗位：Java 工程师 就业单位：易*博有限公司 薪资：6000</li>
<li class="stuimg"><img src="https://img-blog.youkuaiyun.com/2018033012121918" alt="" /></li>
<li class="desc">聂*同学 
班级：JT-47班 学历：本科 就业岗位：Java 工程师 就业单位：深圳市*保软件有限公司 薪资：11000</li>
<li class="stuimg"><img src="https://img-blog.youkuaiyun.com/2018033012121918" alt="" /></li>
<li class="desc">黄*明 
班级：T103班 学历：高中 就业岗位：Java 工程师 就业单位：深圳市*网信通科技有限公司 薪资：6000</li>
<li class="stuimg"><img src="https://img-blog.youkuaiyun.com/2018033012121918" alt="" /></li>
<li class="desc">陈*明 
班级：T92班 学历：高中 就业岗位：Java 工程师 就业单位：卓*科技有限公司 薪资：9000+</li>

</ul>

</div>