在电商直播源码开发的过程中，总有一些样式需要实现，接下来我们一起看看吧。

1、第一种：小三角样式的实现

/* 样式 */
.arrow{
    position:absolute;   /* 将小箭头定位到你需要的位置 */
    top:0;
    left:0;
    border: 10px solid transparent;
    /* 注意：下面的几个方向中只能选择其一 */
    border-bottom-color: #ffffff;    /* 向上 */
    border-top-color: #ffffff;    /* 向下 */
    border-left-color: #ffffff;    /* 向右 */
    border-right-color: #ffffff;   /* 向左  */
}
/* 结构 */
<span class="arrow"></span>

效果图如下：
在这里插入图片描述

2、单行文本过多时超出部分省略号表示

/* 样式 */
.ell{
	border: 1px solid #000;
	width: 150px;
	/* 规定是否换行 */
	white-space: nowrap;
	/* 超出隐藏 */
	overflow: hidden;
	/* 超出部分用省略号代替 */
	text-overflow: ellipsis;
}
/* 结构 */
<!-- 省略号的实现 -->
<p class="ell">H5标签：突出的是语义在需要突出显示文本时使用标签</p>

效果图如下：
在这里插入图片描述

3、多行文本超出后用省略号代替

/* 样式处理 */
.box{
	width: 200px;
	height: 65px;
	border: 1px solid red;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
<!-- 结构 -->
<div class="box" style="">
	因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
	因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
</div>

使用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
扩展资料：
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

参考资料：百度百科–text-overflow
效果如下：

在这里插入图片描述
4、响应式网站注意事项

1）宽高、边距要用百分比或者 rem （注意：rem是参考的html 的 font-size 属性）为单位，电商直播源码不能写固定大小

2）字体单位一定要用 rem ，不能使用 px 或 em

5、蒙层的实现

.mask{
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background:rgba(0,0,0,0.3);
}

6、。。。。。。

补充：清楚浏览器或标签的自带样式文件 reset.css

html,body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,em,textarea,p,th,td{margin:0px;padding:0px;}
/*
去除图片底部间隙
*/
img{vertical-align: middle;}
li{list-style-type: none;}
a{text-decoration: none;}
a:link {color:#ffffff;text-decoration:none;}
a:visited {color:#ffffff;text-decoration:none;}
a:hover {color:#666;text-decoration:underline;}
a:active {color:#ffffff;text-decoration:none;}
/* 清楚浮动造成的影响 */
.clearfix:after{overflow:hidden;clear:both;display:block;height:0;content:"\20"}
/*它就是空格，*/
.clearfix{*zoom:1;}    /*解决ie比版本( < 7 )兼容性问题*/
.clear {clear:both;width:0;height:0;overflow:hidden;line-height:0;}
.clearBoth{clear:both;}
.fl {float:left;}
.fr {float:right;}
.ellipsis{        /* 文本末尾省略号 */
	border: 1px solid #000;
	width: 150px;
	/* 规定是否换行 */
	white-space: nowrap;
	/* 超出隐藏 */
	overflow: hidden;
	/* 超出部分用省略号代替 */
	text-overflow: ellipsis;
}
body{
    /* 12px/1.5指字体大小12px，1.5倍的行高 */
    font: 12px/1.5 '微软雅黑', '宋体', STHeiTi,Arial, Helvetica, sans-serif;
    color: #333;
}

以上就是电商直播源码实现特殊样式的方式了。
声明：本文由云豹科技转发自zlq_csdn博客，如有侵权请联系作者删除

ITPub博客

一些电商直播源码开发页面布局图书样式的实现

最新文章