init

02-ui/05-widgets/03-widgets-markup/01-semantic-menu/task.md

@@ -0,0 +1,49 @@
+# Семантическое меню
+
+[importance 5]
+
+Посмотрите на вёрстку горизонтального меню.
+
+```html
+<div class="rounded-horizontal-blocks">
+  <div class="item">Главная</div>
+  <div class="vertical-splitter">|</div>
+  <div class="item">Товары</div>
+  <div class="item">Фотографии</div>
+  <div class="item">Контакты</div>
+</div>
+```
+
+
+
+```css
+/*+ hide="Результат со стилями (показать стили)" */
+.rounded-horizontal-blocks .item {
+  float: left;
+  padding: 6px;
+  margin: 0 2px;
+
+  border: 1px solid gray;
+  border-radius: 10px;
+
+  cursor: pointer;
+  font-size: 90%;
+  background: #FFF5EE;
+}
+
+.vertical-splitter {
+  float: left;
+  padding: 6px;
+  margin: 0 2px;
+}
+
+.item:hover {
+  text-decoration: underline;
+}
+```
+
+[iframe src="task" border=1 height=50 edit link]
+
+Что делает эту вёрстку несемантичной? Найдите 3 ошибки.
+
+Как бы вы сверстали меню правильно?