Краткое описание страницы стиль макета

Средства разработки и ключевые технологии: Visual Studio и Html, CSS, JS

Автор: Хуан Can

Время записи: 2019.6.2-2019.6.8

HTML код / ​​Этикетка

CSS Connection
стиль (стиль): <link rel="stylesheet" href="css文件路劲">записать следующее в тег заголовка, головной метки

Подключение
JavaScript: <script src="javascript文件路劲"></script>Обычно в конце письма в теле тега, тег может быть записан в названии ниже, в головной метке

<div></div>Тег используется для упаковки код, инкапсулированный код написан в DIV, тег блочным

<a href=”跳转路径(网址)”></a>Якорь теги, также известный как тег

<img src=”图片路径” alt=””/>Insert Picture (самозакрывающиеся теги)

<label for=”XXX”></label>Таблица теги

<span></span> Встроенный тег

<ul></ul>Ненумерованный список

<ol></ol>Нумерованный список

<li></li>Доступен в упорядоченном / неупорядоченный список

<b></b>Жирное лицо

<u></u>подчеркивание

<p></p>Сегмент (текст)

<s></s>Зачеркнутый

<hr>уровень

<l></l>курсив

<em></em>курсив

<small></small>Дисплей мелких шрифтов

<big></big>Большой дисплей шрифта

<tt></tt>Машинка шрифта

<strike></strike>Зачеркнутый

<sub></sub>подстрочные символы

<sup></sup>SuperScript символов

<blink></blink>Текст мигающий эффект

<center></center>Унифицированные к

<pre></pre>Дисплей в соответствии с оригинальным стилем

&nbsp; пустой

<h1></h1>~~<h6></h6>Название тегов

<br>Wrap

placeholderТекст Box Советы

<textarea></textarea>Текстовые поля

ввод этикетки

<input,type="text">Text Box

<input,type="password">окно Пароль

<input,type="submit">кнопку Отправить

<input,type="checkbox">Флажок

<input,type="radio">флажок

<input,type="reset">кнопка сброса

<input,type="image">кнопка Изображение

<input,type="hidden">Скрытое поле

<input,type="button">кнопка

<input,type="file">Просмотр файлов

Таблица теги

<table> Определяет таблицу

<caption>Таблица заголовков.

<th>Заголовок таблицы.

<tr>Определяет строку таблицы.

<td>Определяет ячейку таблицы.

<thead>Определяет заголовок таблицы.

<tbody>Определение тела таблицы.

<tfoot>Определяет таблицу колонтитула.

<col>Определение атрибута столбца таблицы.

<colgroup>Определяет столбец таблицы группы.

Css код

ширина ширина

высота высота

маржа маржа

обивка обивка

фон

определение местоположения

Centent центр, центр

поплавок поплавок

наверх наверх

Право на права

дно ниже

левый левый

граница граница

Сплошная линия твердого вещества

Штриховая пунктирная линия

цвет

шрифта

размер размер

фиксированный фиксированный

свойства отображения

длина длина

высота линии высота строки

граница радиуса выкружки

размер шрифта размер шрифта

коробчатая тень тень

Z-индекс: 1; Уровень

прозрачный прозрачный

Бесконечные Неограниченное

выравнивания текста: центр; центрируется текст

шрифт перевесить размер текста

Положение: относительное; относительное позиционирование (эгоцентрична)

позиция: абсолютная; абсолютное позиционирование

Положение: фиксированное; фиксированное позиционирование (как правило, в верхнем левом углу экрана в качестве центра)

текст-отделка: нет; отменить подчеркивание

список-стиль: нет; литий удаления точек

текст-отделка: подчеркнуть; Подчеркнутая

переполнение: скрытый; скрыть избыток

Дисплей: блок; Метка изменяется в пределах строки этикетки на уровне блоков

начертание шрифта: жирный, шрифт полужирный

Дисплей: встроенный блок; горизонтальный элемент отображения блока

п-о-типа) Выбор структуры (

выравнивания текста: центр; текст по горизонтали в центре

Маринг: 0 авто; горизонтальный центр

границы радиуса: 5px; границы при условии, закругленные углы

не дисплей: нет; элемент скрывается

ясно: слева; Очистить поплавок

Размер-фон:
обложка адаптация размера изображения

преобразование: translateX (,, рх) к X-оси перемещения

выбор первого первого дочернего элемента

п-й ребенок (п), чтобы выбрать первые п элементов

изменение шрифта семьи

плавать: слева налево плавающей

плавать: право плавающего права

Даже строки (четные) нечетные строки (нечетные)

очертить: нет; текстовое поле, чтобы выбрать отменить эффект

фон-размер: обложка адаптация размера изображения

граница цвета: прозрачный прозрачный прозрачный # 65aac3;
производство треугольник

коробчатого тень: 2px 5px 10px #ccc набор теней

курсор: указатель; парить вариант пощечину

Курсор: не разрешенный, изменение парить не может нажать

Очистить поплавок

.clear:after{  
         content: '';  
         display: block;    
         clear: both;    
  }
  .clear{
         zoom:1;
  }/*游览器兼容性*/

Функция CSS3 анимации

функция перехода перехода

преобразование передаточной функции

функция анимации анимация

преобразования: Этот атрибут используется для установки деформации. Это свойство поддерживает одну или больше функций деформации

вращаться (угол): Эта функция используется, чтобы установить угол поворота элемента

перекос (): Эта функция используется для осуществления кривого элемент, расположенное

шкала (Sx, х): Эта функция используется для установки эффекта масштабирования элемента

переводить (Тх, Ту): Эта функция используется для перемещения элемента установки

преобразование происхождения: происхождение элемента, чтобы изменить положение центрального положения элемента не происхождение элемента

переход-свойство: Задает динамическое моделирование переходных или CSS свойств

переходная продолжительность: Определяет время, необходимое для завершения перехода

переходное время функция: Функция определяет переход

Переход задержка: Определяет время задержки начала появляться

матрица (m11, m12, m21, m22, ая, д): Эта функция основана на функции преобразования матрицы вышеописанной четыре параметров матрицы преобразования состав, причем последние ой, д, главным образом, относится к локализованной оси координат величина сдвига

Переход: (все 0.5с легкости); атрибут
Time-Delay Эффект переход: 0.06s;
(задержка) 2D анимация

Анимация анимация: движение 1.8s;

@keyframes XXX {0}% {15%} {} .......... функции ключевого кадра

JavaScript (JS)

window.οnlοad = функция () {...} погрузочные события происходят

document.getElementByld ( «идентификатор, соответствующее имени HTML»), приобретенное элемент ID

document.getElementsByClassName ( «CLAS соответствует имя HTML»), приобретая элементы Calss

document.getElementsByTagName ( «имя тега соответствует»), по имени тега элемента Get

Функция Функция Метод

Console.log (); вывод на консоль

оповещения (); всплывающие окна

объявить переменные вар

подтвердить (): всплывающее окно запроса

приглашение (); Диалог ввода

ParentNode родительский элемент

ParseInt (...), чтобы преобразовать строку в соответствующее целое число

parseFloat () для преобразования строки в соответствующий поплавок

document.write (); выход на страницу

Window.onmousewheel колесо мыши события

event.detail Firefox и другие достопримечательности получают значение прокрутки

Получить значение ролика перемещается event.wheelDelta

Window.onresize форма изменения размера события

XXX.οnclick = функция () {} нажмите событие

XXX.innerHTML = «»
динамически добавлен элемент контента

. Вар XXX = XXX insertCell (); динамическая вставка клетки

XXX.style.display = 'None'; при
условии , свойства элемента

Такая, как тур Firefox роликового прослушивателя событий в; window.addEventListener ( «DOMMouseScroll», колесо, ложь)

event.preventDefault (); event.returnValue = ложь; остановить тур прокатки полосы поведение прокатки

Объявление функции: Функция + имя функции (параметр 1, параметр 2 ...) {...}

Таймер SetTimeout (идти, интервал); имя функции

\ Забой символ B

\ F Под.стр

\ N символ новой строки

\ R возврат каретки

\ T Вкладка

\ «Побег

рекомендация

отblog.csdn.net/weixin_44542088/article/details/91352002