1.实现省略文本和图片以及按钮的功能
实现:
图片在左,中间的文本过多时会变为省略号,右边是更多按钮
html:
<div class="header-bottom">
<span class="tall"></span><span class="bulletin">非常多的文本</span>
<i class="icon-keyboard_arrow_right"></i>
</div>
css:
.header-bottom {
position: relative;
padding: 0 22px 0 12px;
height: 28px;
font-size: 10px;
line-height: 28px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: rgba(7, 17, 27, .2);
}
.tall {
display: inline-block;
width: 22px;
height: 12px;
background: url('../../assets/img/header-imgs/bulletin');
background-size: 22px 12px;
background-repeat: no-repeat;
vertical-align: middle;
}
.bulletin {
margin: 0 4px;
vertical-align: middle;
}
.icon-keyboard_arrow_right {
position: absolute;
right: 12px;
top: 10px;
font-size: 10px;
}
2. 一像素边框
以scss为例
// 1像素边框
@mixin border-1px($color) {
position: relative;
&::after {
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 0;
border-bottom: 1px solid $color;
content: '';
//随物理像素比例的不同,进行变化,确保是1像素
@media (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}
去掉这个边框
// 去掉1px边框(上面的1px是通过display:block实现的)
@mixin border-none() {
&::after {
display: none;
}
}
3.利用table实现上下居中
想要实现左边这样的每一个li里面的内容,上下居中的效果,可以使用table
HTML:
<ul class="menu">
<li class="menu-item">
<span class="text"> <img scr=""><span class="name"></span>热销榜</span>
</li>
<li class="menu-item">
<span class="text"> <img scr=""><span class="name"></span>热销榜</span>
</li>
</ul>
css:
.menu-item {
display: table;
height: 54px;
width: 56px;
padding: 0 12px;
}
.text {
display: table-cell;
vertical-align: middle;
border: 1px solid rgb(7, 17, 27);
}
3.购物车图标
HTML:
<div class="cart-wrapper">
<div class="cart">
<i class="icon-shopping_cart"></i>
</div>
</div>
css:
.cart-wrapper {
display: inline-block;
position: relative;
top: -10px;
margin: 0 12px 2px;
padding: 6px;
height: 56px;
width: 56px;
z-index: 100;
box-sizing: border-box;
border-radius: 50%;
background: #141d27;
}
.cart {
width: 100%;
height: 100%;
text-align: center;
line-height: 48px;
border-radius: 50%;
background: #2b333b;
}
.icon-shopping_cart {
font-size: 24px;
color: rgba(255, 255, 255, .4);
}
4.清除浮动
.clearfix{
display: inline-block;
}
.clearfic::after {
display: block;
content: "";
height: 0;
width: 0;
visibility: hidden;
clear: both;
}
5.实现图片宽度撑满盒的正方形
实现:
实现图片宽度撑满盒,宽高一致
HTML:
<div class="img-header">
<img :src="image">
</div>
css:
.img-header {
position: relative;
height: 0;
width: 100%;
padding-top: 100%;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}