Проверить на корректность адаптивную верстку шапки сайта

@The_Fat_Man · Регистрация: 04.03.2014

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

Всем привет! Нужна корректировка. Я всегда верстал вот таким вот образом (код приведен ниже), но правильно это или нет, никогда не знал. Что я делаю неправильно и как будет лучше сделать? Для примера взял самую распространенную горизонтальную шапку сайта: лого-меню-поиск.

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Пример адаптивной верстки</title>
    
        <link rel="stylesheet" href="css/new_elements.css">
        <link rel="stylesheet" href="css/style.css">
 
        <script src="js/new_elements.js"></script>
    </head>
    
    <body>
        <header>
            <div>
                <a href="#">
                    <img src="img/logo.png" alt="логотип">
                </a>
 
            
                <nav>
                    <ul>
                        <li><a href="#">ПУНКТ 1</a></li>
                        <li><a href="#">ПУНКТ 2</a></li>
                        <li><a href="#">ПУНКТ 3</a></li>
                        <li><a href="#">ПУНКТ 4</a></li>
                        <li><a href="#">ПУНКТ 5</a></li>
                    </ul>
                </nav>
 
                <form role="search">
                    <input type="text" placeholder="Введите текст...">
                </form>
            </div>
        </header>
    </body> 
</html>

Код файла new_elements.css (заставляет понимать старые браузеры новые элементы HTML5)

CSS
1
2
3
4
5
6
7
header, nav, footer, article {
    display: block;
}
 
footer {
    clear: both;
}

new_elements.js (прочитал в одной книжке, что тоже способствует "пониманию" новых элементов)

JavaScript
1
2
3
4
5
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
document.createElement('aside');

style.css

CSS
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
* {
  padding: 0;
  margin: 0;
}
 
body {
    min-width: 980px;
    max-width: 2500px;
    margin: 0 auto;
}
 
/*IMG border for IE*/
 
a img {
    border: none;
}
 
header {
    /*background-color: yellow;*/
    padding: 2em 1.6em 0 1.6em; /* наверное стоит все же использовать проценты */
}
 
header a {
    text-decoration: none;
}
 
header a img {
    float: left;
    margin-right: 2.5em;
}
 
header nav {
    display: inline-block;
}
 
header nav ul li {
    display: inline-block;
    margin-right: 1.5em;
    font-size: 1.5em;
    padding-bottom: 5%;
}
 
header nav ul li a {
    color: #000000;
    font-weight: bold;
}
 
header form {
    float: right;
}
 
header form input {
    padding: 0.4em 5em 0.4em 1em;
}

Добавлено через 2 минуты
P.S. Если кому нетрудно и не жалко — поделитесь своим примером, как вы делаете адаптивную верстку такого плана.

@Pavel2 · 06.05.2015, 11:06

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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
    <title>Modus versus</title>
    <link rel="stylesheet" href="libs/bootstrap/bootstrap-grid-3.3.1.min.css" />
    <link rel="stylesheet" href="libs/font-awesome-4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="css/fonts.css" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/media.css" />
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body data-spy="scroll" data-target=".bs-docs-sidebar" data-twttr-rendered="true">
     <!-- Navbar
    ================================================== -->
    <header class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
              <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">MODUS&nbsp<span>versus</span></a>
            </div>
            <nav class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active">
                        <a href="#">HOME</a>
                    </li>
                    <li>
                        <a href="#">SERVICES</a>
                    </li>
                     <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <b class="caret"></b>PORTFOLIO 
                        </a>
                        <ul class="dropdown-menu ">
                            <li><a href="#">Portfolio 2 column page</a></li>
                            <li><a href="#">Portfolio 2 column page</a></li>
                            <li><a href="#">Portfolio 2 column page</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">BLOG</a>
                    </li>
                    <li>
                        <a href="#">FEATURES</a>
                    </li>
                    <li>
                        <a href="#">CONTACT</a>
                    </li>
                  <li class="lastsearch">
                        <a href="#"><i class="fa fa-search"></i></a>
                    </li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="gallery autoplay items-3">
<div id="item-1" class="control-operator"></div>
<div id="item-2" class="control-operator"></div>
<div id="item-3" class="control-operator"></div>
<figure class="item">
<h1>Item 1</h1>
</figure>
<figure class="item">
<h1>Item 2</h1>
</figure>
<figure class="item">
<h1>Item 3</h1>
</figure>
<div class="controls"> <a href="#item-1" class="control-button">•</a> <a href="#item-2" class="control-button">•</a> <a href="#item-3" class="control-button">•</a> </div>
</div>
<a href="#" class="next"></a>
    <section>
        <!-- begin clients  -->
        <div class="clients">
            <div class="container"><div class="row">
            <h1>Our Happy Clients</h1>
            
            
            <div class="container">
                <div class="row">
                    
                    <div class="col-md-2">
                        <div class="jquery"></div>
                    </div>
                    <div class="col-md-2">
                        <div class="jquery"></div>
                    </div>
                    <div class="col-md-2">
                        <div class="jquery"></div>
                    </div>
                    <div class="col-md-2">
                        <div class="jquery"></div>
                    </div>
                    <div class="col-md-2">
                        <div class="jquery"></div>
                    </div>
                    <div class="col-md-2">
                        <div class="jquery"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end clients -->
    </section>
 
 
 
 
 
 
    <footer>
                            <!-- begin Modusversus  -->
        <div class="Modusversus">
            <h1>MODUS <span>versus</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.<br /> Sed dui lorem, adipiscing in adipiscing et, interdum nec .</p>
            <p>Phone: <span>182 2569 5896</span></p>
            <p>e-mail: <span>info@modu.versus</span></p>
        </div>
        <!-- end Modusversus -->
                    
                        <!-- begin bottommenu  -->
        <div class="bottommenu1">
            <h1>Company</h1>
            <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Terms</a></li>
                    <li><a href="#">Privacy</a></li>
                    <li><a href="#">Testimonials</a></li>
                </ul>   
        </div>
        <!-- end bottommenu -->
                    
                        
            <!-- begin bottommenu1  -->
        <div class="bottommenu2">
            <h1>Community</h1>
            <ul>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Forum</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Newsletter</a></li>
                </ul>   
        </div>
        <!-- end bottommenu1 -->
                    
                        <!-- begin blog  -->
        <div class="blog">
            <h1>from the <span>BLOG</span></h1>
            <div class="p1">
                <p>Lorem ipsum dolor sit amet, consectetur<br /> adipiscing elit</p>
                <p class="gray">26 May, 2013</p>
            </div>
            <div class="p2">
                <p>Lorem ipsum dolor sit amet, consectetur<br /> adipiscing elit</p>
                <p class="gray">26 May, 2013</p>
            </div>
        </div>
        <!-- end blog -->
        
    </footer>
    <div class="bottomF">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <p>2013 ModusVersus</p>
                </div>
                <div class="col-md-6">
                    <div class="soc">
                        <i class="fa fa-facebook"></i>
                        <i class="fa fa-google-plus"></i>
                        <i class="fa fa-google-plus"></i>
                        <i class="fa fa-google-plus"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

media.css

CSS
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
/*==========  Desktop First Method  ==========*/
 
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
 
}
 
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
 
    .sell_right .button {
        margin: 15px auto;
        float: none;
        max-width: 250px;
    }
    .sell_descr {
        text-align: center;
    }
 
    .maian_mnu ul {
        background-color: #3797bf;
        display: none;
        position: absolute;
        width: 100%;
    }
    .maian_mnu ul li {
        display: block;
    }
}
 
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
    .top_links {
        background-color: #585d61;
        display: none;
        margin-top: 15px;
        padding: 14px;
        position: absolute;
        vertical-align: middle;
        width: 100%;
    }
}
 
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
 
}
 
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
 
}
 
 
/*==========  Mobile First Method  ==========*/
 
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
 
}
 
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
 
}
 
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .top_links {
        display: inline-block !important;
    }
}
 
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .maian_mnu ul {
        display: block !important;
    }
}
 
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
 
}

у меня так.

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .