Форум программистов, компьютерный форум, киберфорум
Web-дизайн
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > Web-мастеринг > Web-дизайн
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/9: Рейтинг темы: голосов - 9, средняя оценка - 4.67
0 / 0 / 1
Регистрация: 24.09.2017
Сообщений: 58
1

Оцените мою вёрстку по 10-ти бальной шкале

19.09.2018, 19:33. Показов 1805. Ответов 6
Метки вёрстка, обучение. (Все метки)
Author24 — интернет-сервис помощи студентам
Учусь верстать уже примерно неделю. Хотел бы узнать есть ли у меня уже хоть какие то основы для продолжения обучения. Ещё я не особо понимаю как мне учиться дальше. Например с 0 я учился на курсах, теперь смотрю многочасовые видео где люди верстают страницы с 0 и всё объясняют.Ну а в рамках этой страницы не могу понять где взять мини картинки в кружках.Верстал по этому psd макету https://psdfreebies.com/psd/cr... -free-psd/ . Фотографий с макета не было
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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css1/maket_css.css" rel="stylesheet" type="text/css"/>
<title>Документ без названия</title>
</head>
    <body>
 
        <div id="pattern">
            <div id="menu">
                <ul class="inline">
                
                    <li><a href="https://jut.su/onepiece/" target="_blank">Home</a></li>
                    <li><a href="https://jut.su/onepiece/" target="_blank">Pages</a></li>
                    <li><a href="https://jut.su/onepiece/" target="_blank">Features</a></li>
                    <li><a href="https://jut.su/onepiece/" target="_blank">Extensions</a></li>
                    <li><a href="https://jut.su/onepiece/" target="_blank">Tutorials</a></li>
                    <li><a href="https://jut.su/onepiece/" target="_blank">Contact us</a></li>
                
                </ul>
                
            </div>
            
                <div class="button1">
                    <a href="#down"><div class="none">></div></a>
                </div>
            
            <div id="header">               
                <p class="header1">CREATIVES</p>
                <p class="header2">POWER BY PSDFREEBIES.COM</p>             
            </div>
            
        
            
        </div>  
            
        <div id="content1">
            
            <div class="text1">
                we are an awesome agency
            </div>
            <div class="center">
                <div class="icon1">
                    <div class="krug">+</div>
                    <div class="texter">FEATURE ONE</div>
                    <div class="texter2">fasdfasdfsadfsadfsadfsadfsdsadf</br>fasdfasdfsadfsadfsadfsadfsdsadf</br>fasdfasdfsadfsadfsadfsadfsdsadf</br></div>
                </div>
            
                <div class="icon2">
                    <div class="krug">+</div>
                    <div class="texter">FEATURE ONE</div>
                    <div class="texter2">fasdfasdfsadfsadfsadfsadfsdsadf</br>fasdfasdfsadfsadfsadfsadfsdsadf</br>fasdfasdfsadfsadfsadfsadfsdsadf</br></div>
                </div>
            
                    <div class="icon3">
                        <div class="krug">+</div>
                        <div class="texter">FEATURE ONE</div>
                        <div class="texter2">fasdfasdfsadfsadfsadfsadfsdsadf</br>fasdfasdfsadfsadfsadfsadfsdsadf</br>fasdfasdfsadfsadfsadfsadfsdsadf</br></div>
                    </div>
            
                        <div class="icon4">
                            <div class="krug">+</div>
                            <div class="texter">FEATURE ONE</div>
                            <div class="texter2">fasdfasdfsadfsadfsadfsadfsdsadf</br>fasdfasdfsadfsadfsadfsadfsdsadf</br>fasdfasdfsadfsadfsadfsadfsdsadf</br></div>
                        </div>
            </div>
        </div>  
        
        <div class="block1">
            <div class="pp">
                <div class="p1">Jan 4, 2016  \   In Culture</div>
                <div class="p2">AKITA INU DOG</div>
                <div class="p3">sdfasfdfgfdsgdfsgdf gdsfgdsf gdsf gdsf gdsfg dsf gdsf gsdafdsafsadfsfsfa</br>
                        dfs gsdg dsg sdg sd fgdsf gsdfg dsf gdsfg dsf gdsf gdsf gsdg </br>
                        fghfdhffd sd hdsf gsdf gdsf gdsf gdfs gsdf dfs gdsf gsdfg gs hg</br>
                        dfg sdfgdfd g dfsf gsdf gdsf fg sd gsfdfgdsfgdfgdfgfdgsdfgds fsdf gdsf</br></div>
                <div class="p4">sdfasfdfgfdsgdfsgdf gdsfgdsf gdsf gdsf gdsfg dsf gdsf gsdafdsafsadfsfsfa</br>
                        dfs gsdg dsg sdg sd fgdsf gsdfg dsf gdsfg dsf gdsf gdsf gsdg </br></div>
            </div>
        </div>
        
                <div class="block2">
            
            
        
                </div>
        
        <div class="block3">
        
        
        
        </div>
        
                <div class="block4">
        
        <div class="pp">
                <div class="p1">Jan 4, 2016  \   In Culture</div>
                <div class="p2">AKITA INU DOG</div>
                <div class="p3">sdfasfdfgfdsgdfsgdf gdsfgdsf gdsf gdsf gdsfg dsf gdsf gsdafdsafsadfsfsfa</br>
                        dfs gsdg dsg sdg sd fgdsf gsdfg dsf gdsfg dsf gdsf gdsf gsdg </br>
                        fghfdhffd sd hdsf gsdf gdsf gdsf gdfs gsdf dfs gdsf gsdfg gs hg</br>
                        dfg sdfgdfd g dfsf gsdf gdsf fg sd gsfdfgdsfgdfgdfgfdgsdfgds fsdf gdsf</br></div>
                <div class="p4">sdfasfdfgfdsgdfsgdf gdsfgdsf gdsf gdsf gdsfg dsf gdsf gsdafdsafsadfsfsfa</br>
                        dfs gsdg dsg sdg sd fgdsf gsdfg dsf gdsfg dsf gdsf gdsf gsdg </br></div>
            </div>
        
                </div>
        
        <div class="content2">
        
        
        
        </div>
        
        <div class="content3">
        
        
        
        </div>
        
        <div class="content4">
        
        
        
        </div>
        
        <div class="content5">
        
        
        
        </div>
        
        <div class="content6">
        
        
        
        </div>
        
        <div class="content7">
        
        
        
        </div>
        
        <div class="footer">
        
        <a name="down">dfg</a>
        
        </div>
    </body>
</html>
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

body{
    background-color:#262626;
    padding:50px 66px;
    font-family: sans-serif;
    
}
 
a{
    text-decoration:none;
}
 
#pattern{
    height:823px;
    background-image:url(../image/header-bg.jpg);
    position:relative;
}
 
#menu{
    height:107px;
    border-bottom:2px solid #262626;
    background-image:url(../image/logo.png);
    margin:0;
}
 
.inline {
    text-align: center;
    color:#B9B8B6;
    margin:0;
    padding-top:50px;
}
 
.inline li{
    display: inline-block;
    margin:0 50px;
    font-size:18px;
}
 
.inline a:visited{
    color:#B9B8B6;
}
 
.inline a{
    text-decoration: none;
}
 
#header{
    height:714px;
    outline:0px solid #B93340;
    text-align:center;
    color:#B9B8B6;
}
 
.header1{
    font-size:140px;
    margin:0 auto;
    padding-top:200px;
    color:#F5F5F5;
    font-weight:bold;
}
 
.header2{
    font-size:18px;
    color:#117392;
    letter-spacing:21px;
    
}
 
.button1{
    height:50px;
    width:73px;
    border-radius:50px;
    background-color:;
    position:absolute;
    border:2px solid #81807E;
    color:#Fff;
    text-align:center;
    padding-top:23px;
    bottom:130px;
    left:800px;   
    
}
 
.button1:hover{
    background-color:#FF3C32;
    border:3px solid #fff;
}
 
.none { 
    color:#fff
}
 
#content1{
    height:690px;
    background-color:#12759E;
}
 
.text1{
    text-align:center;
    color:#fff;
    font-size:50px;
    text-decoration:uppercase;
    padding-top:160px;
}
 
.center{
    text-align:center;
    margin-top:100px;
    color:#E1F0FA;
}
 
.icon1{
    height:270px;
    width:253px;
    background-color:#12759E;
    text-align:center;
    display:inline-block;
    background-position:center
}
 
.krug{
    height:125px;
    width:125px;
    border-radius:100px;
    background-color:#3084A9;
    color:#fff;
    text-align:center;
    display:inline-block;
}
 
.texter{
    margin-top:15px;
    font-weight:600;
}
 
.texter2{
    margin-top:20px;
 
}
 
.icon2{
    height:270px;
    width:253px;
    background-color:#12759E;
    text-align:center;
    display:inline-block;
    background-position:center
}
 
.icon3{
    height:270px;
    width:253px;
    background-color:#12759E;
    text-align:center;
    display:inline-block;
    background-position:center
}
 
.icon4{
    height:270px;
    width:253px;
    background-color:#12759E;
    text-align:center;
    display:inline-block;
    background-position:center
}
 
.block1{
    width:50%;
    height:417px;
    background-color:#222222;
    float:left;
    color:#fff;
}
 
.pp{
    padding-top:80px;
    padding-left:200px;
}
 
.p1{
    
}
 
.p2{
    font-size:40px;
    margin:10px 0 30px 0;
}
 
.p3{
    margin-bottom:25px;
}
 
.block2{
    width:50%;
    height:417px;
    background-color:#FF00AE;
    float:right;
    background-image:url(../image/computer.jpg)
}
 
.block3{
    width:50%;
    height:417px;
    background-color:#D0FF00;
    float:left;
    background-image:url(../image/computer.jpg);
}
 
.block4{
    width:50%;
    height:417px;
    background-color:#F3F3F3;
    float:right;
}
 
.content2{
    margin-top:834px;
    height:950px;
    background-color:#FFFFFF;
 
}
 
.content3{
    height:330px;
    background-color:#11749E;
}
 
.content4{
    height:793px;
    background-color:#D0FF00;
}
 
.content5{
    height:883px;
    background-color:#FFFFFF;
}
 
.content6{
    height:795px;
    background-color:#B34EE9;
}
 
.content7{
    height:311px;
    background-color:#014045;
}
 
.footer{
    height:110px;
    background-color:#222222;
}
0
Лучшие ответы (1)
Сообщение: #12911400
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 19.09.2018, 19:33
Ответы с готовыми решениями:

Дайте оценку по 10-бальной шкале
Прокомментируйте, пожалуйста! ссылка удалена

Оцените вёрстку
Здравствуйте. Оцените пожалуйста свёрстанный мной сайт ashejs.github.io. Приветствуется адекватная...

Оцените вёрстку с psd
https://www.cyberforum.ru/attachment.php?attachmentid=854938&amp;stc=1&amp;d=1501194698 ...

Оцените адаптивную вёрстку, пожалуйста
Сделал, в общем, вёрстку по макету(в макете был только вариант под разрешение 1024, остальное надо...

6
154 / 123 / 90
Регистрация: 09.04.2018
Сообщений: 351
19.09.2018, 20:12 2
Цитата Сообщение от Артур123421312 Посмотреть сообщение
Ну а в рамках этой страницы не могу понять где взять мини картинки в кружках
Если их нет макете, то поищите похожие svg на https://icomoon.io/
2
2525 / 1751 / 152
Регистрация: 11.08.2012
Сообщений: 3,349
20.09.2018, 06:35 3
Лучший ответ Сообщение было отмечено Артур123421312 как решение

Решение

Цитата Сообщение от Артур123421312 Посмотреть сообщение
Ещё я не особо понимаю как мне учиться дальше.
1. Посмотреть в сторону сеток: htmlacademy: сетки, урок простенький, про базовые вещи, как и весь курс (советую пройти целиком).
2. Пойти дальше и избавится от наименований вроде .content7 и сделать их более "говорящими".
3. Если под ie верстать не собираетесь, то рекомендую выбросить float'ы и заменить это дело на flexbox, каждые строки с контейнерами с float'ами лучше также разделять с помощью какого-нибудь элемента, который имеет clear: both, в противном случает такие блоки могут начать "прыгать" (будут появляться пробелы в неожиданных местах) в зависимости от помещенного в них контента.
4. Фиксированными height'ами лучше не злоупотреблять, их есть смысл ставить в том случае, когда дизайнером строго прописана высота элемента, это также подходит для меню в шапке страницы и любых строчных (inline) элементов, для контейнеров это вредно, там лучше задавать внутренние и внешние отступы, регулировать высоту с помощью max-height/min-height и overflow (если размер ограничен) - в противном случае при переполнении контейнера текстом/элементами они будут вылезать за его приделы и верстка поедет.
5. Может и вкусовщина, тем не менее классы krug лучше все-таки называть circle
6. http://validator.w3.org (там и css можно проверить, на ваш html мне выдало 26 ошибок и 2 варнинга)
Цитата Сообщение от Артур123421312 Посмотреть сообщение
Оцените мою вёрстку по 10-ти бальной шкале
Еще бы иметь какой-нибудь общепринятый критерий для оценки, хех. Но 3 из 10 имхо поставить можно
1
308 / 261 / 70
Регистрация: 01.12.2008
Сообщений: 1,031
20.09.2018, 06:46 4
Цитата Сообщение от galawar Посмотреть сообщение
мини картинки в кружках
Картинки больше похожи на иконки. Используйте awesome шрифт. Там полно таких и разных. Для соцсетей, допустим.
1
716 / 473 / 258
Регистрация: 19.12.2014
Сообщений: 1,801
21.09.2018, 02:05 5
В качестве картинок заглушек удобно использовать сервис https://picsum.photos/
0
10 / 3 / 1
Регистрация: 29.11.2018
Сообщений: 14
01.12.2018, 00:01 6
Цитата Сообщение от Артур123421312 Посмотреть сообщение
Учусь верстать уже примерно неделю.
Неделя верстки, это слишком мало. Джедаи учатся всю жизнь. Лишь достигнув седин Йоды, они уходят на покой.

Цитата Сообщение от Артур123421312 Посмотреть сообщение
Ещё я не особо понимаю как мне учиться дальше. Например с 0 я учился на курсах, теперь смотрю многочасовые видео где люди верстают страницы с 0 и всё объясняют.
Не все ученые с ютуба имеют степень докторов наук. Поэтому я понимаю ваши непонятки и просто поменял бы вашу школьную программу:

1) Новая большая книга CSS
2) Секреты JavaScript ниндзя. 2-е издание
3) jQuery в действии. 3-е издание
4) Что-нибудь из SPA (Ангуляр, Реакт или Вью). Лично мне, больше нравится Райот (это jquery в мире одностраничных приложений, джаваскриперы поймут).
0
108 / 76 / 27
Регистрация: 14.11.2016
Сообщений: 260
16.12.2018, 01:39 7
codecademy.com - там курсы по HTML/CSS
codenamecrud.ru - я там учился веб-разработке в целом

И да, многие меня тапками закидают, но все же - не налегайте на изучение jQuery - это была хорошая библиотека, но ее эра уже проходит
0
16.12.2018, 01:39
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 16.12.2018, 01:39
Помогаю со студенческими работами здесь

Оцените написанный код по пяти бальной шкале
class C { public: C(){puts(&quot;Hello World govnocod style&quot;);}; }; bool main(int argc, _TCHAR*...

Сборка i7+1080, оцените данную сборку по 10 бальной шкале
Добрый вечер форумчане, оцените данную сборку по 10 бальной шкале. Спасибо!...

Вычисление по 10-ти бальной шкале, сдал я экзамен или нет
Подскажите пожалуйста, не как не могу написать программу, которая по 10-ти бальной шкале вычисляла...

Оцените по 5ти бальной сестеме материнскую плату MSI K9N6SG M-V (MS 7309)
MSI K9N6SG M-V (MS 7309)


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

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