wap中，如果是不需要隐藏的导航，而且不需要在其内部使用滚轮，那可以直接使用css3属性代替js
.sticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky;
top: 15px; /* 和relative一样的用法 */
}
网站上很多使用 new 标识，有切图的有 coding 的，不建议切图，使用下面的写法在黑背景下能有比较好的效果：
a:after {
position: absolute;
margin-left: 2px;
margin-top: -3px;
content: 'NEW';
color: #e56a69;
white-space: nowrap; /* 不让其换行 */
-webkit-transform: scale(.6);
transform: scale(.6);
font-weight: 700;
font-size: 14px;
-webkit-transform-origin: 0 0;
transform-origin: 0 0; /* 缩放后回归起点位置 */
}
均分父元素宽度的几种方法
- 百分数width
- box-flex
.test {
display: list-item;
-webkit-box-flex: 1;
width: auto;
}
- flex-grow
.father {
display: -webkit-flex;
display: flex;
}
.child {
flex-grow: 1;
}
-
如果是下面这种首尾都有元素怎么办？
image
很简单，将前面那个搅屎的子元素踢出去就行，其余元素均分宽度：
.father {
margin-left: 35px; /* 腾出空间 */
}
.child:first-child {
margin-left: -35px; /* 第一个子元素归位 */
}
.child {
width: 25%; /* 用上面你喜欢的方法均分宽度 */
}
- 用rem写的宽度，但是还要求居中，即复杂场景，需要在草纸上计算下，可以参考造作的会员邀请web页进度条写法
image
会员邀请页
