企业网站设计中常用的样式——四大优势

企业网站模板设计中，常会在首页显示企业的优势模块，本示例采用全屏的方式，拼图格式结合文字和背景图，实现如下效果：

1、规划html布局，（先左右确定整体的框架，再规划右边的四个格子）

<div class="youshi2">
<div class="akmys">
<section><h2>阿科牧机械四大优势</h2><p>时刻关注市场需求,不断开发新的产品,以创新赢得客户。<span>服务客户5000+</span></p>
<p>集产品研发、产品设计、产品制造、售后服务于体的设备制造企业</p><a href="/" target="_blank">立即咨询</a></section></div>
<ul>
<li><section><img src="/skin/html/images/akmys01.png" alt=""><h3>国内三家制造基地</h3><p>在江苏常州、四川成都成立三家制造工厂，可满足不同行业温控设备的定制，方便客户来厂技术交流、验收设备。</p></section></li>
<li><section><img src="/skin/html/images/akmys02.png" alt=""><h3>技术及研发</h3><p>拥有电锅炉、加热及制冷领域十多年技术专业工程师。从方案设计到落地全程—对—服务。</p></section></li>
<li><section><img src="/skin/html/images/akmys03.png" alt=""><h3>十五年温控制造经验</h3><p>按照国家及行业标准严苛工艺把控，采用欧美进口品牌配件。10+安全保护系统，控温精度最高可达±0.1摄氏度。</p></section></li>
<li><section><img src="/skin/html/images/akmys04.png" alt=""><h3>售后服务</h3><p>设备发货前开始响应联系客户指导安装、调试，操作培训；定期回访。</p></section></li>
</ul>
</div>

2、CSS代码

.youshi2 { background: url(../images/014.jpg) no-repeat; background-size: cover; overflow: hidden; color: #fff; }
.youshi2 ul { overflow: hidden; width: 50%; float: right; background: rgba(27,36,43,0.4); }
.akmys {width: 50%;float: left;background:rgba(0,0,0,0.3);background-size: contain;height: 722px;}
.youshi2 ul li { width: 50%; float: left; }
.youshi2 ul li section { padding: 60px; border-left: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2); height: 240px; transition: .5s; }
.youshi2 ul li h3 { font-size: 24px; margin: 20px 0; }
.youshi2 ul li p { font-size: 16px; line-height: 30px; }
.youshi2 ul li:hover section { background: rgba(7, 110, 179,.6); }
.youshi2 ul li img { transition: .5s; }
.youshi2 ul li:hover img { transform: rotateY(180deg) }
.akmys section {padding: 0 15%;margin-top: 15%;}
.akmys h2 { font-size: 36px; margin-bottom: 60px; position: relative; }
.akmys h2:after { content: ""; position: absolute; width: 111px; height: 3px; left: 0; bottom: -25px; background: #fff; }
.akmys p { font-size: 16px; line-height: 30px; }
.akmys a { background: #076eb3; border: 1px solid #076eb3; width: 180px; height: 46px; display: block; text-align: center; line-height: 46px; margin-top: 40px; color: #fff; transition: all .5s ease; }
.akmys a:hover { background-color: rgba(0, 0, 0, 0); border: 1px solid rgba(255, 255, 255, .5); }
.akmys p span { font-weight: bold; color: #e9ae14; font-size: 24px; }

3、涉及到的图片

点击下载