Вёрстка блока. Нужен совет!

@phpk · Регистрация: 15.05.2013

Студворк — интернет-сервис помощи студентам

Подскажите пожалуйста, правильно ли я сверстал блок, приведённый на рисунке

Принимаю любую критику, так-как хочется получить опыт от знающих людей!!
Подскажите пожалуйста, что можно переделать, а что заменить?!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta charset="UTF-8">
    <script src="js/jquery-1.11.1.js"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            vertical-align: baseline;
        }
        a {
            text-decoration: none;
        }
        ul {
            list-style: none;
        }
        .cont {
            width: 1020px;
            margin: 0 auto;
        }
        ul {
            width: 100%;
            overflow: hidden;
            position: relative;
            border-bottom: 1px solid #e6e6e6;
            margin: 100px auto;
        }
        li {
            float: left;
            width: 270px;
            height: 82px;
        }
        li:first-child {
            width: 200px;
        }
        ul li:last-child {
            float: right;
        }
        li.s2center {
            display: inline-block;
            margin-left: 110px;
        }
        li > a {
            width: 43px;
            height: 43px;
            text-align: center;
            display: table;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
            background: #666;
            float: left;
        }
        li > a:hover {
            background: #99cc33;
        }
        li:hover {
            border-bottom: 1px solid #99cc33;
        }
        li p {
            float: left;
            margin-top: 0px;
            /*display: inline-block;*/
            font: 33.2px sans-serif;
            margin-left: 33px;
        }
        a > span {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            color: white;
            font: 20px sans-serif;
        }
    </style>
</head>
<body>
 
<div class="cont">
    <ul>
        <li class="l1"><a href="#"><span>1</span></a><p>Simple</p></li>
        <li class="s2center"><a href="#"><span>2</span></a><p>Transparent</p></li>
        <li  class="l2"><a href="#"><span>3</span></a><p>Collaborative</p></li>
    </ul>
</div>
 
</body>
</html>

@Fedor92 · 08.03.2015, 19:34

phpk, судя по рисунку нет... Во-первых на рисунке нет курсора, а значит пункт меню меняет свой цвет вне зависимости от того наведён на него курсор или нет... Во-вторых, вытекает из первого утверждения, выделенный пункт говорит о том, что вы находитесь на активной странице, то есть если Вы находитесь на странице simple(или Transparent или Collaborative ) - пункт меню выделяется зелёным цветом на автомате... И в - третьих, пункт меню как и подчёркивание должно появляться одновременно, то есть зелёным должен быть и кружок и подчёркивание появляется в один момент, а не по одиночке... Да и плюс ко всему геометрия Увас первый пункт немного уходит вправо - хотя на рисунке он стоит впритык к границе...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	08.03.2015, 19:34
	phpk, судя по рисунку нет... Во-первых на рисунке нет курсора, а значит пункт меню меняет свой цвет вне зависимости от того наведён на него курсор или нет... Во-вторых, вытекает из первого утверждения, выделенный пункт говорит о том, что вы находитесь на активной странице, то есть если Вы находитесь на странице simple(или Transparent или Collaborative ) - пункт меню выделяется зелёным цветом на автомате... И в - третьих, пункт меню как и подчёркивание должно появляться одновременно, то есть зелёным должен быть и кружок и подчёркивание появляется в один момент, а не по одиночке... Да и плюс ко всему геометрия Увас первый пункт немного уходит вправо - хотя на рисунке он стоит впритык к границе... 1