记录一下前端开发过程中遇到的一些小问题以及解决方法。
目录
最近更新
2018/08/11：a标签的四个伪类定义顺序
示例：css
a:link {
color: white;
}
/* 未被访问的链接 */
a:visited {
color: #00FF00;
}
/* 已被访问的链接 */
a:hover {
color: #FF00FF;
}
/* 鼠标指针移动到链接上 */
a:active {
color: #0000FF;
}
/* 正在被点击的链接 */知识汇总
▍HTML篇
▍CSS篇
一、图片剪裁防止图片变形
示例：
.icon-container img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
}效果：
二、消除input框选中时外边框
示例：
.right .input-container .input-content input {
border: 0;
padding: 10px;
width: 100%;
height: 100%;
box-sizing: border-box;
/* 去除input框外边框 */
outline: none;
font-size: 18px;
}效果：
三：带有透明度的渐变
示例：
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 1));效果：
四：a标签的四个伪类定义顺序
示例：css
a:link {
color: white;
}
/* 未被访问的链接 */
a:visited {
color: #00FF00;
}
/* 已被访问的链接 */
a:hover {
color: #FF00FF;
}
/* 鼠标指针移动到链接上 */
a:active {
color: #0000FF;
}
/* 正在被点击的链接 */▍JS篇
一、捕获键盘输入事件
示例：
document.onkeydown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode == 27) { // 按 Esc
// 要做的事情
}
if(e && e.keyCode == 113) { // 按 F2
// 要做的事情
}
if(e && e.keyCode == 13) { // enter 键
// 要做的事情
}
};附录：常用键盘键码
| 键码 | 对应键盘键 |
|---|---|
| 8 | Backspace |
| 9 | Tab |
| 12 | Clear |
| 13 | Enter |
| 16 | Shift |
| 17 | Control |
| 18 | Alt |
| 35 | End |
| 36 | Home |
| 37 | Left |
| 38 | Up |
| 39 | Right |
| 40 | Down |
| 46 | Delete |
| 47 | Help |
| 48 | 0 |
| 49 | 1 |
| 50 | 2 |
| 51 | 3 |
| 52 | 4 |
| 53 | 5 |
| 54 | 6 |
| 55 | 7 |
| 56 | 8 |
| 57 | 9 |
| 65 | a |
| 66 | b |
| 67 | c |
| 68 | d |
| 69 | e |
| 70 | f |
| 71 | g |
| 72 | h |
| 73 | i |
| 74 | j |
| 75 | k |
| 76 | l |
| 77 | m |
| 78 | n |
| 79 | o |
| 80 | p |
| 81 | q |
| 82 | r |
| 83 | s |
| 84 | t |
| 85 | u |
| 86 | v |
| 87 | w |
| 88 | x |
| 89 | y |
| 90 | z |
| 96 | KP_0 |
| 97 | KP_1 |
| 98 | KP_2 |
| 99 | KP_3 |
| 100 | KP_4 |
| 101 | KP_5 |
| 102 | KP_6 |
| 103 | KP_7 |
| 104 | KP_8 |
| 105 | KP_9 |
| 键码 | 对应键盘键 |
|---|---|
| 112 | F1 |
| 113 | F2 |
| 114 | F3 |
| 115 | F4 |
| 116 | F5 |
| 117 | F6 |
| 118 | F7 |
| 119 | F8 |
| 120 | F9 |
| 121 | F10 |
| 122 | F11 |
| 123 | F12 |
| 124 | F13 |
| 125 | F14 |
| 126 | F15 |
| 127 | F16 |
| 128 | F17 |
| 129 | F18 |
| 130 | F19 |
| 131 | F20 |
| 132 | F21 |
| 133 | F22 |
| 134 | F23 |
| 135 | F24 |
二、DIV自动滚动到底部
示例：css
.right .chat-container {
padding: 10px;
height: 80%;
overflow-y: scroll;
box-sizing: border-box;
}js：关键代码
$(".chat-container").scrollTop($(".chat-container")[0].scrollHeight);【注意】无论是id选择器还是class选择器都要加[0]。