Краткое изложение 12 практических навыков фронтенд-разработки

внешний интерфейс Гибкая разработка

1. Переопределить стили по умолчанию с помощью CSS

Типичные сценарии возникновения: если нам нужно загрузить файлы через ввод, type="file", и можно сказать, что стиль этого ввода по умолчанию очень丑. Итак, мы надеемся передать изображение того же размера, что и этот ввод, и закрыть его в том же положении. В это время, очевидно, при нажатии на картинку в это время вход работать не будет. Это потому, что img изолирует проникновение щелчка, и мы надеемся, что этот img только визуально блокирует стиль ввода, но при нажатии ввод все еще щелкается. Итак, просто сделайте img проникающим.

Код css выглядит следующим образом:

img {
  pointer-events: none;
}

2. Реализуйте стиль пользовательского собственного элемента управления выбором.

Поскольку собственный стиль выбора на мобильном терминале уродлив, собственный эффект всплывающего окна соответствует нашим принципам дизайна. При непосредственной модификации стиля выбора происходит странное явление.При отладке на хроме работает определенный мною стиль,и на телефонах Андроид он тоже работает,но на телефонах ios не работает.Типичные проблемы несовместимости,в этот раз можно отключить родной стиль.

Код css выглядит следующим образом:

select {
  -webkit-appearance: none;
}

3. Обработка переполнения текста

Мобильные устройства имеют относительно небольшие страницы, и часто часть отображаемой информации приходится опускать. Наиболее распространенным является пропуск переполнения однострочного заголовка и пропуск переполнения многострочного введения подробностей. Теперь все они разрабатываются с помощью фреймворка, и такого рода предложения и предложения по требованиям образуют базовый компонент, который удобен и быстр.

Код css выглядит следующим образом:

//单行
.single {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//多行
.more {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  work-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; //指定行数
}

4. Включите эластичную прокрутку

Код css выглядит следующим образом:

body {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

Примечание. Android не поддерживает нативную эластичную прокрутку, но ее можно реализовать с помощью сторонней библиотеки iScroll.

5. Настройка границы в один пиксель

Много раз вы хотите сохранить размер границы в 1 пиксель при любых настройках, но поскольку 1 пиксель визуализируется с 2dp, это означает, что он будет отображаться как 2 пикселя. Итак, используйте css3 для масштабирования.

Код css выглядит следующим образом:

.folder li {
  position: relative;
  padding: 5px;
}
.folder li + li:before {
  position: absolute;
  top: -1px;
  left: 0;
  content: " ";
  width: 100%;
  height: 1px;
  border-top: 1px solid #ccc;
  -webkit-transform: scaleY(0.5);
}

6. Предотвратить событие выбора мыши

<div class="mask" onselectstart="return false"></div>
<div class="link">
  <a href="javascrip;;">登录</a>
</div>

добавлено в элементonslectstart="return false", вы можете предотвратить событие выбора мыши.

7. Привязывайте события к динамически добавляемым элементам

Этого эффекта можно добиться, используя прокси времени. Такие как:

$(document).on("click", ".large", slide); //jq中的写法
//第一个参数表示的是对应事件，第二个是需要绑定事件的元素的id或class，第三个是绑定的对应的事件函数名

8. Совместимость с обработкой прозрачности браузера IE.

.ui {
  width: 100%;
  height: 100%;
  opacity: 0.4;
  filter: Alpha(opacity=40); //兼容IE浏览器的处理
}

9. Общие функции полноэкранного центрирования JS

//获取元素
function getElement(ele) {
  return document.getElementById(ele);
}
//自动居中函数
function autoCenter(el) {
  var bodyX = document.documentElement.offsetWidth || document.body.offsetWidth;
  var bodyY =
    document.documentElement.offsetHeight || document.body.offsetHeight;

  var elementX = el.offsetWidth;
  var elementY = el.offsetHeight;

  el.style.left = (bodyX - elementX) / 2 + "px";
  el.style.top = (bodyY - elementY) / 2 + "px";
}

10. Общие полноэкранные центрирующие функции CSS

body {
  height: 100vh;
  text-align: center;
  line-height: 100vh;
}

11. Сделайте вывод, когда закончите вводить содержимое в поле ввода и нажмете Enter.

Например, после ввода11000при нажатии энтер.

<input type="textbox" id="textbox1" onkeypress="CheckInfo" />

    <script language="javascript" type="text/javascript">
    function CheckInfo()
    {
    if (event.keyCode==13) {
          alert(textbox1.text);
       }
    }
    </script>

12. хромированные ярлыки отладки

① ctrl+shift+f полнотекстовый поиск

② ctrl+o найти имя файла

③ ctrl+shift+o Найти имя функции js

наконец

  • Добро пожаловать, чтобы добавить меня в WeChat (winty230), привлечь вас в техническую группу, долгосрочный обмен и обучение...
  • Добро пожаловать, чтобы обратить внимание на «Front-end Q», серьезно изучить интерфейс и стать профессиональным техником...

GitHub

Категории