1.实现两条横线中间插文字
<div className={styles.pickPathStart}>
<div className={styles.tip}>PICK A PATH TO START</div>
</div>
.pick-path-start {
width: 678px;
margin: 0 auto;
background-image: linear-gradient(transparent 9px, var-gray-8 10px, transparent 1px);
}
.tip {
color: var-gray-4;
font-size: var-fs-down-1;
width: 184px;
text-align: center;
background-color: var-white;
margin: 0 auto;
letter-spacing: 0.7px;
}
2. 实现网格布局
这里实现的是一个三列平均分布的网格布局,80.7px为每行的高
background-image: repeating-linear-gradient(0deg, var-gray-8 1px,transparent 3px,transparent 80.7px),
repeating-linear-gradient(90deg, var-gray-8 0px,transparent 2px,transparent 33.3%);
所以最终出现的效果,如果要在里面放图片,则需要为每张图片设置固定的高height:80px,宽为width:33.3%
再给个例子
background: repeating-linear-gradient(90deg,rgba(237, 234, 230, 0.9) 1px, transparent 3px,
transparent 50%), repeating-linear-gradient(180deg,rgba(237, 234, 230, 0.9) 1px, transparent 3px,
transparent 112.8px);效果:
3.一个盒子,不需要边框,有立体的效果,给div添加box-shadow
div {
box-shadow:0 1px 8px 0 rgba(0,0,0,0.12);
}
div:hover {
box-shadow:0 1px 4px 0 rgba(0,0,0,0.12);
}
效果图:
4. Solve the issue of image compression
1) use <img/> 图片会形状正常,图片缩放根据图片大小等比例
width: auto; height: auto; max-width: 100%; max-height: 100%;
或者:
width: auto; height: auto; background-size: 100% 100%;
例子:
<div className={styles.cardImageContainer}>
<img data-image-url alt={props.name} src={transform(props.imageUrl, 'rs', 'w', 220)} />
</div>
.card-image-container { top: 0; left: 0; width: 100%; height: 220px; img { margin: auto; top: 0; bottom: 0; height: auto; max-height: 100%; border-top-left-radius: 4px; border-top-right-radius: 4px; } }2)use background-image 这种情况图片会失真,虽然图片形状正常显示,因为最大边会铺满整个盒子,小边根据大边自适应长短,但不会铺满
background-image: url("icon-house.svg"); background-position: center; background-repeat: no-repeat; background-size: contain;
5.由于IE不能兼容position,可以根据margin去调位置
6.IE不能实现....省略(文本隐藏),只能使用line-height 或者 height让其显示多少行
其他浏览器:text-overflow:ellipsis(超出带省略号...)
单行文本:white-space: nowrap
多行文本:-webkit-line-clamp: 2;(显示行数) -webkit-box-orient: vertical;
7.实现按情况添加样式
import classNames from 'classnames/bind'; //动态绑定样式
import styles from './styles.scss';
let cx = classNames.bind(styles);
<div data-add-store-card className={cx('addStoreCard',{
large: props.length == 1,
medium: props.length == 2,
small: props.length > 2,
})}
>
.add-store-card {
height: 251.8px;
min-width: 294px;
&.large, &.medium {
.icon-plus {
display: block;
width: 50px;
height: 50px;
margin: 0 auto 10px;
vertical-align: -4px;
}
}
}
&. 后面跟着的样式名称是和外面那层并排的
<div data-add-store-card="true" class="add-store-card--bf3ff medium--5bce3"></div>
8.字符间的间距大小
letter-spacing: 0.6px; (汉字,英文) word-spacing: 0.6px; (英文)