网络基础知识

网页HTML中发展历程CSS样式特效

今天在看一个网站的时候,感觉有一个关于发展历程的前端样式还可以,方便自己后期使用,在这里整理收集一下,以备后用;

发展历程展示样式如下

前端HTML文件

<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>

前端CSS样式文件

.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;
}

样式对应的一张图片如下:

2021100919480231

(0)
【友情提示:】
1、[焦点热议]及其子栏目内容为网络转载,其它栏目内容系作者个人原创文章观点,不代表除作者外的任何第三方观点赞同或支持;
2、「♚付涛纪实阁♚」原创文章均为本人工作、学习过程中重点事项点的记录,便于日后面对相同问题时候的复盘总结,同时原创内容遵循创作共用版权 CC 4.0 BY-SA 协议,转载请附上原文出处链接及声明,否则默认视为侵权。
3、如本站个人观点有涉及不妥的地方,可联系【QQ:860227477】,提供合理合法依据,可无偿给予修改或删除。
4、同时针对站内所有来自于【精品软件共享】及其子栏目所分享的软件均为网络收集,请用户下载后24小时内删除,否则引起的争议由使用者承担,与本站无关;
5、针对本站内容若有异义,亦可直接与【法律顾问:易兴俊,律师联系电话:13825799821】直接联系沟通;
LensNews

抱歉,评论已关闭!