Народ, я студент-идиот, прошу помощи!
Получил курсовую работу на создание, как мне казалось вполне обычного web-сайта абстрактного сервисного центра (и кое как, с ней справился. хотя весь мой опыт - несколько сайтов-визиток, созданных в бытность школьником, много лет назад.). Я не использовал какие-либо CMS. Просто взял понравившийся шаблон на html, да перепилил его в Дримвивере.
1. Поскольку тащил код отовсюду, вылезли косяки верстки (хотя в том же Дримвивере, все было ок):
Скриншот:
Код кривой страницы:
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>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Гарантийный ремонт</title>
<link rel="stylesheet" href="resources/styles/main.css" type="text/css" />
<script src="resources/scripts/jquery.min.js" type="text/javascript"></script>
<script src="resources/scripts/sez.service.center.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<div class="inner cf">
<div id="navigation" class="login-signup">
<ul>
<li><a href="login_signup.html">ВХОД | РЕГИСТРАЦИЯ</a></li>
</ul>
</div>
<div id="navigation">
<ul>
<li><a href="index.html">О НАС</a></li>
<li class="current-menu-item"><a href="warranty_service.html">ГАРАНТИЙНЫЙ РЕМОНТ</a></li>
<li>
<a href="#">ПЛАТНЫЕ УСЛУГИ</a>
<ul>
<li><a href="paid_service_pc.html">» Ремонт компьютеров<br/> и ноутбуков</a></li>
<li><a href="paid_service_gadgets.html">» Ремонт планшетов<br/> и телефонов</a></li>
</ul>
</li>
<li><a href="gallery.html">ГАЛЕРЕЯ</a></li>
<li><a href="contacts.html">КОНТАКТЫ</a></li>
</ul>
</div>
</div>
</div>
<hr />
<div id="content" class="home">
<div class="inner">
<div id="logo" class="content logo">
<h1>
<img src="resources/images/logo.jpg" width="1000" height="180" alt="Сервисный центр SEZ" /></h1>
</div>
<h2></h2>
<div class="section about">
<h3>Мы облуживаем технику всех ведущих производителей</h3>
<center><img src="resources/images/services/warranty_service.jpg" width="565" height="316" alt=""/></center>
</div>
<hr />
<div class="brands_patent text-center" id="pdopage">
<div class="pagination" style="display: flex;">
<ul class="pagination" style="display: flex;"></ul>
</div>
<div class="brands brand_hp">
<a href="https://hp.com">
<img class="img-responsive" title="Ремонт устройств HP" alt="hp" src="resources/images/icons/partner_hp.jpg">
<span class="linktomodel">HP</span>
</a>
</div>
<div class="brands brand_sony">
<a href="https://sony.com">
<img class="img-responsive" title="Ремонт устройств Sony" alt="sony" src="resources/images/icons/partner_sony.jpg">
<span class="linktomodel">SONY</span>
</a>
</div>
<div class="brands brand_asus">
<a href="https://asus.com">
<img class="img-responsive" title="Ремонт устройств Asus" alt="asus" src="resources/images/icons/partner_asus.jpg">
<span class="linktomodel">ASUS</span>
</a>
</div>
<div class="brands brand_lenovo">
<a href="https://lenovo.com">
<img class="img-responsive" title="Ремонт устройств Lenovo" alt="lenovo" src="resources/images/icons/partner_lenovo.jpg">
<span class="linktomodel">LENOVO</span>
</a>
</div>
<div class="brands brand_dell">
<a href="https://dell.com">
<img class="img-responsive" title="Ремонт устройств Dell" alt="dell" src="resources/images/icons/partner_dell.jpg">
<span class="linktomodel">DELL</span>
</a>
</div>
<div class="brands brand_msi" style="border-bottom: none;">
<a href="https://msi.com">
<img class="img-responsive" title="Ремонт устройств MSI" alt="msi" src="resources/images/icons/partner_msi.jpg">
<span class="linktomodel">MSI</span>
</a>
</div>
<div class="brands brand_samsung" style="border-bottom: none;">
<a href="https://samsung.com">
<img class="img-responsive" title="Ремонт устройств Samsung" alt="samsung" src="resources/images/icons/partner_samsung.jpg">
<span class="linktomodel">SAMSUNG</span>
</a>
</div>
<div class="brands brand_toshiba" style="border-bottom: none;">
<a href="https://toshiba.com">
<img class="img-responsive" title="Ремонт устройств Toshiba" alt="toshiba" src="resources/images/icons/partner_toshiba.jpg">
<span class="linktomodel">TOSHIBA</span>
</a>
</div>
<div class="brands brand_acer" style="border-bottom: none;">
<a href="https://acer.com">
<img class="img-responsive" title="Ремонт устройств Acer" alt="acer" src="resources/images/icons/partner_acer.jpg">
<span class="linktomodel">ACER</span>
</a>
</div>
<div class="brands brand_canon" style="border-bottom: none;">
<a href="https://canon.com">
<img class="img-responsive" title="Ремонт устройств Canon" alt="acer" src="resources/images/icons/partner_canon.jpg">
<span class="linktomodel">CANON</span>
</a>
</div>
</div>
<h2></h2>
<div class="section about">
<h3>Если производителя вашего устройства нет в списке, вы всгда можете воспользоваться нашими платными услугами</h3>
<p><a href="paid_service_pc.html" class="ui-button big">Здесь</a></p>
</div>
</div>
</div>
<hr />
<div id="footer">
<div class="inner">
<p>
<span>© 2018 by <a href="index.html">Сервисный центр SEZ</a>.</span>
</p>
</div>
</div>
</body>
</html>
CSS (все, что добавлял к шаблону я - внизу, отделено комментом Silver Raven CSS styles):
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.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
348.
349.
350.
351.
352.
353.
354.
355.
356.
357.
358.
359.
360.
361.
362.
363.
364.
365.
366.
367.
368.
369.
370.
371.
372.
373.
374.
375.
376.
377.
378.
379.
380.
381.
382.
383.
384.
385.
386.
387.
388.
389.
390.
391.
392.
393.
394.
395.
396.
397.
398.
399.
400.
401.
402.
403.
404.
405.
406.
407.
408.
409.
410.
411.
412.
413.
414.
415.
416.
417.
418.
419.
420.
421.
422.
423.
424.
425.
426.
427.
428.
429.
430.
431.
432.
433.
434.
435.
436.
437.
438.
439.
440.
441.
442.
443.
444.
445.
446.
447.
448.
449.
450.
451.
452.
453.
454.
455.
456.
457.
458.
459.
460.
461.
462.
463.
464.
465.
466.
467.
468.
469.
470.
471.
472.
473.
474.
475.
476.
477.
478.
479.
480.
481.
482.
483.
484.
485.
486.
487.
488.
489.
490.
491.
492.
493.
494.
495.
496.
497.
498.
499.
500.
501.
502.
503.
504.
505.
506.
507.
508.
509.
510.
511.
512.
513.
514.
515.
516.
517.
518.
519.
520.
521.
522.
523.
524.
525.
526.
527.
528.
529.
530.
531.
532.
533.
534.
535.
536.
537.
538.
539.
540.
541.
542.
543.
544.
545.
546.
547.
548.
549.
550.
551.
552.
553.
554.
555.
556.
557.
558.
559.
560.
561.
562.
563.
564.
565.
566.
567.
568.
569.
570.
571.
572.
573.
574.
575.
576.
577.
578.
579.
580.
581.
582.
583.
584.
585.
586.
587.
588.
589.
590.
591.
592.
593.
594.
595.
596.
597.
598.
599.
600.
601.
602.
603.
604.
605.
606.
607.
608.
609.
610.
611.
612.
613.
614.
615.
616.
617.
618.
619.
620.
621.
622.
623.
624.
625.
626.
627.
628.
629.
630.
631.
632.
633.
634.
635.
636.
637.
638.
639.
640.
641.
642.
643.
644.
645.
646.
647.
@import url("reset.css");
@import url("form.css");
body {
background: #444;
font: 13px/22px Helvetica, Arial, sans-serif;
}
/* #header
==========================================================*/
#header { padding: 19px 0 0; }
#navigation {}
#navigation > ul > li { padding-bottom: 17px; }
#navigation > ul > li > a {
font-size: 14px;
padding: 6px 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#navigation li ul {
margin-top: -2px;
padding: 7px 0;
white-space: nowrap;
z-index: 1111;
-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-topleft: 0;
border-radius: 5px;
border-top-left-radius: 0;
}
#navigation li ul a {
color: #c1e4f6;
line-height: 18px;
padding: 0 15px 0 9px;
}
#navigation ul ul,
#navigation > ul > li:hover > a { background: #62a6c9; }
#navigation > ul > li.current-menu-item { background: url("../images/navigation/navigation_cursor.png"); }
/* #content
==========================================================*/
#content { padding: 50px 0; }
/* .home
==========================================================*/
.home {}
.home h2 {}
.home h2 span {
padding: 0 30px;
top: -9px;
}
.home .section { padding: 35px 0 50px; }
.home .logo { padding: 71px 0 90px; }
.home .about {}
.home .about h3 {
font-size: 48px;
line-height: 50px;
}
.home .works-list { margin: -20px 0 0 -20px; }
.home .works-list li { margin: 20px 0 0 20px; }
.home .more { margin: -20px 0 0 -20px; }
.home .more .text {
margin: 20px 0 0 20px;
width: 300px;
}
.home .blog {}
.home .blog .text p {
font-size: 12px;
line-height: 18px;
}
.home .blog .latest-posts {
margin: -20px 0 0 -20px;
width: 720px;
}
.home .blog .post {
margin: 20px 0 0 20px;
width: 220px;
}
.home .blog .post h3 {
line-height: 20px;
margin-bottom: 15px;
}
.home .blog .tweet {
background-image: url("../images/icons/twetter.png");
background-position: 0 3px;
margin-left: 20px;
padding-left: 35px;
width: 185px;
}
.home .tweet .follow { margin-top: 10px; }
/* .columns
==========================================================*/
.columns {}
.columns .main {
margin-left: 80px;
width: 720px;
}
.portfolio .back-to-top {
margin-top: 50px;
padding-left: 180px;
}
#content .back-to-top span {
background: #fff url("../images/gallery/back.png") 14px 1px no-repeat;
padding: 3px 20px 3px 40px;
top: -9px;
}
.portfolio .message { padding-top: 45px; }
.columns .sidebar { width: 140px; }
.columns #logo { margin-bottom: 55px; }
.sidebar .tags-list { font-size: 16px; }
/* @
==========================================================*/
.thumb {
background-image: url("../images/gallery/gallery_thumb_shadow.png");
padding-bottom: 8px;
width: 220px;
}
.thumb .thumb-inner { height: 145px; }
.tags-list {}
.tags-list li + li { margin-top: 3px; }
.tags-list li {}
.tags-list a { padding: 3px 0; }
.tags-list .posts {
right: 0;
top: 7px;
}
.badge {
background: #ddd;
display: inline-block;
line-height: 15px;
padding: 0 5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.works-list .work + .work { margin-top: 50px; }
.work {}
.work .description { width: 220px; }
.work .gallery {
background: url("../images/gallery/gallery_shadow.png");
padding-bottom: 8px;
width: 480px;
}
.work .gallery .photos {
height: 340px;
width: 460px;
}
.work .gallery .nivo-controlNav {
padding: 1px 2px 8px 9px;
right: 0;
top: 0;
z-index: 1112;
}
.work .gallery .nivo-controlNav .nivo-control {
background: url("../images/gallery/pages.png");
height: 7px;
text-indent: -9999px;
width: 7px;
}
.work .gallery .nivo-controlNav .nivo-control + .nivo-control { margin-left: 3px; }
.work .gallery .nivo-controlNav .nivo-control.active { background-position: -7px 0; }
.message { padding: 2px 0; }
.message h2 {
font-size: 36px;
line-height: 40px;
}
.text {}
.text h2.with-icon,
.text h3.with-icon { padding-left: 40px; }
#content h2.with-icon,
#content h3.with-icon { background-position: 0 3px; }
.text .checkmark {
background-image: url("../images/icons/check_mark.png"); }
.text h2,
.text h3,
.text ul,
.text p { margin-bottom: 10px; }
.text ul {}
.text ul li + li { margin-top: 7px; }
.text ul li {
background: url("../images/icons/check_mark_small.png") 0 1px no-repeat;
padding-left: 25px;
}
.text .meta { color: #cbcbcb; }
.posts .post + .post { margin-top: 50px; }
.post {}
.post .meta {}
.post .meta li + li { margin-left: 20px; }
.post-header { margin-bottom: 40px; }
.post-header h2 { margin-bottom: 10px; }
.post-body {}
.post-body .thumb { margin: 0 22px 22px 0; }
.post-body .excerpt { line-height: 30px; }
.post-footer { margin-top: 15px; }
.post-footer .meta {
padding-right: 15px;
top: -10px;
}
.posts + .pagination { margin-top: 60px; }
.pagination {}
.pagination .page { top: -11px; }
.pagination .next { padding-left: 15px; }
.pagination .next a {
background: url("../images/posts/next.png") 100% 1px no-repeat;
padding-right: 30px;
}
.pagination .next a:hover { background-position: 100% -17px; }
.pagination .prev { padding-right: 15px; }
.pagination .prev a {
background: url("../images/posts/prev.png") 0 1px no-repeat;
padding-left: 30px;
}
.pagination .prev a:hover { background-position: 0 -17px; }
/* #footer
==========================================================*/
#footer { padding: 20px 0; }
#footer span + span { margin-left: 8px; }
/* ~
==========================================================*/
body,
#content .tags-list a,
#content .pagination a:hover,
#navigation > ul > li > a { color: #888; }
.home .blog { color: #999; }
.message h2,
.home .about h3 { color: #333; }
.post-header h2,
#content .post-header h2 a,
.text h2, #content .text h2 a,
.text h3, #content .text h3 a { color: #444; }
#content a,
#content .post-header h2 a:hover,
#content .tags-list a:hover,
#content .tags-list .current-menu-item a,
#content .text a:hover { color: #61a5c9; }
#footer a,
#content .badge,
#navigation li li a:hover,
#navigation > ul > li:hover > a { color: #fff; }
.tags-list .current-menu-item .posts,
a:hover .badge,
.badge:hover { background: #62a6c9; }
#content,
.pagination .page,
.home h2 span,
.back-to-top span,
.post-footer .meta,
.work .gallery .nivo-controlNav { background: #fff; }
.thumb,
.home .tweet,
.text h2.with-icon,
.text h3.with-icon,
.work .gallery,
#navigation > ul > li.current-menu-item {
background-position: 50% 100%;
background-repeat: no-repeat;
}
.home h2,
.pagination,
.back-to-top { border-top: 1px dashed #ddd; }
.thumb .thumb-inner,
.work .gallery-inner {
border: 1px solid #dadada;
padding: 9px;
}
.tags-list a,
.home .tweet .follow,
#navigation li:hover ul,
#navigation li ul a,
.back-to-top, .back-to-top a,
.pagination a,
.work .gallery .nivo-controlNav .nivo-control { display: block; }
hr,
#navigation li ul { display: none; }
.work .gallery,
#navigation,
#navigation > ul > li,
.columns .sidebar,
.columns .main,
.home .works-list li,
.home .more .text,
.home .blog .latest-posts,
.home .blog .tweet,
.message h2,
.post-body .thumb,
.post-footer .meta,
.post .meta li,
.pagination .prev,
.home .blog .latest-posts .post,
.work .gallery .nivo-controlNav .nivo-control { float: left; }
.pagination .next,
.work .description,
.message .ui-button,
.post-footer .back-to-top a,
#header .search { float: right; }
/* Add by Silver Raven */
#header .login-signup { float: right;}
.home .blog .post h3,
.post-body .excerpt { font-size: 18px; }
.text h2,
.text h3,
.home .about p {
font-size: 24px;
line-height: 36px;
}
.post-header h2,
.home .about h3 {
font-size: 48px;
line-height: 50px;
}
.badge,
.home .blog .meta,
.home .tweet .follow,
#navigation li ul a { font-size: 11px; }
.text h2,
.text h3,
.message h2,
.badge,
.post-header h2,
.home .more .continue,
.home .about h3,
#navigation > ul > li > a { font-weight: bold; }
.home .works-list,
.home .more,
.work .gallery .photos,
.home .blog,
.message,
.work .gallery .nivo-controlNav { overflow: hidden; }
#navigation li ul,
.tags-list .posts,
.nivo-controlNav,
.post-footer .meta,
.tags-list li { position: absolute; }
.tags-list li,
.home h2 span,
.post-footer,
.pagination .page,
#content .back-to-top span,
.work .gallery .photos,
#navigation > ul > li { position: relative; }
#footer,
.home h2,
.home .logo,
.home .about { text-align: center; }
#content .badge:hover,
#content .tags-list a:hover,
#content .text h2 a:hover,
#content .text h3 a:hover,
#content .post-header h2 a:hover,
#content .pagination a:hover,
#content a.back-to-top:hover,
#content .back-to-top a:hover { text-decoration: none; }
#footer a:hover,
#content a:hover { text-decoration: underline; }
.home h2,
#content .pagination .page,
#content .pagination a,
#content .back-to-top,
#content .back-to-top a {
color: #bbb;
font-size: 9px;
text-transform: uppercase;
}
#header > .inner,
#content > .inner,
#footer > .inner {
margin: 0 auto;
width: 940px;
}
.cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after { clear: both; }
/* ========== Silver Raven CSS Styles ========== */
/* Стили для warranty_service.html */
.brands_patent {
text-align:center;
}
.brands_patent .brands {
border:1px solid #ebebeb;
width:20%;
display:block;
float:left;
margin-bottom:-1px;
margin-left:-1px;
}
.brands_patent .brands:hover {
border:1px solid #1ab9ef;
position:relative;
}
.brands_patent .brands:nth-child(5n+1) {
border-left:none;
}
.brands_patent .brands:nth-child(5n-5) {
border-right:none;
}
.brands_patent .brands:nth-child(-n+5) {
border-top:none;
}
.linktomodel {
display:block;
margin-top:5px;
margin-bottom:10px;
color:#999;
}
.brands_patent .brands img {
display:inline-block;
margin-bottom:10px;
margin-top:10px;
}
.price-table .paid_service {
padding-left:5px;
padding-right:5px;
}
/* Увеличение/закрытие изображения по клику для gallery.html */
/* Картинка на странице */
.minimized {
width: 200px;
height: 145px;
cursor: pointer;
border: 1px solid #FFF;
}
.minimized:hover {
border: 1px solid gray;
}
/* Увеличенная картинка */
#magnify {
display: none;
position: fixed;
max-width: 1000px;
height: auto;
z-index: 9999;
}
#magnify img {
width: 100%;
}
/* Затемняющий фон */
#overlay {
display: none;
background: #000;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
opacity: 0.5;
z-index: 9990;
}
/* Кнопка закрытия */
#close-popup {
width: 30px;
height: 30px;
background: #FFFFFF;
border: 1px solid #AFAFAF;
border-radius: 15px;
cursor: pointer;
position: absolute;
top: 15px;
right: 15px;
}
#close-popup i {
width: 30px;
height: 30px;
background: url(../images/gallery/gallery_close_image.png) no-repeat center center;
background-size: 16px 16px;
display: block;
}
/* Лого-описание работы платных услуг для paid_service_*.html */
.paid-service-logo {
padding: 0px 0 50px;
}
/* Заголовок таблицы-прейскуранта для paid_service_*.html */
.table-header {
font-size: 24px;
color: #1ab9ef;
}
/* Таблица-прейскурант для paid_service_*.html */
/* Текст в столбцах */
.tftable {
font-size: 12px;
color: #333333;
width: 100%;
border-width: 0px;
border-color: #FFFFFF;
border-collapse: collapse;
text-align: center;
}
/* Текст в заголовках столбцов */
.tftable th {
font-size: 24px;
background-color: #444444;
color: #FFFFFF;
border-width: 5px;
padding: 15px;
border-style: solid;
border-color: #FFFFFF;
text-align: center;
}
/* Фон столбцов */
.tftable tr {
background-color: #E5E5E5;
}
/* Столбцы */
.tftable td {
font-size: 14px;
border-width: 5px;
padding: 15px;
border-style: solid;
border-color: #FFFFFF;
}
/* Фон столбцов при наведении мыши (только кнопка заказа. остальное управляется кодом иконки-чекбокса!) */
.tftable tr:hover {
background-color: #62A6C9;
}
/* Кнопка заказа для столбцов таблицы */
.table-button {
font-size: 24px;
padding: 10px 20px;
color: #000000;
background-color: transparent;
border: 0px;
}
/* Иконка-чекбокс услуги в таблице-прейскуранте */
.check-price {
background: url(../images/icons/check_mark_price.png);
width: 24px;
height: 24px;
background-size: cover;
display: inline-block;
margin-right: 20px;
vertical-align: middle;
background-position: 0 0;
}
/* Иконка-чекбокс услуги при наведении мыши */
.tableprice table tr:hover .check-price {
background-position: 24px 0;
}
.tableprice table tr:hover td {
background: #EAF5F9;
}
.tableprice table tr:not(:first-of-type):hover td:last-of-type {
background: transparent;
}
/* Дополнительный текст под таблицей прейскурантом для paid_service_*.html */
.paid-service-additional-descr {
font-size: 15px;
color: #000000;
}
Не вдупляю, как исправить.
2. Оказалось, этого мало. Нужна еще и БД с данными пользователей. Вместе со списком созданных пользователями заказов из прейскуранта.
Форму входа\регистрации пользователей я прикрутил, но скрипты не работают. Почему?
Код страницы:
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.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Сервисный центр SEZ - Вход</title>
<link rel="stylesheet" href="resources/styles/login-signup.css" type="text/css" />
<script src="resources/scripts/jquery.min.js" type="text/javascript"></script>
<script src="resources/scripts/sez.service.center.js" type="text/javascript"></script>
</head>
<body>
<div class="form">
<ul class="tab-group">
<li class="tab active"><a href="#login">Вход</a></li>
<li class="tab"><a href="#signup">Регистрация</a></li>
</ul>
<div class="tab-content">
<div id="signup">
<h1>Сервисный центр SEZ</h1>
<form action="/" method="post">
<div class="top-row">
<div class="field-wrap">
<label>
Имя<span class="req">*</span>
</label>
<input type="text" required autocomplete="off" />
</div>
<div class="field-wrap">
<label>
Фамилия<span class="req">*</span>
</label>
<input type="text"required autocomplete="off"/>
</div>
</div>
<div class="field-wrap">
<label>
E-mail адрес<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Установите пароль<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<button type="submit" class="button button-block"/>Давайте начнем</button>
</form>
</div>
<div id="login">
<h1>С возвращением!</h1>
<form action="/" method="post">
<div class="field-wrap">
<label>
E-mail адрес<span class="req">*</span>
</label>
<input type="email"required autocomplete="off"/>
</div>
<div class="field-wrap">
<label>
Пароль<span class="req">*</span>
</label>
<input type="password"required autocomplete="off"/>
</div>
<p class="forgot"><a href="#">Забыли пароль?</a></p>
<button class="button button-block"/>Вход</button>
</form>
</div>
</div>
</div>
</body>
</html>
JS:
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.
$('.form').find('input, textarea').on('keyup blur focus', function (e) {
var $this = $(this),
label = $this.prev('label');
if (e.type === 'keyup') {
if ($this.val() === '') {
label.removeClass('active highlight');
} else {
label.addClass('active highlight');
}
} else if (e.type === 'blur') {
if( $this.val() === '' ) {
label.removeClass('active highlight');
} else {
label.removeClass('highlight');
}
} else if (e.type === 'focus') {
if( $this.val() === '' ) {
label.removeClass('highlight');
}
else if( $this.val() !== '' ) {
label.addClass('highlight');
}
}
});
$('.tab a').on('click', function (e) {
e.preventDefault();
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
Я даже приблизительно не знаю что делать. Как заставить сайт передавать и принимать данные от БД. Да еще и создать станицу, где сотрудник будет видеть, какой клиент что и когда заказал. Лезть в MySQL с нуля? Боюсь, не хватит времени. Может есть какой-то готовый пример, для подключения? (по сути, надо пяток записей мифических клиентов, вида: логин, пароль, e-mail, телефон. какие услуги заказаны). Сроки горят, а знаний в этой сфере 0. (и не спрашивайте, почему дают то, чему особо и не учили. а я не буду рассказывать о FoxPro в 2018-ом...) Надеюсь, не слишком сумбурно все описал.
З.Ы. Прошу не удивляться возможному наличию over9000 грубейших ошибок. Лишь бы в оффлайне работало. На всякий случай, прицепил все в одном архиве GoogleDrive . Если данная тема не соответствует разделу форума, прошу модератора(ов) перенести ее. |
