前端用户体验小细节

扩大可点击区域

方法一：使用 border/padding 属性扩大可点击区域

.btn {
    border: 20px solid transparent;
    background-clip: padding-box;
}
 
或者
.btn {
   padding: 20px;
}

方法二：使用伪元素扩大可点击区域

.btn {
    position: relative;
}
 
.btn::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px;
}

手机号、数字验证码调用数字键盘

可以方便用户直接在粘贴板确认填充

<input type="number" maxlength="11" placeholder="请填写您的手机号码" />
<input type="number" maxlength="6" placeholder="请填写验证码" />

点击文字就可以勾选复选框

点击事件绑定到li元素上面，不要单独给checkbox绑定事件

<li class="row">
    <checkbox></checkbox>
    <span></span>
</li>

图片加载失败的时候没有默认图

可以借用img标签的onerror事件，img标签支持onerror 事件，在装载文档或图像的过程中如果发生了错误，就会触发onerror事件。可以使用一张提示错误的图片代替显示不了的图片。代码如下：

<img src="images/logo.png" onerror="javascript:this.src='images/logoError.png';">

轮播图鼠标悬浮在上面可以暂停

有时候看有些网站轮播图没有做这个功能，想要仔细看清楚某张图的信息很困难