今天在看一个网站的时候,感觉有一个关于发展历程的前端样式还可以,方便自己后期使用,在这里整理收集一下,以备后用;
<div class="lc_list"> <ul> <li class="frt"> <div class="web"> <h3><span></span>2013年</h3> <p>创始人在学校做人力代理,为自己在大学期间收获了人生中的第一桶金。</p> </div> </li> <li class="flt"> <div class="web"> <h3><span></span>2017年</h3> <p>毕业后前往沿海城市人力行业的企业就职,从此正式进入人力资源服务行业。</p> </div> </li> <li class="frt"> <div class="web"> <h3><span></span>2018年</h3> <p>创建了贵州蓝鲸人力,开启了人生的创业之路。</p> </div> </li> <li class="flt"> <div class="web"> <h3><span></span>2020年</h3> <p>受疫情影响公司业务运作起起伏伏,于是决定暂时修养声息,养精蓄锐,总结经验,为之后整装重新起航做准备。于同年,重新创建贵州旭历人力资源服务有限公司,以崭新的状态和饱满的精神重新进入市场。</p> </div> </li> <li class="frt"> <div class="web"> <h3><span></span>2021年</h3> <p>规范公司管理,丰富员工文化,优化公司业务,不断寻找与公司价值观匹配的优秀人才,致力打造一批专业优秀的公司队伍,带着员工不断发展。秉承“在其位-专业做事,对客户-用心服务,对团队-责任担当”的核心价值观,帮助更多的求职者就业,帮助企业解决核心问题。</p> </div> </li> <li class="flt"> <div class="web"> <h3><span></span>2022年</h3> <p>展望未来,未来可期,我们将是最亮的那颗星!</p> </div> </li> </ul> <div class="clear"></div> </div>
.lc_list { padding: 0 10% 65px; background: url(../images/icon20.png) repeat-y center top; margin-top: 65px; } .lc_list ul li { width: 50%; position: relative; clear: both; } .lc_list ul li.frt .web { padding-left: 55px; } .lc_list ul li.flt .web { padding-right: 55px; } .lc_list ul li h3 { font-size: 16px; color: #000; } .lc_list ul li.frt h3 { } .lc_list ul li.flt h3 { text-align: right; } .lc_list ul li h3 span { display: block; width: 16px; height: 17px; background: url(../images/icon19.png) no-repeat center center; position: absolute; top: 0; } .lc_list ul li.frt h3 span { left: -8px; } .lc_list ul li.flt h3 span { right: -8px; } .lc_list ul li p { font-size: 14px; line-height: 24px; color: #282828; height: 48px; margin-top: 10px; }
样式对应的一张图片如下: