Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Домашнее задание №4 #12

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Домашнее задание №4 #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 74 additions & 0 deletions Move-on_come-on.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<title>display: inline-block</title>

<style type="text/css">
#left {
width: 50px;
height: 20px;
background: red;
float: left;
margin: 0;
color: #fff;
padding: 0 10px;
text-align: center;
}

#center ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}

#center ul li {
float: left;
padding: 0 10px;
}


#center {
width: 500px;
height: 20px;
background: #808080;
margin: 0 auto;
color: #fff;
}

#content {
width: 500px;
background: gray;
margin: 0 auto;
height: 600px;
}

</style>
</head>
<body>

<h1>Задание №4* «Двигайся, давай»</h1>
<p>
Данное решение не работает в Firefox
</p>

<a href="index.html">Вернуться назад</a>
<br />
<br />

<div id="left">Блок</div>
<div id="center">
<ul>
<li>Школа</li>
<li>Разработчиков</li>
<li>Интерфейса</li>
</ul>
</div>

<div id="content"></div>

</body>
</html>
74 changes: 74 additions & 0 deletions float.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<title>display: float</title>

<style type="text/css">
.container
{
width: 100%;
padding: 0;
}
.layout-1,
.layout-3,
.layout-2
{
padding: 10px 0;
vertical-align: top;
text-align: center;
font-size: 30px;
}
.layout-1
{
float: left;
width: 25%;
background-color: #fc0;
}
.layout-2
{
margin: 0 25%;
width: 50%;
background-color: #ff0000;
}
.layout-3
{
float: right;
width: 25%;
background-color: #ffcc00;
}
</style>
</head>
<body>

<h1>Задание №1 (display: float)</h1>
<p>
Данное решение сделано с использованием float
</p>

<ul>
<li>Минус: расположение блоков не совсем верное - центральный блок по коду идет последним</li>
</ul>

<a href="index.html">Вернуться назад</a>
<br />
<br />

<div class="container">
<div class="layout-1">
Школа
</div>
<div class="layout-3">
интерфейсов
</div>
<div class="layout-2">
разработки
</div>

</div>


</body>
</html>
62 changes: 62 additions & 0 deletions footer-absolute.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<title>Footer down</title>

<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
}
h1
{
margin: 0;
}
.main {
padding: 0 0 50px;
}
.footer {
background: #f00;
height: 50px;
width: 100%;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>

<div class="main">
<h1>Задание №3 «Подвал»</h1>
<p>
Данное решение реализовано при помощи абсолютно спозиционированного подвала и задания нижнего внутреннего
отступа у основного блока.
</p>


<a href="index.html">Вернуться назад</a>
<br />
<br />
</div>
<div class="footer">
Это подвал
</div>






</body>
</html>
56 changes: 56 additions & 0 deletions footer-margin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<title>Footer down</title>

<style type="text/css">
body
{
background: #fff;
}
html,body, h1
{
height: 100%;
margin: 0;
}
.main
{
background: #cdcdcd;
min-height: 100%;
}
.footer-hide {
height: 40px;
}
.footer {
background: #f00;
color: #fff;
height: 40px;
margin: -40px 0 0;
}
</style>
</head>
<body>

<div class="main">

<h1>Задание №3 «Подвал»</h1>
<p>
Данное решение реализовано при помощи задания для основного блока минимальной высоты, равной 100%, с последующей
вставкой между подвалом (задан отрицательный отступ вверх, равный высоте подвала) и основным блоком для случая, если
контент достигает подвала (происходит смещение подвала вниз)
</p>

<a href="index.html">Вернуться назад</a>
<br />
<br />

<div class="footer-hide"></div>
</div>
<div class="footer">Это подвал</div>


</body>
</html>
42 changes: 42 additions & 0 deletions height-fix.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<title>height: fix</title>

<style type="text/css">
div
{
position: absolute;
top: 50%;
height: 50px;
margin: -25px 0 0;
padding: 10px;
font-size: 30px;
letter-spacing: -1px;
border: 2px solid #fc0;
text-align: center;
}
div:first-letter
{
color: #f00;
}
</style>
</head>
<body>

<h1>Задание №2 (По ширине страницы, если блок имеет фиксированную высоту)</h1>
<p>
Как и в случае с шириной - задаем отступ в 50% от высоты экрана, а затем смещаем этот блок ниже, на расстояние, равное половине высоте нашего блока
</p>

<a href="index.html">Вернуться назад</a>

<div>
Яндекс. ШРИ. Екатеринбург
</div>

</body>
</html>
76 changes: 76 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Модель отображения</title>
</head>
<body>

<h2>Задание №1 «Эй вы, трое»</h2>
<p>Реализуйте трёхколоночную резиновую разметку страницы вида 1-2-1 (25%–50%–25%).</p>

<p>Решение:</p>
<ul>
<li><a href="absolute.html">Асобсолютное позиционирование (position: absolute)</a></li>
<li><a href="float.html">Обтекание (float)</a></li>
<li><a href="inline-table.html">Display: inline-table</a></li>
<li><a href="table.html">Табличная верстка</a></li>
</ul>

<h2>Задание №2 «Всегда в центре»</h2>
<p>У вас есть абсолютно спозиционированный блок с каким-то содержимым. Необходимо поместить его в центре.</p>

<p>Решение:</p>
<ul>
<li>
По ширине страницы, если
<ul>
<li><a href="width-fix.html">Блок имеет фиксированную ширину</a></li>
<li>Блок имеет ширину, которая подстраивается под размер содержимого</li>
</ul>
</li>
<li>
По высоте страницы, если
<ul>
<li><a href="height-fix.html">Блок имеет фиксированную высоту</a></li>
<li>Блок имеет высоту, которая подстраивается под размер содержимого</li>
</ul>
</li>
</ul>

<h2>Задание №3 «Подвал»</h2>
<p>
Реализуйте прибитый подвал. Т.е подвал, который всегда прибит к нижней границе viewport'а, если высота содержимого
меньше высоты viewport'а, и находится под содержимым, в случае если высота содержимого больше высоты viewport'а
</p>

<p>Решение:</p>
<ul>
<li><a href="footer-margin.html">Отрицательный отступ подвала вверх и min-height для основного блока</a></li>
<li><a href="footer-absolute.html">Отрицательный отступ подвала вверх и min-height для основного блока</a></li>
</ul>

<h2>Задание №4* «Двигайся, давай»</h2>
<p>
Реализуйте разметку
</p>

<p>Решение:</p>
<ul>
<li><a href="Move-on_come-on.html">Отрицательный отступ подвала вверх и min-height для основного блока</a></li>
</ul>

<h2>Задание №5* «Тройняшки мы»</h2>
<p>
Нужно реализовать такое поведение трех элементов интерфейса (например, кнопок) при котором каждая кнопка занимает
примерно треть пространства. И, если уменьшая браузер одна из кнопок достигает своего минимального размера, то
остальные кнопки тоже перестают уменьшаться по ширине.
</p>

<p>Решение:</p>
<ul>
<li><a href="table-button.html">Использование таблицы</a></li>
</ul>

</body>
</html>
Loading