Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.80/5: Рейтинг темы: голосов - 5, средняя оценка - 4.80
10 / 10 / 3
Регистрация: 04.03.2014
Сообщений: 140
1

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

05.05.2015, 00:46. Показов 998. Ответов 1
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Всем привет! Нужна корректировка. Я всегда верстал вот таким вот образом (код приведен ниже), но правильно это или нет, никогда не знал. Что я делаю неправильно и как будет лучше сделать? Для примера взял самую распространенную горизонтальную шапку сайта: лого-меню-поиск.

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. Если кому нетрудно и не жалко — поделитесь своим примером, как вы делаете адаптивную верстку такого плана.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 05.05.2015, 00:46
Ответы с готовыми решениями:

Оцените адаптивную верстку
Всем доброго времени суток! Сверстал свой первый адаптивный сайт. Очень хотелось бы оценки опытных...

как сделать адаптивную верстку?
какие значения выставить для трехколоночного сайта? нужна адаптивная верстка rightbar - левая...

Как сделать адаптивную верстку
Доброе утро. Ситуация: на странице есть блок переменной высоты(красный). А слева от него блоки...

Как просто сделать адаптивную верстку?
Ребята, помогите пожалуйста сделать сайт с адаптивной версткой. Пробовал сделать процентами, так у...

1
0 / 0 / 1
Регистрация: 06.06.2011
Сообщений: 3
06.05.2015, 11:06 2
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) {
 
}
у меня так.
0
06.05.2015, 11:06
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 06.05.2015, 11:06
Помогаю со студенческими работами здесь

Как сделать адаптивную табличную верстку?
Мне всего навсего нужно шрифты уменьшать под 1366,1280,1024,780.Браузеры перечеркивают все свойства...

Оцените пожалуйста Адаптивную верстку Landing Page
Добрый день оцените пожалуйста Адаптивную верстку Landing Page....

Про адаптивную верстку,прикрепленный футер,центрирование
Помогите новичку,куча непонимания. Адаптивная верстка Только начал заниматься этим всем,хочу...

Не понимаю кое-что про адаптивную верстку (Bootstrap)
Вот к примеру дан макет, нужно его сделать адаптивным. в моем представлении адаптивный это: когда...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru