企业网站设计中常用的样式——四大优势
企业网站模板设计中,常会在首页显示企业的优势模块,本示例采用全屏的方式,拼图格式结合文字和背景图,实现如下效果:
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、涉及到的图片
本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:dacesmiling@qq.com