Перейти к содержимому

HTML скролинг или css прокрутка по вертикали. (css scrolling vertically)

URL источник

<!DOCTYPE html>
<html>
<head>
<style> 
div.ex1 {
  background-color: lightblue;
  height: 40px;
  width: 200px;
  overflow-y: scroll;
}

div.ex2 {
  background-color: lightblue;
  height: 40px;
  width: 200px;  
  overflow-y: hidden;
}

div.ex3 {
  background-color: lightblue;
  height: 40px;
  width: 200px;  
  overflow-y: auto;
}

div.ex4 {
  background-color: lightblue;
  height: 40px;
  width: 200px;  
  overflow-y: visible;
}
</style>
</head>
<body>

<h1>The overflow-y Property</h1>

<p>The overflow-y property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.</p>

<h2>overflow-y: scroll:</h2>
<div class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

<h2>overflow-y: hidden:</h2>
<div class="ex2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

<h2>overflow-y: auto:</h2>
<div class="ex3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

<h2>overflow-y: visible (default):</h2>
<div class="ex4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div>

</body>
</html>

overflow-y: auto:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.
  Bild das
das Bild, Bilder. -er
фотография; изображение; картинка
Sehen Sie die Bilder an.
Посмотрите на фотографии.
  Kurs der
  der Kurs, Kurse. -e
  курс (клас)
  Im Kurs.
  .
  Gespräch das
  das Gespräch, Gespräche. -e
  разговор
  Lesen Sie die Gespräche.
  Прочитайте разговоры.
  Frage die
  die Frage, Fragen. -n
  вопрос
  Ergänzen Sie Fragen.
  Добавлять вопросы.
  Wort das
  das Wort, Wörter. -̈er
  слово
  Raten Sie Wörter.
  Угадай слова.
  Lektion die
  die Lektion, Lektionen. -en
  урок
  Raten Sie Wörter aus der Lektion.
  Отгадайте слова из урока.
  Antwort die
  die Antwort, Antworten. -en
  ответ
  Schreiben Sie Fragen und Antworten.
  Напишите вопросы и ответы.
  Name der
  der Name, Namen. -n
  имя
  Mein Name ist Walter Baumann.
  Меня зовут Вальтер Бауманн.
  Deutsch das
  das Deutsch,  !
  немецкий
  Ich spreche Deutsch.
  Я говорю по-немецки.
  Herr der
  der Herr, Herren. -en
  джентльмен
  Guten Tag, Herr Diaz.
  До свидания, мистер Диас.
  Kind das
  das Kind, Kinder. -er
  ребёнок, дети
  Tschüs, Kinder.
  Пока, дети.
  Dame die
  die Dame, Damen. -n
  дам
  Guten Abend, meine Damen und Herren.
  Добрый вечер, дамы и господа.
  Musik (Singular) die
  die Musik (Singular),  (Sg.)
  музыка
  Willkommen bei „Musik international“.
  Добро пожаловать на "Music International".
  Frau die
  die Frau, Frauen. -en
  женщина
  Guten Morgen, Frau Fleckenstein
  Доброе утро, миссис Флекенштейн.
  Papa der
  der Papa, Papas. -s
  отец, папа
  Nacht, Papa.
  Спокойной ночи, папа.
  Entschuldigung die
  die Entschuldigung, Entschuldigungen. -en
  извинение
  Entschuldigung, wie heißen Sie?
  Простите, как вас зовут?
  Schweiz die
  die Schweiz, Schweiz. —
  Швейцария
  Ich komme aus der Schweiz.
  Я из Швейцарии.
  Sprache die
  die Sprache, Sprachen. -n
  язык
  Sprache: Deutsch, Polnisch, …
  Язык: немецкий, польский, …
  Buchstabe der
  der Buchstabe, Buchstaben. -n
  буква
  Buchstabe: a, k, s …
  Буквы: а, к, с …
  Alphabet (Singular) das
  das Alphabet (Singular),  (Sg.)
  алфавит, -ы
  das Alphabet: A, B, C …
  Алфавит: A, B, C…
  Firma die
  die Firma, Firmen. Firmen
  компания, и
  Firma Microlab, guten Tag.
  Микролаб, добрый день.
  Adresse die
  die Adresse, Adressen. -n
  адрес, -а
  Adresse: Hofgasse 8, 6020 Innsbruck
  Адрес: Хофгассе 8, 6020 Инсбрук
  Visitenkarte die
  die Visitenkarte, Visitenkarten. -n
  визитная карточка, визитные карточкы,
  Schreiben Sie Ihre Visitenkarte.
  Напишите свою визитную карточку.
  Vorname der
  der Vorname, Vornamen. -n
  Имя, ена
  Vorname: Lorenzo, Lucie, Jürgen, …
  Имя: Лоренцо, Люция, Юрген, …
  Familienname der
  der Familienname, Familiennamen. -n
  Фамилия, и
  Familienname: Menardi, Plank, …
  Фамилия: Менарди, Планк, …
  Straße die
  die Straße, Straßen. -n
  название улицы
  Straße: Hofgasse, Bahnhofstraße, Aachener Straße …
  Улица: Hofgasse, Bahnhofstraße, Aachener Straße …
  Stadt die
  die Stadt, Städte. -̈e
  город, -а
  Stadt: Berlin, Linz, Schaan, …
  Город: Берлин, Линц, Шаан, …
  Land das
  das Land, Länder. -̈er
  страна, ы
  Land: Österreich, Schweiz, …
  Страна: Австрия, Швейцария, …
  E-Mail die
  die E-Mail, E-Mails. -s
  электронная почта,
электронные почты, 
  E-Mail: l-eigner@dk.de
  E-mail: l-eigner@dk.de
  Telefon das
  das Telefon, Telefone. -e
  телефон, -ы
  Telefon: 041 227 11 00
  Телефон: 041 227 11 00
  Formular das
  das Formular, Formulare. -e
  форма, ы
  Ergänzen Sie das Formular.
  Заполните форму.
  Kurs der
  der Kurs, Kurse. -e
  курс, -ы
  Kurs A1/1 Deutsch als Fremdsprache
  Курс A1/1 Немецкий язык как иностранный
  Fremdsprache die
  die Fremdsprache, Fremdsprachen. -n
  иностранный язык
  Ich spreche eine Fremdsprache: Deutsch.
  Я владею иностранным языком: немецким.
  Anmeldung die
  die Anmeldung, Anmeldungen. -en
  регистрация, и
  Kurs A1/1 Deutsch als Fremdsprache — Anmeldung
  Курс A1/1 Немецкий язык как иностранный — Регистрация
  Postleitzahl die
  die Postleitzahl, Postleitzahlen. -en
  почтовый индекс
  Die Postleitzahl ist 50676.
  Почтовый индекс — 50676.
  Türkei / Türkisch die
  die Türkei / Türkisch,   
  Турция / турецкий
  Ich komme aus die Türkei. / Ich spreche Türkisch .
  Я родом из Турции / Я говорю по-турецки.
  Schweiz / Deutsch die
  die Schweiz / Deutsch,   
  Швейцария / немецкий
  Ich komme aus die Schweiz. / Ich spreche Deutsch.
  Я родом из Швейцарии / я говорю по-немецки.
  Ukraine / Ukrainisch der
  der Ukraine / Ukrainisch,   
  Украина / украинский
  Ich komme aus der Ukraine. / Ich spreche Ukrainisch.
  Я родом из Украины / я говорю по-украински.
  Park der
  der Park, Parks. -s
  парк, -с
  Tim und Lara lernen im Park.
  Тим и Лара занимаются в парке.
  Pause die
  die Pause, Pausen. -n
  перерыв, -н
  Tim und Lara haben Pause.
  Тим и Лара отдыхают.
  Familie die
  die Familie, Familien. -n
  семья, -н
  Das ist meine Familie.
  Это моя семья.
  Vater der
  der Vater, Väter. -̈
  отец, -ы
  Das ist Laras Vater.
  Это отец Лары.
  . die (PI.)
  Großeltern (Plural). (PI.)
  бабушка и дедушка (ПИ.)
  Das sind Laras Großeltern.
  Это бабушка и дедушка Лары.
  Mutter die
  die Mutter, Mütter. -̈
  мать, матери
  Das ist Laras Mutter.
  Это мама Лары.
  . die (PI.)
  Eltern (Plural).. (PI.)
  родители (ПИ.)
  Das sind Tims Eltern.
  Это родители Тима.
  Bruder der
  der Bruder, Brüder. -̈
  брат, -ья
  Das ist Tims Bruder.
  Это брат Тима.
  . die (PI.)
  Geschwister (Plural).. (PI.)
  братья и сестры (ПИ.)
  Lara hat Geschwister.
  У Лары есть братья и сестры.
  Jahr das
  das Jahr, Jahre. -e
  год, -е
  Lara ist zwanzig Jahre alt.
  Ларе двадцать лет.
. Enkel der
. der — die Enkel, Enkel. —
. внук, -и
. Er ist Walters Enkel.
. Он внук Уолтера.
. Enkelin die
. der — die Enkelin, Enkelinnen. -nen
. внучка, и
. Lili ist Walters Enkelin.
. Лили — внучка Уолтера.
  Tochter die
  die Tochter, Töchter. -̈
  дочь, -ери
  Sofia ist Walters Tochter.
  София — дочь Уолтера.
  Sohn der
  der Sohn, Söhne. -̈e
  сын, -овя
  Tobias ist Walters Sohn.
  Тобиас — сын Уолтера.
  Schwester die
  die Schwester, Schwestern. -n
  сестра, -н
  Sofia ist Tobias Schwester.
  София — сестра Тобиаса.
  Oma die
  die Oma, Omas. -s
  бабушка, -с
  Luise ist Lilis Oma.
  Луиза — бабушка Лили.
  Mann der
  der Mann, Männer. -̈er
  муж, -я
  Walter ist Luises Mann.
  Вальтер — муж Луизы.
  Opa der
  der Opa, Opas. -s
  дедушка, -с
  Walter ist Lilis Opa.
  Вальтер — дедушка Лили.
. Ehemann der
. der — die Ehemann, Ehemänner. -̈er
. муж, -я
. Nikolai ist dein Ehemann.
. Мария — ваша жена.
. Ehefrau die
. der — die Ehefrau, Ehefrauen. -en
. жена, жёны
. Maria ist deine Ehefrau.
. Мария — ваша жена.
  Zahl die
  die Zahl, Zahlen. -en
  число, -ен
  Zahl: 0, 1, 2, …
  Число: 0, 1, 2, …
  Nummer die
  die Nummer, Nummern. -n
  число, -н
  Wie ist Ihre Telefonnummer?
  Какой у тебя номер телефона?
  Geburtsort der
  der Geburtsort, Geburtsorte. -e
  место рождения, -е
  Geburtsort: Madrid
  Место рождения: Мадрид
  Wohnort der
  der Wohnort, Wohnorte. -e
  место жительства, -е
  Wohnort: 20249 Hamburg
  Место жительства: 20249 Гамбург
  Familienstand (Singular) der
  der Familienstand (Singular),  (Sg.)
  семейное положение
  Familienstand: geschieden
  Семейное положение: разведен
  Alter das
  das Alter, Alter. —
  возраст, -е
  Alter: 8 und 5
  Возраст: 8 и 5 лет
  Norden (Singular) der
  der Norden (Singular),  (Sg.)
  север
  Hamburg ist im Norden.
  Гамбург находится на севере.
  Osten (Singular) der
  der Osten (Singular),  (Sg.)
  восток
  Leipzig ist im Osten.
  Лейпциг — на востоке.
  Süden (Singular) der
  der Süden (Singular),  (Sg.)
  юг
  München ist im Süden.
  Мюнхен — на юге.
  Westen (Singular) der
  der Westen (Singular),  (Sg.)
  запад
  Köln ist im Westen.
  Кёльн — на западе.
  Hauptstadt die
  die Hauptstadt, Hauptstadte. -̈e
  столица, -е
  Berlin ist die Hauptstadt von Deutschland.
  Берлин — столица Германии.
. Lehrer der
. der — die Lehrer, Lehrer. —
. учитель, я
. Mein Vater ist Lehrer.
. Мой отец — учитель.
. Lehrerin die
. der — die Lehrerin, Lehrerinnen. -nen
. учительница, ы
. Meine Mutter ist Lehrerin.
. Моя мать — учительница.
  Deutsche, Deutsche der — die
  der — die Deutsche, Deutsche, Deutschen. -n
  немец, -н
  Mein Vater ist Kroate, meine Mutter ist Deutsche.
  Мой отец — хорват, мать — немка.
  Bruder der
  der Bruder, Brüder. -̈
  брат, -ья
  .
  .
  Mutter die
  die Mutter, Mütter. -̈
  мать, еря
  .
  .
  Oma die
  die Oma, Omas. -s
  бабушка, -и
  .
  .
  Schwester die
  die Schwester, Schwestern. -n
  сестра, ы
  .
  .
  Vater der
  der Vater, Väter. -̈
  отец, -ы
  .
  .
  Opa der
  der Opa, Opas. -s
  дедушка, -и
  .
  .
. Enkel der
. der — die Enkel, Enkel. —
. внук, -и
. .
. .
. Enkelin die
. der — die Enkelin, Enkelinnen. -nen
. внучка, -и
. .
. .
  Sohn der
  der Sohn, Söhne. -̈e
  сын, -овя
  .
  .
  Tochter die
  die Tochter, Töchter. -̈
  дочь, ери
Home News Contact About Support Blog Tools Base Custom More Logo Friends Partners People Work

Horizontal Scrollable Menu

Resize the browser window to see the effect.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.scrollmenu {
    background-color: #333;
    overflow: auto;
    white-space: nowrap;
}

div.scrollmenu a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}

div.scrollmenu a:hover {
    background-color: #777;
}
</style>
</head>
<body>

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>  
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>

<h2>Horizontal Scrollable Menu</h2>
<p>Resize the browser window to see the effect.</p>

</body>
</html>
test 

	
	-----------------------------------------------------
1 2 3 
<!doctype html>

<html lang="ru">
    <head>
      <meta charset="utf-8" />
      <title>test</title>

	<style>
a {
  display: inline-block;
  width: 50px;
  text-decoration: none;
}
nav, scroll-container {
  display: block;
  margin: 0 auto;
  text-align: center;
}
nav {
  width: 339px;
  padding: 5px;
  border: 1px solid black;
}
scroll-container {
  display: block;
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 5em;
}
	</style>

    </head>
    <body>
	<pre>

	
	-----------------------------------------------------
	
	</pre>
<nav>
  <a href="#page-1">1</a>
  <a href="#page-2">2</a>
  <a href="#page-3">3</a>
</nav>
<scroll-container>
  <scroll-page id="page-1">1</scroll-page>
  <scroll-page id="page-2">2</scroll-page>
  <scroll-page id="page-3">3</scroll-page>
</scroll-container>	
    </body>
</html>
test 

	
	-----------------------------------------------------

Меню

  • Один
  • Два
  • Три
  • Четыре
<!doctype html>

<html lang="ru">
    <head>
      <meta charset="utf-8" />
      <title>test</title>

	<style>
.drop {
  display: inline-block;
  width: 150px;
  height: 30px;
  position: relative;
  color: #fff;
}

.drop p {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin: 0;
  padding: 0 10px;
  box-sizing: border-box;
  background: gray;
}

.drop .dropdown_block {
  display: none;
  width: 100%;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
}

.drop:hover .dropdown_block,
.dropdown_block:hover {
  display: block;
}

.drop ul {
  display: block;
  width: 100%;
  background: gray;
  padding: 0;
  margin: 10px 0 0;
  list-style: none;
  max-height: 90px;
  overflow: hidden auto;
}

.drop li {
  display: lock;
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
}

.drop li:hover {
  background: #555;
  cursor: pointer;
}
	</style>

    </head>
    <body>
	<pre>

	
	-----------------------------------------------------
	
	</pre>
<div class="drop">
  <p>Меню</p>
  <div class="dropdown_block">
    <ul>
      <li>Один</li>
      <li>Два</li>
      <li>Три</li>
      <li>Четыре</li>
    </ul>
  </div>
</div>
    </body>
</html>

Добавить комментарий