|
Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Сайт для курсовой работы |
|
[решено] Сайт для курсовой работы
|
Stalker_AleX333
Сообщения: n/a |
Народ, выручайте!
Получил курсовую работу на создание web-сайта абстрактного сервисного центра (кое как, с ней справился. хотя весь мой опыт - несколько сайтов-визиток, созданных много лет назад.). Не использовал какие-либо CMS, просто взял понравившийся шаблон на html, да перепилил его в Дримвивере. Поскольку тащил код отовсюду, вылезли косяки верстки (хотя, в том же Дримвивере, все было ок): Скриншот: Скрытый текст
Код страницы: Скрытый текст
CSS (все, что добавлял к шаблону я - внизу, отделено комментом Silver Raven CSS styles): Скрытый текст
@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; } В будущем, нужно будет подцепить к сайту БД. А пока, дабы было что показать, обойдусь фейком, имитирующим вход пользователя. Окно логина > копия главной страницы, с уже открытым аккаунтом. Но почему-то не получается подцепить переход по кнопке (<a href="about_us.html"><button class="button button-block"/>Вход</button></a>). Сайт отправляет в главную директорию. Код страницы входа-регистрации: Скрытый текст
CSS: Скрытый текст
*, *:before, *:after { box-sizing: border-box; } html { overflow-y: scroll; } body { background: #444444; font-family: 'Titillium Web', sans-serif; } a { text-decoration: none; color: #62A6C9; transition: .5s ease; } a:hover { color: #7CD5FF; } .form { background: rgba(45, 45, 45, 1.0); padding: 40px; max-width: 600px; margin: 40px auto; border-radius: 4px; box-shadow: 0 4px 10px 4px rgba(98, 166, 201, 0.2); } .tab-group { list-style: none; padding: 0; margin: 0 0 40px 0; } .tab-group:after { content: ""; display: table; clear: both; } .tab-group li a { display: block; text-decoration: none; padding: 15px; background: rgba(160, 179, 176, 0.25); color: #a0b3b0; font-size: 20px; float: left; width: 50%; text-align: center; cursor: pointer; transition: .5s ease; } .tab-group li a:hover { background: #7CD5FF; color: #ffffff; } .tab-group .active a { background: #62A6C9; color: #ffffff; } .tab-content > div:last-child { display: none; } h1 { text-align: center; color: #ffffff; font-weight: 300; margin: 0 0 40px; } label { position: absolute; -webkit-transform: translateY(6px); transform: translateY(6px); left: 13px; color: rgba(255, 255, 255, 0.5); transition: all 0.25s ease; -webkit-backface-visibility: hidden; pointer-events: none; font-size: 22px; } label .req { margin: 2px; color: #62A6C9; } label.active { -webkit-transform: translateY(50px); transform: translateY(50px); left: 2px; font-size: 14px; } label.active .req { opacity: 0; } label.highlight { color: #ffffff; } input, textarea { font-size: 22px; display: block; width: 100%; height: 100%; padding: 5px 10px; background: none; background-image: none; border: 1px solid #a0b3b0; color: #ffffff; border-radius: 0; transition: border-color .25s ease, box-shadow .25s ease; } input:focus, textarea:focus { outline: 0; border-color: #62A6C9; } textarea { border: 2px solid #a0b3b0; resize: vertical; } .field-wrap { position: relative; margin-bottom: 40px; } .top-row:after { content: ""; display: table; clear: both; } .top-row > div { float: left; width: 48%; margin-right: 4%; } .top-row > div:last-child { margin: 0; } .button { border: 0; outline: none; border-radius: 0; padding: 15px 0; font-size: 2rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; background: #62A6C9; color: #ffffff; transition: all 0.5s ease; -webkit-appearance: none; } .button:hover, .button:focus { background: #7CD5FF; } .button-block { display: block; width: 100%; } .forgot { margin-top: -20px; text-align: right; } JS: Скрытый текст
$(".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); }); |
|
Отправлено: 15:42, 26-11-2018 |
Новый участник Сообщения: 7
|
Профиль | Отправить PM | Цитировать А в чем вопрос\задача собственно?
|
Отправлено: 22:10, 27-11-2018 | #2 |
Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети. Если же вы забыли свой пароль на форуме, то воспользуйтесь данной ссылкой для восстановления пароля. |
Stalker_AleX333
Сообщения: n/a |
Sarkar21, ну, вообще-то все было описано. Вопросов получается два. 1-ый о поехавшей верстке и 2-ой, о добавлении перехода на нужную страницу с кнопки формы авторизации.
Решены на другом ресурсе. Тему закрываю. |
Отправлено: 21:42, 29-11-2018 | #3 |
Необычный Сообщения: 4461
|
Профиль | Сайт | Отправить PM | Цитировать Stalker_AleX333, а в чем был фокус? Что было не так и почему ехала верстка?
|
Отправлено: 14:39, 30-11-2018 | #4 |
Stalker_AleX333
Сообщения: n/a |
lxa85, нужно было изменить css стили:
|
|
Отправлено: 16:26, 07-12-2018 | #5 |
Участник сейчас на форуме | Участник вне форума | Автор темы | Сообщение прикреплено |
| |||||
Название темы | Автор | Информация о форуме | Ответов | Последнее сообщение | |
ЛВС+сайт+почтовик=настройка совместной работы | YDen | Microsoft Windows NT/2000/2003 | 3 | 15-02-2010 04:59 | |
DNS/DHCP - Сайт на домашнем компе и 2 провайдера для безотказной работы ... | kyler | Сетевые технологии | 0 | 08-02-2010 10:19 | |
ALTLinux - Пжт, помогите с литературой к курсовой! | Polina | Программирование и базы данных | 0 | 16-12-2009 19:52 | |
Прочие БД - Помогите с курсовой по БД | _EvIL_ | Программирование и базы данных | 3 | 02-12-2007 18:43 | |
Народ помогите плиз с курсовой.!!! | Vovius | Программирование и базы данных | 1 | 04-05-2006 21:09 |
|