css布局banner大图与卡片悬浮效果代码-html代码-BFW代码库

css布局banner大图与卡片悬浮效果代码

代码语言：html

代码描述：css布局banner大图与卡片悬浮效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>甜品加盟首页</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.min.css">
<style>
    *{margin: 0;padding: 0;border: 0;list-style: none;text-decoration: none;color: inherit;font-weight: normal;font-family: "微软雅黑";box-sizing: border-box;}
body{min-width: 1440px;}
img{vertical-align: middle;max-width: 100%;}
.red{color: #d80e38;}
.pink{color: #fe8daf;}
.w1200{width: 1200px;height: auto;margin: 0 auto;position: relative;}
/*轮播图*/
.slider{width: 100%;height: auto;overflow: hidden;}
.slider .w1200{position: absolute;top: 0;left: 50%;transform: translateX(-50%);height: 100%;z-index: 3;}
.slider ul li{width: 100%;height: auto;position: relative;}
.slider ul li:after{content: "";display: block;position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
.slider ul li .slider-txt{position: absolute;top: 20%;left: 100px;z-index: 5;color: #FFFF.........完整代码请登录后点击上方下载按钮下载查看