css 优惠券兼容ie8版本
时间:2019-01-18
本文章向大家介绍css 优惠券兼容ie8版本,主要包括css 优惠券兼容ie8版本使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<style type="text/css" >
.couponMain{width: 1670px;height: 2000px;background: #FE4227;}
.couponContent{width: 700px; margin:0 auto;height:auto;}
.lottery{width: 100%;min-height: 170px;background: #D93821;border-radius: 10px;color: #555; padding: 20px 0;}
.lottery_num{width: 85%;margin:5px auto;height: 130px;background: #FFF;border-radius: 4px;}
.lottery_structure{position: relative;}
.lottery_structure::after{display: block;content:'';clear:both;}
.lottery_structure_price{font-size: 14px;border-right: 2px #888 dashed;}
.lottery_structure_price,.lottery_structure_info{text-align: center;width: 30%;float: left;height: 130px;display:table;}
.lottery_structure_info{width: 67.5%;text-align:left; }
.lottery_structure_info ul {font-size:14px;}
.lottery_structure_info ul li{font-size:14px;}
.lottery_structure_info ul li span{font-size:25px;height: 18px;display: inline-block;overflow: hidden;padding-right: 8px; }
.lottery_structure_info p strong{font-size:17px;}
.price_em{color: #FF2002;}
.price_em_yenIcon{font-size: 25px;}
.price_em_price{font-size: 40px;color:;}
.lottery_structure_cell{padding: 10px 0}
.lottery_structure_price_middle{display:table-cell; vertical-align:middle;}
.lottery_structure_info .lottery_structure_price_middle{line-height: 25px;padding-left:7%}
.radius_top{position: relative;overflow: hidden;width: 22px;height: 20px;background: transparent;display: inline-block;top:-2px;left: -370px;}
.radius_top:before, .radius_top:after { content: ' ';width: 0;height: 100%;position: absolute;top: -7px;}
.radius_top:after {border-right: 20px dotted #D93821; right: 1px;}
.radius_bottom{position: relative;overflow: hidden;width: 22px;height: 20px;background: transparent;display: inline-block;top:90px;left: -370px;}
.radius_bottom:before, .radius_bottom:after { content: ' ';width: 0;height: 100%;position: absolute;top: 3px;}
.radius_bottom:after {border-right: 20px dotted #D93821; right: 1px;}
.radius_top1{position: relative;overflow: hidden;width: 22px;height: 20px;background: transparent;display: inline-block;top:-2px;left: -370px;}
.radius_top1:before, .radius_top1:after { content: ' ';width: 0;height: 100%;position: absolute;top: -7px;}
.radius_top1:after {border: 21px dotted #D93821; right: 1px;}
.radius_bottom1{position: relative;overflow: hidden;width: 22px;height: 20px;background: transparent;display: inline-block;top:90px;left: -370px;}
.radius_bottom1:before, .radius_bottom1:after { content: ' ';width: 0;height: 100%;position: absolute;top: 3px;}
.radius_bottom1:after {border: 21px dotted #D93821; right: 1px;}
.sawtooth {
/* 相对定位,方便让before和after伪元素绝对定位偏移 */
position: relative;
/* 把超出div的部分隐藏起来 */
overflow: hidden;
height: 130px;
width: 1.3%;
float: left;
background: #FCBF00;
border-radius: 4px 0px 0 4px;
}
.sawtooth:before, .sawtooth:after {
content: ' ';
width: 0;
height: 100%;
/* 绝对定位进行偏移 */
position: absolute;
top: 5px;
}
/*.sawtooth:before {
border-right: 10px dotted white;
left: -5px;
}*/
.sawtooth:after {
/* 圆点型的border */
border-left: 5px dotted white;
/* 偏移一个半径,让圆点的一半覆盖div */
right: -2px;
}
.couponContent .overflow {
width: 322px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
vertical-align: bottom;
}
.radius_border{width: 22px;}
</style>
<div class="couponMain">
<img src="<?php echo SHOP_TEMPLATES_URL;?>/images/coupon/PC/huodong.png" alt="" >
<div class="couponContent">
<div class="lottery">
<div class="lottery_structure_cell">
<div class="lottery_num">
<div class="lottery_structure">
<div class="sawtooth"></div>
<div class="lottery_structure_price">
<div class="lottery_structure_price_middle">
<p class="price_em"><span class="price_em_yenIcon">¥</span><span class="price_em_price">50</span></p>
<p>满100可用</p>
</div>
</div>
<div class="lottery_structure_info">
<div class="lottery_structure_price_middle">
<p><strong>通用优惠券</strong></p>
<ul>
<li><font class="overflow" ><span>·</span>满100可用</font></li>
<li><span>·</span>优惠券数量:100张</li>
<li><span>·</span>2018-11-11至2018-11-12</li>
</ul>
</div>
<div class="radius_border">
<span class="radius_top"></span>
<span class="radius_bottom"></span>
</div>
</div>
</div>
</div>
</div>
<div class="lottery_structure_cell">
<div class="lottery_num">
<div class="lottery_structure">
<div class="sawtooth"></div>
<div class="lottery_structure_price">
<div class="lottery_structure_price_middle">
<p class="price_em"><span class="price_em_yenIcon">¥</span><span class="price_em_price">50</span></p>
<p>满100可用</p>
</div>
</div>
<div class="lottery_structure_info">
<div class="lottery_structure_price_middle">
<p><strong>通用优惠券</strong></p>
<ul>
<li><font ><span>·</span>满100可用</font></li>
<li><span>·</span>优惠券数量:100张</li>
<li><span>·</span>2018-11-11至2018-11-12</li>
</ul>
</div>
<div class="radius_border">
<span class="radius_top"></span>
<span class="radius_bottom"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" >
$(function(){
var browser=navigator.appName
var b_version=navigator.appVersion
var version=b_version.split(";");
var trim_Version=version[1].replace(/[ ]/g,"");
if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0")
{
$(".radius_top").addClass("radius_top1").removeClass('radius_top');
$(".radius_bottom").addClass("radius_bottom1").removeClass('radius_bottom');
}
})
</script>
<script type="text/javascript">
</script>
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例