Прикольный сайт верстки HTML для новичков
-
Similar Content
-
By Nordwing
Оцените, пожалуйста, ещё такую вёрстку: http://testing.nordwing.ru/calm-blogger/index.html
Вот макет для неё:
https://yadi.sk/i/fpuAR4XFiZxUk
-
By breezyday27
Всех приветствую, я новичок в это ремесле. Вот начал верстать этот простенький макет:
Как видите макет простой.
Вот код моего творения( html и css).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="ru-RU"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Верстка сайта</title> <link rel="stylesheet" href="st.css" type="text/css" /> <link rel="stylesheet" href="bootstrap.css" type="text/css" /></head><body><div id="wraper"> <div id="header"> <div id="logo"> </div> <div id="search"> </div> <div id="phone"> </div> </div> <div id="content"> </div> <div id="sidebar"> </div><div id="sidebar"> <ul id="menu"> <li><a href="">Пластиковые окна</a></li> <li><a href="">Лоджии и балконы</a></li> <li><a href="">Услуги</a></li> <li><a href="">Акции</a></li> <li><a href="">Мобильныйы офис</a></li> <li><a href="">Вызов замерщика</a></li> <li><a href="">Контакты</a></li> <li style="margin-top: 20px;"><a href="">Доступные цены</a></li> <li style="margin-top: 20px;"><a href="">Варианты остекления</a></li> </ul> <div id="order"> <h3>Записаться на бесплатный замер</h3> <div id="order_text">Оставьте свои данные, и мы свяжемся <br/> с Вами в удобное для Вас время</div> <table> <tr> <td>Имя:</td><td><input type="text" name="name" value=""/></td> </tr> <tr> <td>Телефон:</td><td><input type="text" name="phone" value=""/></td> </tr> <tr> <td>Время<br/>звонка:</td><td><input type="text" name="date" value=""/></td> </tr> </table> <div id="contacts"> </div></div></div><div id='footer'><div class='link'></body></html>#logo{float:left;background: url('images/images/logo.jpg');width: 300px;height: 100px;margin-left:250px;}#search{float:left;background: url('images/images/search.jpg');width: 540px;height: 100px;margin-right:1px;}#phone{float:left;background: url('images/images/phone.jpg');width: 190px;height: 100px;}#sidebar{float: left;width: 240px;height: 1091px;}#menu{background:white ;margin-top: 0px 10px 0px 0px;float:right;text-align: right;list-style: none;}#menu li{margin-top: 7px;}#menu a{color: black;font-family: Arial;font-size: 17px;font-weight: 100;text-decoration: underline;}#menu a:hover{color: red;font-family: Arial;font-weight: 200;}#b_order{float:left; /*background: url('images/order.jpg');*/ margin-top: 30px;width: 240px;height: 280px;}#order{color:black;margin-top: 10px;margin-left: 6px;margin-left: 0px;float:left; /*opacity: 0.7;*/width: 230px;height: 280px;}#order h3{margin:12px 30px 0px 5px;margin-right:10px;margin-top:12px;text-align: right;float:right;width: 150px;font-family: Arial;font-size: 14px;}#order_text{margin:7px 30px 1px 5px;margin-top:7px;margin-right:10px;float:right;width: 190px;text-align: right;font-family: Calibri;font-size: 11px;}#order table{margin:0px 0px 11px 12px;width: 190px;font-family: Calibri;font-size: 14px;}#order td{padding-top: 10px;}#order a{margin: 0px 0px 0px 13px;font-family: Calibri;font-weight: 600;font-size: 14px;}#back_yellow{float:left;padding-top: 5px;margin: 0px 2px 0px 3px; background: url('images/yellow_button.png') no-repeat;width: 91px;height: 30px;}#order input{height: 17px;width: 130px;font-family: Calibri;font-size: 14px;}#content{float:right;width: 750px;padding-top: 1100px;}#contacts .skype{background: url('images/skype.jpg') no-repeat 0px 5px;padding-left: 24px;width: 70px;height: 20px;margin-top:100;}#contacts .icq{background: url('images/icq.jpg') no-repeat 0px 5px;padding-left: 24px;width: 70px;height: 20px;}#contacts .vkontakte{background: url('images/vk.jpg') no-repeat 0px 5px;padding-left: 24px;width: 100px;height: 20px;}#contacts .facebook{background: url('images/facebook.jpg') no-repeat 0px 5px;padding-left: 24px;width: 100px;height: 20px;}#house {height:276px;width:710px;background: url('images/content1.jpg')} Как видно из моего примера проблема в контенте и футере, и в меню контакты.(еще куча недочетов).
-
By alex.js
Привет, я начинающий верстальщик и ищу верстку для моего портфолио, поэтому бесплатно) Что я умею:
HTML 5 валидно верстать; Хорошо знаю css3; Кроссбраузерная верстка (ie8+, все современные браузеры); Люблю js/jquery, смогу найти нужный плагин и кастомизировать его, при необходимости напишу скрипт сам; Знаю, как надо проверять свою работу на качество Сижу на Хабре и форумах по верстке, сверстаю шаблон полностью соответствующий Вашему ТЗ. Знаю bootstrap, если надо сделать по какому-то другому css фреймворку, то разберусь и с ним. Flash не знаю. Верстка сложной титулки займет от 4 до 7 дней. Что нужно, чтобы мы сработались:
Вы являетесь веб-сдудией или фрилансером с портфолио; У Вас есть четкое и внятное ТЗ и ноебходимые PSD исходники; Вы понимаете, что так как я начинающий, то верстка может занять до недели Я не соглашусь работать со "стартаперами", которые ничего не умеют, но у них есть классная идея, которая перевернет интернет. Приоритет для студий, приоритет страницам, предназначенным для буржунета. Могу гарантировать, что у тех, кто будет в дальнейшем работать с моей версткой не будет батхерда.
-
By advokatua
Я, можно сказать, начинающий верстальщик. Верстать начал только совсем недавно, но с CSS и HTML работаю довольно давно. За последние 2 месяца прочитал порядка 8 книг по дизайну и верстке. Понял, что это все ерунда и книги нужно читать только когда есть какой-то опыт. Тупое чтение книг, даже с выполнением всех заданий дает очень мало в отличии от реальной практики на собственных ошибках. Как говориться - "Если хочешь научиться плавать, надо плавать".
Так вот, за последние пару дней сделал 2 макета. Посмотрите (кому не лень) и тыкните носом в какие-нибудь нубские и очевидные ошибки кода, если таковые имеются. Макеты в основном лепились только на визуальное совпадение с html5 и css3, т.е. всякие мобильные разрешения не учитывались. Кроссбраузерность также только под все самое последнее, без мазохистких вставок всяких хаков под 'IE 1.0000005 PreBeta not stable edition Only for developers' и прочей ахинеи 8)
http://webdevelop.zz.mu/index.html - макет 1
http://webdevelop.zz.mu/master.css - главный css
http://webdevelop.zz.mu/paypaul.png - картинка макета
webdevelop.zz.mu/illustrate/index.html - макет 2
webdevelop.zz.mu/illustrate/master.css - главный css
http://webdevelop.zz.../illustrate.png - картинка макета
psd не заливаю, т.к. все-равно никто смотреть не станет.
-
By Bassline
Четырем месяца назад создавал тему http://htmlforum.ru/...showtopic=44983 , в которой просил оценить верстку сайта.
Сегодня прошу оценить тот же сайт, но с учетом проделанной работы над ошибками. http://www.arteliko.ru
Итнтересует мнение именно о верстке (html, css), любые самые незначительные замечания (как всегда стремлюсь к идеалу).
P.S. Сайт резиновый. Также, при смене размера шрифта браузера, размер текста на сайте тоже меняется, как и сам сайт подстраивается под содержимое. Прошу все это протестировать.
Спасибо за внимание.
-
-
Обсуждения
-
Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } } -
Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок. -
By Katerina23 · Posted
Да, подходит. Спасибо. -
<input type="number"> -
By Katerina23 · Posted
Здравствуйте, подскажите какой тег использовать для увеличения значения, пример на картинке. Вроде, про такой тег я слышала. Если есть тег прогресс бар, значит и такое должно быть.
-
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.