解决方案列表布局
代码语言：html
所属分类：布局界面
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
font-family: "微软雅黑";
box-sizing: border-box;
outline: none
}
:after,:before {
box-sizing: inherit
}
a {
text-decoration: none;
color: inherit
}
ul {
list-style: none
}
.col-sm-4 {
float: left;
position: relative;
width: 33.33333333%
}
.selected-solution {
height: 695px;
background: #f1f3ff
}
.selected-solution>div {
position: relative;
width: 1270px;
margin: 0 auto
}
.selected-solution .swiper-container {
height: 695px;
width: 1200px
}
.selected-solution .layer-title {
color: #393b40;
padding: 50px 0 30px;
text-align: center;
font-size: 30px;
letter-spacing: 1.09px
}
/*主体列表*/
.selected-solution .solution-cardlist {
max-width: 1200px;
margin: 20px auto 0
}
.swiper-slide,.swiper-wrapper {
height: 560px!important
}
.selected-solution .solution-cardlist .col-sm-4 {
padding: 0 10px;
top: 0;
transition: all .15s linear;
box-sizing: border-box
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card {
height: 480px;
background: #fff;
border-radius: 6px;
text-align: left;
overflow: hidden;
transition: all .15s linear
}
.selected-solution .solution-cardlist .col-sm-4:hover {
position: relative;
top: -20px;
transition: all .25s linear
}
.selected-solution .solution-cardlist .col-sm-4:hover .solution-card {
height: 530px;
box-shadow: 0 10px 40px 0 rgba(0,0,0,.1);
transition: all .2s linear
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card img {
width: auto;
height: 200px;
transition: all .2s linear
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card h3 {
margin: 20px 30px 10px;
font-size: 18px;
color: #252b3a;
letter-spacing: .65px;
text-align: left
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card p {
margin: 0 30px;
padding-bottom: 30px;
font-size: 14px;
color: #666a75;
letter-spacing: .51px
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card dl {
margin: 0 30px;
overflow: visible
}
.cf:after,.cf:before {
content: " ";
display: table;
line-height: 0
}
.cf:after {
clear: both
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card dl dt {
margin-bottom: 10px;
font-size: 14px;
color: #252b3a;
letter-spacing: .51px;
line-height: 19px;
position: relative
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card dl dt:before {
position: absolute;
display: inline-block;
left: -8px;
top: 7px;
content: '';
vertical-align: middle;
width: 4px;
height: 4px;
border-radius: 50%;
background: #252b3a
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card dl dd {
float: left;
width: 50%;
margin-bottom: 6px;
font-size: 12px;
color: #a0a2a8;
letter-spacing: .44px;
line-height: 20px
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span {
margin: 20px 30px 0;
font-size: 14px;
display: inline-block;
color: #666a75;
letter-spacing: .51px;
line-height: 22px;
opacity: 0;
transition: opacity .15s linear
}
.selected-solution .solution-cardlist .col-sm-4:hover .solution-card>span {
opacity: 1;
transition: opacity .2s linear 50ms
}
/*了解更多*/
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span a span {
display: inline-block;
vertical-align: middle
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span a span.arrow-f {
width: 13px;
height: 13px;
background: url(../images/marketplace-selected-arrow0.svg);
display: inline-block;
vertical-align: middle;
margin-left: 5px;
position: relative;
transition: .3s ease-out
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span a:hover {
color: #e6c16c
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span a:hover span.arrow-f {
transform: translate(4px,0);
background: url(../images/marketplace-selected-arrow2.svg)
}
/*重置swiper*/
.swiper-container-horizontal>.swiper-pagination-bullets.solution-pagination {
bottom: 15px
}
.solution-pagination .swiper-pagination-bullet {
width: 24px;
height: 4px;
border-radius: 100px;
overflow: hidden;
background: #dfe1f1;
border: none;
cursor: pointer;
content: '';
display: inline-block;
box-sizing: border-box;
opacity: 1;
vertical-align: middle
}
.solution-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background: #f66f6a;
box-sizing: border-box
}
.swiper-container-solution .swiper-button-prev {
left: 0;
width: 14.5px;
height: 30px;
margin-top: 0;
background-size: cover;
transition: background-image .15s
}
.swiper-container-solution .swiper-button-next {
right: 0;
width: 14.5px;
height: 30px;
margin-top: 0;
transform: rotate(180deg);
background-size: cover;
transition: background-image .15s
}
.swiper-container-solution .swiper-button-next:hover,.swiper-container-solution .swiper-button-prev:hover {
transition: background-image .2s
}
</style>
</head>
<body>
<div class="swiper-container-solution">
<div class="selected-solution">
<div>
<div class="swiper-container">
<div class="layer-title">
解决方案
</div>
<div class="solution-cardlist swiper-wrapper">
<div class="col-sm-4 swiper-slide">
<div class="solution-card">
<img src="http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_378,h_200,/quality,q_90" width="100%" />
<h3>智能制造解决方案</h3>
<p>
从研发设计仿真到生产车间现场的全流程数字化、智能化变革，实现敏捷创新、精细化运营。
</p>
<dl class="overflow-hide cf">
<dt>包含产品</dt>
<dd>云设计</dd>
<dd>云仿真</dd>
</dl>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0