- index.html
- style.css
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Верхние и нижние индексы на CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Mobile first!</h1>
<p>Одновременно появился похожий подход, который называется Mobile First <sup>[дословно:</sup> <span class="sup">сначала для мобильников]</span>. По сути, это тот же адаптивный дизайн, но с обязательным требованием: начинать проектирование интерфейса с мобильной версии <sub>[или можно сказать:</sub> <span class="sub">с самого маленького экрана]</span>.</p>
<hr>
<p>Отвлечемся от статьи на примеры формул:</p>
<ul>
<li>H<sub>2</sub>O и</li>
<li>H<span class="sub">2</span>O<br></li>
<li>sin<sup>2</sup>x и</li>
<li>sin<span class="sup">2</span>x</li>
</ul>
</body>
</html>
CSS
body {
font-size: 16px;
}
h1 {
font-size: 24px;
}
.sub {
}
.sup {
}
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
0
Имитируем теги sup и sub с помощью CSS:
- Для класса
.subдобавьтеvertical-align: sub;. - Для класса
.supдобавьтеvertical-align: super;. - Обоим правилам добавьте
font-size: 12px;.
Сравните «родные» теги индексов с вариантом на CSS.