css+div布局实现优惠券代金券列表效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div布局实现优惠券代金券列表效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>优惠券</title>
<style>
@charset "utf-8";* {
margin: 0;
padding: 0;
color: #000;
}
html {
font-size: 62.5%
}
body {
font: 1.2em/1.8em "hiragino sans gb","Helvetica Neue",Helvetica,STHeiTi;
background: #f8f8f8;
}
a {
text-decoration: none;
color: #000;
}
li {
list-style: none
}
.fl {
float: left;
}
.fr {
float: right;
}
.hide {
display: none;
}
.title {
font-size: 1.2em;
line-height: 3.6em;
text-align: center;
background: #fff;
font-weight: bold;
}
.box-group {
padding: 0 1.2em;
}
.box-group .item-group {
margin-top: 1.4em;
background: #fff;
border-radius: 0.4em;
display: flex;
position: relative;
box-shadow: 2px 2px 5px #999;
overflow: hidden;
}
.box-group .item-group .item-left {
width: 6em;
box-sizing: border-box;
padding: 1em 0 1em 10px;
text-align: center;
border-right: 0.1em dashed #d8dde1;
position: relative;
}
.left-gb {
position: absolute;
left: 0;
top: 0;
width: 1em;
height: 100%;
background: #ff950b;
background-image: radial-gradient(#fff 25%,#fff 40%,#ff950b 45%);
background-size: 10px 10px;
background-repeat: repeat-y;
background-position: 300% 1%;
}
.left-defect {
width: 1em;
height: 1em;
border-radius: 50%;
background: #d8dde1;
position: absolute;
right: -0.6em;
top: -0.5em;
}
.left-defect-2 {
bottom: -0.5em;
t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0