[关闭]
@EncyKe 2017-03-02T09:24:22.000000Z 字数 2098 阅读 1031

手册:前端不完全 hack 工具小集:HTML & CSS 篇

#手册



1. line-clamp 的 SASS 函数

  1. /**
  2. * @description 按规定行数切除、省略文本;不够行数则高度收缩
  3. * @param {Number} $line-limit: 1 - 规定行数
  4. */
  5. @mixin line-clamp($line-limit: 1) {
  6. overflow: hidden;
  7. text-overflow: ellipsis;
  8. @if $line-limit == 1 {
  9. white-space: nowrap;
  10. line-height: 1;
  11. } @else {
  12. display: -webkit-box;
  13. -webkit-box-orient: vertical;
  14. -webkit-line-clamp: $line-limit;
  15. }
  16. }
  17. /**
  18. * @description 按规定行数切除、省略文本;不够行数则高度不收缩
  19. * @param {Number=1} $line-limit - 规定行数
  20. * @param {Number=1.2} $line-height - 行高
  21. * @param {String=16px} $font-size - 字号
  22. *
  23. * @see http://codepen.io/siiron/pen/jfBhy/
  24. * @deprecated
  25. */
  26. @mixin line-clamp($line-limit: 1, $line-height: 1.2, $font-size: 16px) {
  27. display: block;
  28. display: -webkit-box;
  29. -webkit-box-orient: vertical;
  30. position: relative;
  31. font-size: $font-size;
  32. line-height: $line-height;
  33. overflow: hidden;
  34. text-overflow: ellipsis;
  35. padding: 0 !important;
  36. -webkit-line-clamp: $line-limit;
  37. height: calc(#{$font-size} * #{$line-height} * #{$line-limit});
  38. }
  1. html {
  2. /* 保证 body 百分比设置有效 */
  3. height: 100%;
  4. }
  5. body {
  6. /* 定义 footer 定位基准。如果不设置,footer 会以 html 为基准,而 html 的高度为 100%,导致 footer 的位置不随文档高度伸缩 */
  7. position: relative;
  8. /* 保证页面高度很小时 footer 也能固定在底部 */
  9. min-height: 100%;
  10. }
  11. .footer-helper {
  12. /* 保证页面高度超过 body 最小高度时,主内容区域不和 footer 区域重叠 */
  13. padding-bottom: $footer-height;
  14. }
  15. footer {
  16. position: absolute;
  17. left: 0;
  18. bottom: 0;
  19. height: $footer-height;
  20. width: 100%;
  21. }

3. 禁止/启用 body 滚动

  1. /* 禁止滚动条 */
  2. body.no-scroll {
  3. overflow-x: hidden;
  4. overflow-y: hidden;
  5. }
  6. /* 启用滚动条 */
  7. body.allow-scroll {
  8. overflow-x: auto;
  9. overflow-y: auto;
  10. }

4. 语音输入按钮(chrome 专有)

  1. <input type="text" x-webkit-speech="">

5. 图片蒙层实现

5.1. 图片为 CSS 背景:CSS3 渐变图片背景

  1. .container {
  2. background-image:
  3. linear-gradient(
  4. -360deg,
  5. rgba(0, 0, 0, 1),
  6. rgba(0, 0, 0, 0)
  7. ),
  8. url("https://www.google.com/images/srpr/logo3w.png");
  9. }
  1. .container {
  2. background-image:
  3. linear-gradient(
  4. -360deg,
  5. rgba(0, 0, 0, .3),
  6. rgba(0, 0, 0, .3)
  7. ),
  8. url("https://www.google.com/images/srpr/logo3w.png");
  9. }

5.2. 图片为 img 标签

  1. .wrapper {
  2. position: relative;
  3. .mask {
  4. position: absolute;
  5. top: 0;
  6. left: 0;
  7. width: 100%;
  8. height: 100%;
  9. background: rgba(0, 0, 0, .5);
  10. z-index: 10;
  11. }
  12. }
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注