OCDeer.md · OSCHINA-MIRROR/mtnlmm-ocdeer

1. Button класс

Однотипный селектор, прямая ссылка на class="btn-1".

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/button.css">
    </head>
    <body>
        <button type="button" class="btn-1">BUTTON</button> 
    </body>
</html>

1.0.2 flash btn-2

Однотипный селектор, прямая ссылка на class="btn-2".

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/button.css">
    </head>
    <body>
        <button type="button" class="btn-2">BUTTON</button> 
    </body>
</html>

1.0.3 Волновой эффект btn-3

Сложный стиль, который имеет две категории: up и left. Они отличаются точкой начала волны и цветом. Чтобы достичь эффекта top и right, нужно поменять местами начальную и конечную точки в CSS.

Сначала ссылаемся на стиль div class="btn-3", затем внутри div ссылаемся на конкретный стиль: up или left.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/button.css">
    </head>
    <body>
        <div class="btn-3">
            <button type="button" class="up">BUTTON</button>
        </div>
    </body>
</html>

1.0.4 Световой контур btn-4

Поскольку этот стиль является стилем контура кнопки, кнопка уже имеет контур, поэтому используется тег <a> вместо <button>.

Стиль контура использует теги <span> для определения.

Ссылка на <a class="btn-4">.

Вызываются четыре стиля контура.

    <span></span>
    <span></span>
    <span></span>
    <span></span>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/button.css">
    </head>
    <body>
        <a class="btn-4">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            One Button
        </a>
    </body>
</html>

1.0.5 Складной двухслойный стиль кнопки btn-5

Этот стиль также использует <span>. Это двухслойная кнопка, где левая часть — кнопка 1, а правая — кнопка 2.

Существует два варианта этого стиля: с контуром и без него. Используется тег <a> для стиля без контура, тег <button> — для стиля с контуром.

Ссылки на <button class="btn-5"> или <a class="btn-5">.

Вызов стиля:

    This Button1
    This Button2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/button.css">
    </head>
    <body>
        <button class="btn-5">
            This Button1
            This Button2
        </button> 
    </body>
</html>

1.0.6 Световой контур 2 btn-6

Контурный стиль, используется тег <a>.

Контур определяется с помощью тегов <span>.

Ссылка на <a href="#" class="btn-6">Button</a>.

Всего существует три стиля.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/button.css">
    </head>
    <body>
        <a href="#" class="btn-6">Button</a>
        <a href="#" class="btn-6">Button</a>
        <a href="#" class="btn-6">Button</a>
    </body>
</html>

1.0.7 Изменение цвета контура btn-7

Составной стиль. Сначала ссылаемся на стиль <div class="container">, затем внутри div ссылаемся на стиль кнопки <button class="btn-7">.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/button.css" rel="stylesheet">
        <title></title>
    </head>
    <body>
        <div class="container">
            <button class="btn-7">
                <label>Button</label>
            </button>
        </div>
</body>
</html>

1.0.8 Рисование контура btn-8

Сначала ссылаемся на стиль <div class="btn-8">.

SVG определяет элементы формы, метод rect() создаёт прямоугольник. 1. Текст запроса

1.0.9 Границы кнопки 2 btn-9:
- Граничный стиль, используется тег <a>, граничный стиль использует тег <span> для определения.
- Ссылка <a href="#" class="btn-9">.

<a href="#" class="btn-9">
    <span>
                
    </span>
    button
</a>

HTML

        </span>
        button
    </a>
</body>

1.1.0 Волнистая кнопка btn-10:

При наведении курсора на кнопку появляется эффект волны.
Один класс выбора, прямая ссылка на класс «btn-10».

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/button.css"/>
    </head>
    <body>
        <button class="btn-10">Button</button>
    </body>
</html>

1.1.1 Стиль поломки btn-11:

Кнопка в стиле поломки, ссылается на стороннюю библиотеку, загрузка может занять некоторое время.
Один класс выбора, прямая ссылка на класс «btn-11».

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.font.im/css?family=Do+Hyeon" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/button.css"/>
</head>
<body>
    <div class="btn-11">Button</div>
</body>
</html>

1.1.2 Рисование границ — поток света btn-12:

Граничный стиль определяется с помощью тега <span>.
Ссылка <a class="btn-12" target="blank">.

<a class="btn-12" target="blank">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
        night
 </a>

HTML

<title></title> night

2. Text класс

2.0.1 Сжатие и расширение text-1:

Ссылается на стиль класса «btn-1».
По умолчанию текст отступает, при наведении курсора расширяется и показывает весь текст.
Состояние по умолчанию определяется непосредственно селектором тегов, поэтому мы используем тег span для состояния по умолчанию, <span>W</span>.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/text.css" />
    </head>
    <body>
    <div class="text-1">
        <span>W</span>
        <span class="s">e</span>
        <span class="s">l</span>
        <span class="s">c</span>
        <span class="s">o</span>
        <span class="s">m</span>
        <span class="s">e</span>

        <span>O</span>
        <span class="s">m</span>
        <span class="s">n</span>
        <span class="s">i</span>
        <span class="s">p</span>
        <span class="s">o</span>
        <span class="s">t</span>
        <span class="s">e</span>
        <span class="s">n</span>
        <span class="s">t</span>

        <span>C</span>
        <span class="s">o</span>
        <span class="s">l</span>
        <span class="s">o</span>
        <span class="s">r</span>

        <span>D</span>
        <span class="s">e</span>
        <span class="s">e</span>
        <span class="s">r</span>

Текст запроса не содержит кода на каком-либо языке программирования, гиперссылок, специальных тегов форматирования в markdown, html, yaml, json, plantuml и других. Создание формы:

<div class="middle">
    <form action="index.html" class="search-box" method="post">
        <input type="text" class="input-3" name="" valur="">
        <button type="button" class="input3-btn" name="button"></button>
    </form>
</div>

Потому что есть действие при нажатии, необходимо добавить событие клика с помощью JavaScript:

$(".input3-btn").on("click",function() {
  $(".input-3").toggleClass("inclicked");
  $(".input3-btn").toggleClass("close");
});

Без использования jQuery:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>可展开搜索框</title>
    <link rel="stylesheet" href="css/input.css">
  </head>
  <body>
    <div class="middle">
      <form action="index.html" class="search-box" method="post">
        <input type="text" class="input-3" name="" valur="" id="val">
        <button type="button" class="input3-btn" name="button"></button>
      </form>
    </div>

    <script type="text/javascript">
      document.querySelector('.input3-btn').addEventListener("click", function () {
          if (document.querySelector('.input-3').className.indexOf("inclicked") == -1) {
              document.querySelector(".input-3").className = "input-3 inclicked";
              document.querySelector(".input3-btn").className = "input3-btn close";
          } else {
              document.querySelector(".input-3").className = "input-3";
              document.querySelector(".input3-btn").className = "input3-btn";
          }
      })
    </script>
  </body>
</html>

3. Navs класс

3.0.1 навигационная панель — вертикальный тип navs-1

Разделите размеры коробки до и после расширения, перед расширением class="navs-1", после расширения class="navs-1 active".
В то же время стрелка следует за изменениями до и после раскрытия, перед раскрытием ">", после раскрытия "<", селекторы классов соответственно class="toggle" и class="toggle active".

Значок помещается в коробку в виде списка тегов.

<li>
    <a href="#">
        <span class="icon"><i class="fa fa-home"></i></span>
        <span class="title">Home</span>
    </a>
</li>

Событие клика, расширение и восстановление.

const navigation = document.querySelector('.navigation');
document.querySelector('.toggle').onclick = function(){
    this.classList.toggle('active');
    navigation.classList.toggle('active');
}

Обратите внимание на использование значков шрифтов в виде ссылок.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

OSCHINA-MIRROR/mtnlmm-ocdeer

3. Navs класс

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/mtnlmm-ocdeer .gitee-modal { min-width: 500px !important; } .gitee-modal .close { right: 0.6rem !important; }

3. Navs класс

Опубликовать ( 0 )

Введение

Обновления

Участники

Недавние действия

OSCHINA-MIRROR/mtnlmm-ocdeer