49 lines
1 KiB
Markdown
49 lines
1 KiB
Markdown
# Семантическое меню
|
||
|
||
[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 ошибки.
|
||
|
||
Как бы вы сверстали меню правильно?
|