HTML+CSS页面练习——legend第五部分
第五部分——Service
简要介绍:
页面效果:
HTML代码:
<section id="services">
<div class="container">
<div class="align"><i class="icon-cog-circled"></i></div>
<h1>Services</h1>
<div class="row">
<div class="span3">
<div class="align"><i class="icon-desktop sev_icon"></i></div>
<h2>Web design</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="span3">
<div class="align"><i class="icon-vector sev_icon"></i></div>
<h2>Print Design</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="span3">
<div class="align"><i class="icon-basket sev_icon"></i></div>
<h2>Ecommerce</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
<div class="span3">
<div class="align"><i class="icon-mobile-1 sev_icon"></i></div>
<h2>Marketing</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</div>
</div>
</div>
</section>
CSS代码:
#services{
padding: 50px 70px;
margin-top:0px;
margin-bottom: 50px;
}
#services .span3{
background:#e9e9e9;
padding: 3px 0 15px 10px;
transition: all 0.3s ease-in-out;
width: 22%;
display: inline-block;
margin: 9px;
}
#services .span3:hover{
background: #e3e3e3;
box-shadow: 1px 1px 6px #c1bac1;
}
#services h1{
font-size: 3em;
margin:0em 0 0.7em 0;
font-family: 'Patua One',cursive;
text-align: center;
}
#services h2{
font-size: 22px;
font-family: 'Patua One',cursive;
font-weight: lighter;
margin: 0;
padding: 0;
text-align: center;
}
#services p{
margin: 10px;
float: left;
line-height: 25px;
}
#services .align{
font-size: 6em;
text-align: center;
padding: 0;
}
#services .align .sev_icon{
text-align: center;
margin: 10px 0 20px 0;
font-size: 0.6em;
color: #F0BF00;
}
分类:
HTML+CSS页面练习
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥