Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Резиновая (адаптивная) верстка сайта на css

Доброе время суток!, в этом разделе я хочу поделиться с вами тем что я знаю о резиновой (адаптивной) верстке сайта.

Что такое резиновая верстка?
Итак, резиновая верстка это когда ваш сайт настроен под разные разрешения экранов. Это делается для удобства ваших посетителей на сайте, с какого устройства они не зайдут - будут видеть красивый и приятный дизайн.

Каким образом она создается?
Существует много разных способов для осуществления адаптивной верстки. Лично я знаю только 2:
  • C помощью использования функции media screen;
  • Задавая блокам ширину в процентах.
  • Я также слышал о способе с использованием Bootstrap, но как - не знаю.
А сейчас я о них вам подробно расскажу.

CSS функция @media screen
@media screen, также называемая media queries - лично я использую именно этот вариант, в моём мнении, он является самым лучшим и простым. А являет он собой вот этот код:
CSS
1
@media screen and (max-width: AAApx) { }
Точнее, это только 1 условие, самое популярное, а в общем существует их 4, но об этом позже, а сейчас давайте разберем куда этот код вставлять и как ним пользоваться.

@media screen and (max-width: AAApx) { } - внутри фигурных скобок будет такой же код как и во всех обычных файлах css (но с некоторыми изменениями):

Во первых, если вы хотите чтобы какой-то блок исчез когда экран становится менее допустим 400px, то надо сбивать стили того блока внутри @media screen, а для этого есть три способа:
  1. Прописать тому блоку display: none; (простой но не лучший вариант, бывают проблемы);
  2. Прописывать каждому блоку в том же блоке и всем функциям по 0 или none (что получается, извиняюсь за выражение, тупо, долго и все равно что display: none);
  3. А лучше всего, прописать блоку position: absolute; и left: -4000px; (чтобы убрать блок за экран), и таким способом он вооообще никак не сможет помешать дизайну вашего сайта.
Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
@media screen and (max-width: 400px) {
    #block{
        position: absolute;
        left: -4000px;
     }
}

Во вторых, если вам нужно какой-то блок поменять, то вы копируете его стили из изначального кода css опять таки внутрь @media screen и изменяете его стили:
Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
8
    #block{
        background-color: white;
     }
@media screen and (max-width: 400px) {
    #block{
        background-color: blue;     /*тоесть, если ширина экрана устройства будет равна или менее 400px, то фоновый цвет блока будет синим*/
     }
}

В третьих, самый важный момент! - если вам нужно добавить блок, то вам нужно будет его добавить в обычный html код. А в изначальном CSS коде, вам его нужно будет сбить, так как я уже раньше упомянул, с помощью позиционирования его за экран или display: none. А уже в @media screen вы задаете ему стили и, обязательно, не забудьте поместить его обратно на экран =)
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
Начну с боди
    <body>
            <div id="header">
            </div>
            <div id="footer">
            </div>
    </body>
При ширине экрана равной или менее 400px, у меня появится подвал(просто пример)
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    #header{
        height: 50px;
        width: 100%;
        background-color: blue;
     }
    #footer{
        height: 50px;
        width: 100%;
        background-color: red;
        position: relative;
        bottom: 0;
        display: none;
     }
@media screen and (max-width: 400px) {
    #footer{
        height: 50px;
        width: 100%;
        background-color: blue;
        position: relative;
        bottom: 0;
        display: block; /*В этом случае я использовал display: none и block; по скольку ширина подвала у нас 100%*/
     }
}


Так, мы разобрались как работает media screen (media queries). А теперь можно и разобрать все остальные детали. Давайте начнем с условий:
CSS
1
2
3
@media screen and (min-width: XXXpx) { }
@media screen and (min-width: XXXpx) and (max-width: YYYpx) { }
@media screen and (max-device-width: XXXpx) { }
эти условия делают такие же чудеса как и первое, но вот разница:
  • @media screen and (min-width: XXXpx) { } - это условие позволяет задавать стили для экранов больше или равным к заданной вами ширине(противоположное max-width).
  • @media screen and (min-width: XXXpx) and (max-width: YYYpx) { } - это условие позволяет вам задавать стили для экранов как я называю их "от и до" =) ширины заданной вами. Тоесть, вы задаете минимальную и максимальную ширину экрана.
  • @media screen and (max-device-width: XXXpx) { } - его я не совсем понимаю как использовать, если знаете, пожалуйста поделитесь.
И последнее о media queries: ее также можно задать с помощью html, тоесть внутри <head></head> вы можете подключить стили media screen css также как и любой другой css файл. Вот пример:
Кликните здесь для просмотра всего текста
HTML5
1
2
3
4
5
6
7
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> - Для корректной работы стилей
    <link href="css/style1.css" type="text/css" rel="stylesheet" media="screen and (min-width: 400px)">
    <link href="css/style2.css" type="text/css" rel="stylesheet" media="screen and (max-width: 399px)">
    <title>Тестовая страница</title>
</head>

тоесть это означает что если ширина экрана будет больше или равна 400px, то подключить стили1 css, а если менее 400px то подключить стили2 css. А, и кстати, все IE до 8 включительно не поддерживают media queries. Это можно исправить с помощью JQuery, но это уже тема раздела по JQuery.

Ширина блоков в процентах
И несколько слов о ширине в процентах. Ширину в процентах не советую использовать во время создания адаптивной верстки, почему? Потому что если кто-то зайдет на ваш сайт допустим с очень маленького устройства посмотреть вашу галерею у которой ширина будет допустим 80% от ширины экрана, то они ваших фотографий даже не увидят, так как ваши фото могут быть в одном ряду и все они сожмутся до очень маленьких размеров, а с помощью media queries, вы можете поставить их в горизонтальное положение а не вертикальное, чтобы их размеры были больше. А если кто-то зайдет с очень большого экрана то ваши фото могут растянуться до очень больших размеров и в итоге будут выглядеть не качественно. А также, чтобы вы знали, когда вы задаете ширину в процентах, то эти проценты, это проценты ширины по их родительскому блоку.

Вот, вроде бы и все, если кто может еще чем-то поделится из своих знаний и опыта по созданию адаптивной верстки, пожалуйста, делитесь =)

Ответ: может поможет
пример создание адаптивной страницы сайта
Вопрос: Адаптивная верстка сайта

Ребят помогите я делаю вёрстку сайта, мне нужно сделать адаптивность шаблона.
Я прописал в css
CSS
1
2
3
4
.contener{
    width: 2026px;
    margin: 0 auto;
}
Теперь, при уменьшение страниц, шаблон уменьшается, но мне нужно, чтобы при уменьшение или увеличение все элементы оставались на месте.

Вот скриншот шаблона, при уменьшении
Ответ: mrtoxas,
Код html
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
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <link rel='stylesheet' type='text/css' href='style.css'>
        <title>Шаблон</title>
    </head>
    <body>
    <div class="contener">
        <div class="heder"> <!--Шапка сайта-->
            <div class="clear"></div>
                <div class = "logo_text"><img src = "img/logo.png"><h1>Protecly</h1></div> <!--Логотип и название-->
        <div class="clear"></div>
            <div class = "menu"> <!--Меню сайта-->
                <ul>
                    <li>Product</li>
                    <li>Industries</li>
                    <li>Pricing</li>
                    <li>Features</li>
                </ul>
            </div>
        <div class="clear"></div>
            <div class = "contact">
                <div class = "phone"><img src = "img/phone.png"></div> <!--Иконка телефона-->
                <div class = "phoneText"><p>+1 (888) 675-4998</p> <!--Абзац--></div> 
            </div>
        <div class="clear"></div>
            <div class = "info">
                <h1>Protect Your sensitive <br> <!--Устанавливает перевод строки--> files across cloud services.</h1> <!--Заголовок-->
            </div>
            <div class = "knopka">
                <h1>Try it out for free !</h1> <!--Загаловок-->
            </div>
            <div class = "video">
                <div class = "text"><p>Watch the Video</p><!--Абзац--></div>
                <div class = "videokp"><img src = "img/video.png"></div>
            </div>
        </div>
        <div class="clear"></div>
            <div class = "content"> <!--Контент сайта-->
            <div class = "comp"> <!--Логотипы которые находятся в content-->
                <div class="clear"></div>       
                    <div class = "imgOne"><img src = "img/logo/pin.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgTwo"><img src = "img/logo/design.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgThree"><img src = "img/logo/dis.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgFour"><img src = "img/logo/fresh.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgFive"><img src = "img/logo/new.png"></div> <!--Иконки логотипа-->
                <div class="clear"></div>
                    <div class = "imgSix"><img src = "img/logo/lout.png"></div> <!--Иконки логотипа-->
            </div>
        <div class = "slide">
        <div class = "textslider"><h1>Lorem ipsum sit Amet Dolor</h1><!--Заголовок--></div>
        <div class = "slde_info">
            <!--Абзац-->
            <p>We’re all about making sure you have a great experience with our software.</p> <!--Заголовок-->
            <br><!--Устанавливает перевод строки-->
            <p>Our real, live customer support team will go out of their way to help you—by phone or by email.</p><!--Заголовок-->
            <br><!--Устанавливает перевод строки-->
            <p>For free. We also have free video tutorials, forums, training webinars, whitepapers,</p><!--Устанавливает перевод строки-->
            <br><!--Устанавливает перевод строки-->
            <p>and a great knowledgebase you can access 24/7.</p><!--Заголовок-->
            </div>
        <div class = "slide_cnopka">
            <div class = "knopka_odin"><img src = "img/slide/1.png"></div>
                <div class="clear"></div>
                <div class = "knopka_dva"><img src = "img/slide/2.png"></div>
            </div>
            <div class = "text_dva">
                <p>Alice Anderson,99designs.com</p><!--Заголовок-->
            </div>
            <br><br><br>
            <hr>
        </div>
        <div class = "content2">
            <div = "zagolovok"><h1 style ="text-align: center;">Protectly protects your sensitive files.</h1><!--Загаловок, находится по середине--></div>
            <div class = "textcontent">
                <p>We protect your sensitive files across all popular cloud services and devices, by encrypting them,</p><!--Это абзац-->
                <br> <!--Устанавливает перевод строки-->
                <p>controlling access to them and providing an audit trail for all changes to your files.</p><!--Эьто абзац-->
            </div>
            <div class = "info_img">
                <div class = "info_img"><p><img src = "img/info_img.png"></p> <!--Абзац--></div> 
            </div>
    <div class="clear"></div>
                <div class = "info_text">
                    <div class = "infotextOne"><h1>Compliant file Sharing</h1> <!--Загаловог--></div>
                    <div class = "infotextTwo"><h1>Endpoint Security</h1> <!--Загаловок--></div>
                    <div class = "infotextThree"><h1>Access Control</h1> <!--Загаловок--></div>
            </div>
        </div>
        <br><br><br><br><br><br><br><br> <!--Устанавливаети перевод строки-->
        </div>
        <div class = "footer"> <!--Низ сайта-->
            <div class="clear"></div>
                <div class ="blog">
                    <div class ="blogOne">
                        <div>Protectly</div> <!--Блочный элемент-->
                        <br> <!--Устанавливает перевод строки-->
                        <div>Getting Started</div>  <!--Блочный элемент-->
                        <div>Enterprise Features</div>  <!--Блочный элемент-->
                        <div>Why Us?</div>  <!--Блочный элемент-->
                        <div>Solution</div>  <!--Блочный элемент-->
                        <div>Pricing</div>  <!--Блочный элемент-->
                    </div>
                <div class="clear"></div>
                    <div class ="blogTwo">
                        <div>About Us</div>  <!--Блочный элемент-->
                        <br> <!--Устанавливает перевод строки-->
                        <div>Our Story</div>  <!--Блочный элемент-->
                        <div>Our Leadership</div>  <!--Блочный элемент-->
                        <div>Our Investors</div>  <!--Блочный элемент-->
                        <div>Jobs</div>  <!--Блочный элемент-->
                    </div>
                <div class="clear"></div>
                    <div class ="blogThree">
                        <div>Support</div> <!--Блочный элемент-->
                        <br> <!--Устанавливает перевод строки-->
                        <div>Help</div>  <!--Блочный элемент-->
                        <div>Privacy Policy</div> <!--Блочный элемент-->
                        <div>Terms of Use</div> <!--Блочный элемент-->
                    </div>
            <div class ="kontakt">
                <div class ="social"><p><img src = "img/social.png"></p></div>          
                <div class ="phoneThree"><img src = "img/phone2.png"><p>+1 (888) 675-4998</p></div>
            </div>  
        <div class="clear"></div>           
            <div class ="mail">
                <div class ="img_mail"><img src = "img/mail.png"></div> <!--Блочный элемент-->
                <div class ="text_mail"><p>info@mail.com</p> <!--Абзац--></div> <!--Блочный элемент-->
            </div>
        <div class="clear"></div>           
            <div class = "text_niz"><p>All rights reserved. Posted by Dospel & GanjaParker 2013</p> <!--Абзац--></div>
            </div>
        </div>
    </div>
    </body>
</html>
Код 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
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
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
*{
    margin: 0;
    padding: 0; 
}
 
.clear{clear:both;}
 
.contener{
    width: 2026px;
    margin: 0 auto;
}
 
 
img {
    max-width: 100%;
    height: auto;
}
 
.heder{                                 /*Шапка сайта*/
    width: 100%;
    height: 660px;
    margin-top: -20px;
    padding-top: 20px;  /*Устанавливает значение полей вокруг содержимого элемента.*/
    background: url(img/banner.jpg);  /*Изображение в формате jpg*/
}
 
.logo_text h1{                  /*Текст в логотипе, с заголовком*/
    color: #fff;
    margin-left: 11%;  /*Устанавливает величину отступа от левого края элемента*/
    font-size: 24px;  /*Размер шрифта элемента*/
    margin-top: -49px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.logo_text img{             /*Картинка логотипа*/
    margin-top: 20px;
    margin-left: 140px; /*Устанавливает величину отступа от левого края элемента*/
}
 
.menu{                  /*Меню сайта*/
    float: left;
    margin-left: 30%; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: 40px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
.menu li{                   /*Меню сайта, пишится маркированным спископ*/
    float: left;
    margin-top: -20px;
    margin-right: 40px; /*Устанавливает величину отступа от правого края элемента.*/
    list-style: none;
    color: #fff; /*Цвет*/
    font-size: 25px; /*Размер шрифта элемента*/
}
 
.phone img{             /*Картинка*/
    margin-top: -25px; /*Устанавливает величину отступа от верхнего края элемента.*/
    float: right;   /*Определяет по какой будет выравниваться элемент*/
    margin-right: 40%; /*Устанавливает величину отступа от правого края элемента.*/
}
.phoneText{         /*Текст, который пишется рядом с картинкой. Прописан в классе ".phone img"*/
    float: left; /*Устанавливает величину отступа от левого края элемента*/
    margin-left: 60%; /*Устанавливает величину отступа от левого края элемента.*/
    margin-top: -25px; /*Устанавливает величину отступа от верхнего края элемента.*/
    color: #fff; /*Цвет*/
    font-size: 20px; /*Размер шрифта элемента*/
}
    
.info h1{           /*Пишится текст, ниже меню*/
    margin-left: 220px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: 150px; /*Устанавливает величину отступа от верхнего края элемента.*/
    color: #fff;
}
 
.knopka h1{     /*Кнопка с заголовком, и цветом где прописан текст*/
    color: #fff;
    margin-top: 20px; /*Устанавливает величину отступа от верхнего края элемента.*/
    margin-left: 220px; /*Устанавливает величину отступа от левого края элемента*/
    font-size: 15px; /*Размер шрифта элемента*/
    width: 150px;
    height: 25px;
    background: #1f6ca0;
    padding-left: 20px;  /*Устанавливает значение поля от левого края содержимого элемента.*/
    padding-top: 5px;  /*Устанавливает значение полей вокруг содержимого элемента.*/
}
 
.text{
    margin-left: 462px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -25px; /*Устанавливает величину отступа от верхнего края элемента.*/
    color: #fff;        /*Устанавливает цвет*/
    font-size: 16px; /*Размер шрифта элемента*/
}
 
.videokp{
    margin-left: 430px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -24px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.content{
    width: 56%; 
    margin: 0 auto; 
    background: #efb7c6;
    margin-top: 10px /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
 
 
.comp{                      /*Картинки логотипов*/
    margin-top: 20px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
 
 
.imgOne{                /*Картинка логотипа 1*/
    padding-top: -10px;
}
 
.imgTwo{            /*Картинка логотипа 2*/
    margin-left: 140px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -60px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.imgThree{              /*Картинка логотипа 3*/
    margin-left: 300px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -45px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.imgFour{           /*Картинка логотипа 4*/
    margin-left: 490px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -60px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.imgFive{           /*Картинка логотипа 5*/
    margin-left: 700px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -80px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.imgSix{            /*Картинка логотипа 6*/
    margin-left: 910px; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -75px; /*Устанавливает величину отступа от верхнего края элемента.*/
}   
 
.textslider h1 {
    text-align:  center; /*Текст выравнивается по середине*/
    margin-top: 40px; /*Устанавливает величину отступа от верхнего края элемента.*/
    font-size: 20px; /*Размер шрифта элемента*/
}
 
.slde_info p{
    text-align: center; /*Выравнивает текст по центру*/
    margin-top: 10px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.knopka_odin{
    margin-top: -150px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.knopka_dva{
    float: right;
    margin-top: -56px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.text_dva{
    text-align: center; /*Выравнивает текст по центру*/
    margin-top: 140px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.content2 {
    margin-top: 50px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
 
 
.textcontent{
    margin-top: 50px; /*Устанавливает величину отступа от верхнего края элемента.*/
    text-align: center; /*Текст выравнивается по середине*/
}
 
.info_img{
    margin-top: 40px; /*Устанавливает величину отступа от верхнего края элемента.*/
    text-align: center; /*Текст выравнивается по середине*/
}
 
.infotextOne h1{
    margin-left: 15%;  /*Устанавливает величину отступа от левого края элемента.*/
    font-size: 15px; /*Размер шрифта элемента*/
}
 
.infotextTwo h1{
    text-align: center; /*Текст выравнивается по середине*/
    font-size: 15px; /*Размер шрифта элемента*/
    margin-top: -18px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.infotextThree h1{
    margin-left: 75%; /*Устанавливает величину отступа от левого края элемента*/
    font-size: 15px; /*Размер шрифта элемента*/
    margin-top: -18px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
 
.footer{                    /*Низ сайта*/
    padding: 100px;  /*Устанавливает значение полей вокруг содержимого элемента.*/
    background: #3498db; 
    color: #fff; 
     
}
 
.blog{
    margin-top: 0; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.blogOne{
    margin-left: 27%; /*Устанавливает величину отступа от левого края элемента*/
}
 
.blogTwo{
    margin-left: 40%; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -120px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.blogThree{
    margin-left: 52%; /*Устанавливает величину отступа от левого края элемента*/
    margin-top: -105px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.social p{
    float: right;
    margin-top: -90px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.phoneThree img{
    float:  right; /*Определяет по какой будет выравниваться элемент*/
    margin-right: 160px;
    margin-top: -20px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
 
.phoneThree p{
    float: right; /*Определяет по какой будет выравниваться элемент*/
    
}
 
.img_mail{
    float: right; /*Определяет по какой будет выравниваться элемент*/
    margin-right: 190px;
}
 
.text_mail{
    float: right; /*Определяет по какой будет выравниваться элемент*/
    margin-left: 90px;
}
 
.text_niz{
    float: right; /*Определяет по какой будет выравниваться элемент*/
    margin-top: 40px; /*Устанавливает величину отступа от верхнего края элемента.*/
}
Вопрос: Набираю портфолио по верстке сайтов

Здравствуйте, дорогие друзья. 
Решил начать набирать портфолио по верстке сайтов. Предлагаю создать сайт любой тематики по вашему дизайну (можно по описанию) за просто так. Знаю HTML,HTML5,CSS,CSS3,PHP,JS(слабо). Примеров полноценных нет, поэтому и создана эта тема. 

Контакты: 
Skype - pahan0852 
Mail - sysanov@mail.ru 
Gmail - sysanov0852@gmail.com 
Vk - vk.com/sysanov 
Ну и личка на форуме.
Ответ:
TiiRiiX, т.е. ты просто решил верстать всем сайты просто так? Что-то непонятно  :-D 
Цитата

Знаю ... HTML5 .... CSS3 .....
Сделай адаптивный шаблон простого новостного сайта 

Вопрос: Где можно найти макеты для верстки сайтов?

Где можно найти макеты для верстки сайтов?Просто с целью потренироваться.
Ответ:
В поисковике ввести запрос) много сайтов с готовыми макетами.
Вопрос: Несколько вопросов по верстке сайта

Сейчас делается верстка для сайта по сантехнике. Я выступаю в роли заказчика.

Ссылка на сверстанные страницы:

Появилось несколько вопросов по верстки сайта. Ответьте на них, пожалуйста:

1) Под какие браузеры и какие их версии стоит делать кроссбраузерную верстку?

2) При ввертке был создан резиновый дизайн. Но сейчас от него больше проблем, чем пользы, так некоторые страницы в разных размерах отображаются некорректно и придется вносить правки. В связи с этим вопрос: можно ли на этом отключить резиновый дизайн для сайта?

3) Если настраивать верстку под мобильные устройства, то под какие? Ведь их много от смартфонов до планшетов, и всех устройств разные размеры экранов. Я заходил в инструмент Google Chrome Developer Tools, там много устройств, не понятно какие выбирать для проверки:

4) При открытии сайта на браузере компьютера будут появляться всплывающие окна. Можно ли сделать, чтобы на мобильных устройствах не появлялись всплывающие окна, чтобы они не загораживали экран?

5) При верстке 18 страниц, скрипты должны находится на каждой странице или они должны хранится в отдельной папке, а страницы должны ссылаться на скрипты, запрашивая их из папки при необходимости?

6) Плохая верстка (если специалистом по верстке были допущены какие-то ошибки при верстке) как-то влияет на SEO продвижение?
Ответ:
Zuldek писал(а):Ошибаетесь если полагаете что этим исчерпываются возможные ошибки.

Чего?
Хыиуду писал(а):Но IE выше них :)

Напалеон. =)
Запарил он.
Ganzal писал(а):да-да. перед законом все равны. но кто-то ровнее =) из-за этого приходится верстать "кроссбраузерно" хотя сама верста под некоторый стандарт уже обязана работать одинаково на клиентах, заявляющих что они поддерживают этот стандарт.

Кроме ие все остальное работает правильно.
Ну покрайне мере Амиго, форса, гугл, сафари, не встречаю проблем с ними.
А на ие ниже 10ки, положил болт. От них нет смысла.
Вопрос: Иконки соц.сетей в верстке сайта

Доброго вечер!
Есть верстка сайта,в файле index.html есть строки:
HTML5
1
2
3
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
итд
Пример на скрине. Подскажите откуда берутся эти иконки? Картинок не нашел в папке верстки..
Ответ: mrtoxas, дело не в том сколько он весит, а в решении, как таковом... Спасибо за дополнение, но на моей практике данный генератор шрифтов, не лучшее решение и если говорить о создании шрифтов, то их лучше создавать их через специализированные программы, которые предназначены для их создания, не доверяясь слепо генераторам... К тому же Font Awesome можно подключить удалённо, при этом не нагружая сервер...
Вопрос: Уроки по верстке сайтов для новичков

Всем привет! Вот хочу поделиться нашел классный сайт где много уроков по верстке сайтов
Ответ:
Куда еще меньше? И так до 8 ккал. сократил рацион. Всего 2 пачки пельменей на завтрак :D
Вопрос: Вёрстка сайта по БУС

Здравствуйте! Что такое Что такое верстка сайта по БУС? Подскажите пожалуйста.
Ответ: Спасибо всем за ответы!
Вопрос: Студия для профессиональной визуальной верстки

Здравствуйте. Решил в одного разработать программу для визуальной верстки сайтов, которая будет подсказывать распространенные ошибки, к примеру когда не работает высота в процентах или вертикальное выравнивание. Набравшись опыта за все последние годы я принялся реализовывать то, за что давно уже хотел взяться.  На деле оказалось очень непросто разработать задуманное, но к настоящему времени я уже сделал все самые необходимые первостепенные функции, с помощью которых можно сверстать сложные по структуре резиновые макеты, вот самые интересные из них:
Скрытый текст

  • Интеллектуальный помощник - Автоматически трансформирует структуру HTML для обеспечения работы некоторых CSS свойств, а в случае необходимости участия пользователя это подскажет вам, как исправить распространенные ошибки; 
  • HTML подобная древовидная структура в диспетчере элементов. Вы сможете создавать сложную по дизайну и структуре разметку страницы; 
  • Базовая поддержка CSS классов - редактирование стилей сразу у нескольких элементов; 
  • Тонкая настройка стилей, почти все изменения применяются в режиме реального времени; 
  • Инструменты редактирования оптимизированы для планшетов на iOS и Android; 
  • В SHOWYWeb Studio интегрированы бесплатные шрифты Google Fonts, вы можете удобно подбирать шрифты простым наведением или с помощью клавиш; 
  • Проект экспортируется в файлы HTML, CSS и JavaScript. В дальнейшем вы их можете использовать как статическую страницу или вручную преобразовать в шаблоны для CMS систем; 
  • Экспортируемые результаты совместимы почти со всеми популярными браузерами, выпущенными после 2010 года, включая Internet Explorer 9; 
  • Экспортируемый код CSS структурно оптимизируется для экономии трафика; 
  • Загружайте только большие варианты изображений, SHOWYWeb Studio автоматически подготовит оптимальные варианты при экспорте проекта; 
  • Импорт видео с сервисов YouTube и Vimeo, вставка произвольного кода HTML в элементы типа "Текст и мультимедиа"; 
  • Локальное сохранение проектов;
 

 




Дальше в первую очередь планирую реализовать следующее:
Скрытый текст
 

  • Регистрация аккаунтов в SHOWYWeb Studio; 
  • Интеграция с облачными хранилищами; 
  • Экспорт проекта в изображение формата JPEG; 
  • Кастомные автообновляемые файлы CSS и JavaScript; 
  • Автосохранение; 
  • Локализация для английского языка; 
  • Поддержка псевдоклассов CSS; 
  • Интеграция бесплатных векторных иконок Font Awesome; 
  • Поддержка SVG изображений; 
  • CSS градиенты; 
  • Поддержка значения "inherit" в стилизующих свойствах для возможности унаследования свойств от родительских элементов; 
  • Дополнительные свойства для стилизации шрифта; 
  • Настройка свойств шрифта у родительских элементов для возможности автоматического унаследования; 
  • Классы CSS с выборочными свойствами; 
  • 3D и другие 2D трансформации (пока доступно только 2D вращение); 
  • Анимационные переходы CSS; 
  • CSS media queries; 
  • Поддержка HTML5 элементов; 
  • Интеграция дополнительных библиотек шрифтов; 
  • Реализация функций для отмены и повтора действий;
  • Документация, видео уроки и типовые проекты (Имея базовые знания верстки достаточно просто разобраться методом проб и ошибок в русскоязычном интерфейсе);
 

Протестировать можно  (Студия находится в Beta тестировании и размещается далеко не на самом мощном VPS, поэтому рекомендую чаще сохранять ваш проект).

Хотелось бы услышать: вашу критику, пожелания и найденные баги.

Это сообщение отредактировал(а) showyweb - 29.1.2017, 00:43
Ответ:
Здравствуйте. Решил в одного разработать программу для визуальной верстки сайтов, которая будет подсказывать распространенные ошибки, к примеру когда не работает высота в процентах или вертикальное выравнивание. Набравшись опыта за все последние годы я принялся реализовывать то, за что давно уже хотел взяться.  На деле оказалось очень непросто разработать задуманное, но к настоящему времени я уже сделал все самые необходимые первостепенные функции, с помощью которых можно сверстать сложные по структуре резиновые макеты, вот самые интересные из них:
Скрытый текст

  • Интеллектуальный помощник - Автоматически трансформирует структуру HTML для обеспечения работы некоторых CSS свойств, а в случае необходимости участия пользователя это подскажет вам, как исправить распространенные ошибки; 
  • HTML подобная древовидная структура в диспетчере элементов. Вы сможете создавать сложную по дизайну и структуре разметку страницы; 
  • Базовая поддержка CSS классов - редактирование стилей сразу у нескольких элементов; 
  • Тонкая настройка стилей, почти все изменения применяются в режиме реального времени; 
  • Инструменты редактирования оптимизированы для планшетов на iOS и Android; 
  • В SHOWYWeb Studio интегрированы бесплатные шрифты Google Fonts, вы можете удобно подбирать шрифты простым наведением или с помощью клавиш; 
  • Проект экспортируется в файлы HTML, CSS и JavaScript. В дальнейшем вы их можете использовать как статическую страницу или вручную преобразовать в шаблоны для CMS систем; 
  • Экспортируемые результаты совместимы почти со всеми популярными браузерами, выпущенными после 2010 года, включая Internet Explorer 9; 
  • Экспортируемый код CSS структурно оптимизируется для экономии трафика; 
  • Загружайте только большие варианты изображений, SHOWYWeb Studio автоматически подготовит оптимальные варианты при экспорте проекта; 
  • Импорт видео с сервисов YouTube и Vimeo, вставка произвольного кода HTML в элементы типа "Текст и мультимедиа"; 
  • Локальное сохранение проектов;
 

 




Дальше в первую очередь планирую реализовать следующее:
Скрытый текст
 

  • Регистрация аккаунтов в SHOWYWeb Studio; 
  • Интеграция с облачными хранилищами; 
  • Экспорт проекта в изображение формата JPEG; 
  • Кастомные автообновляемые файлы CSS и JavaScript; 
  • Автосохранение; 
  • Локализация для английского языка; 
  • Поддержка псевдоклассов CSS; 
  • Интеграция бесплатных векторных иконок Font Awesome; 
  • Поддержка SVG изображений; 
  • CSS градиенты; 
  • Поддержка значения "inherit" в стилизующих свойствах для возможности унаследования свойств от родительских элементов; 
  • Дополнительные свойства для стилизации шрифта; 
  • Настройка свойств шрифта у родительских элементов для возможности автоматического унаследования; 
  • Классы CSS с выборочными свойствами; 
  • 3D и другие 2D трансформации (пока доступно только 2D вращение); 
  • Анимационные переходы CSS; 
  • CSS media queries; 
  • Поддержка HTML5 элементов; 
  • Интеграция дополнительных библиотек шрифтов; 
  • Реализация функций для отмены и повтора действий;
  • Документация, видео уроки и типовые проекты (Имея базовые знания верстки достаточно просто разобраться методом проб и ошибок в русскоязычном интерфейсе);
 

Протестировать можно  (Студия находится в Beta тестировании и размещается далеко не на самом мощном VPS, поэтому рекомендую чаще сохранять ваш проект).

Хотелось бы услышать: вашу критику, пожелания и найденные баги.

Это сообщение отредактировал(а) showyweb - 29.1.2017, 00:43
Вопрос: Подскажите по верстке сайта игровых автоматов

Пожалуйста, помогите мне с сайтом! Это онлайн игровые автоматы  , т.е. на сайте есть флеш игры, но мне нужно мнение по юзабилити, верстке и дизайну. люди знающие, пожалуйста, помогите и подскажите, что оставить, что убрать? потому что за заказ такой взялась впервые и хочу, чтоб заказчик был доволен! заранее спасибо!
Ответ:
Пожалуйста, помогите мне с сайтом! Это онлайн игровые автоматы  , т.е. на сайте есть флеш игры, но мне нужно мнение по юзабилити, верстке и дизайну. люди знающие, пожалуйста, помогите и подскажите, что оставить, что убрать? потому что за заказ такой взялась впервые и хочу, чтоб заказчик был доволен! заранее спасибо!