Ответы пользователя Андрей по тегу «Веб-разработка»

Верстка email письма, img+map+adaptive, это возможно?

Андрей @AndreyMyagkov

1) Сделать человеческий дизайн письма
2) Попробовать абсолютное позиционирование
3) Вместо классов использовать инлайновые стили

Ответ написан более трёх лет назад

2 комментария

Адаптированное меню как правильно селать?

Андрей @AndreyMyagkov

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Меню</title>
</head>
<body>

	<nav class="b-topnav">
		<button class="b-menu-toggle js-menu-toggle"><span class="menu-toggle__line"></span></button>
		<ul class="b-topmenu__list js-topmenu__list">
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 1</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item active">
				<a href="" class="topmenu__link">Пункт меню 2</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem active"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 3</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 4</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
			<li class="topmenu__item">
				<a href="" class="topmenu__link">Пункт меню 5</a>
				<ul class="topmenu__sublist">
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 1</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 2</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 3</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 4</a></li>
					<li class="topmenu__subitem"><a href="" class="topmenu__sublink">Пункт меню второго уровня 5</a></li>
				</ul>
			</li>
		</ul>
	</nav>



	<div class="same-block">
		<code>
			Emmet: nav.b-topnav>button.b-menu-toggle>span.menu-toggle__line^+ul.b-topmenu__list.js-topmenu__list>li.topmenu__item*5>a.topmenu__link*4{Пункт меню $}+ul.topmenu__sublist>li.topmenu__subitem*5>a.topmenu__sublink*4{Пункт меню второго уровня $}
		</code>
	</div>

<style>
*{
	margin:0;
	padding: 0;
	line-height: 1;
}
li {
	list-style-type: none;
}
html{
	font-size: 16px;
	font-family: Arial, sans-serif;
}
.same-block{
	background-color: lightblue;
	height: 500px;
	padding: 3em;
}
/* NAVBAR */
.b-menu-toggle {
	width: 34px;
	height: 34px;
	margin: 3px;
	background: none;
	border: solid 1px #666;
	padding: 4px;
	border-radius: 3px;
	cursor: pointer;
	outline: none;
}
.menu-toggle__line:after,
.menu-toggle__line:before {
    content: "";
    position: absolute;
    left: 0;
    top: -9px;
}
.menu-toggle__line:after {
    top: 9px;
}
.menu-toggle__line {
    position: relative;
    display: block;
}
.menu-toggle__line,
.menu-toggle__line:after,
.menu-toggle__line:before{
    width: 100%;
    height: 2px;
    background-color: #333;
    transition: all 0.3s;
    backface-visibility: hidden;
    border-radius: 2px;
}
.b-menu-toggle.on .menu-toggle__line {
    background-color: transparent;
}
.b-menu-toggle.on .menu-toggle__line:before {
    transform: rotate(45deg) translate(6px, 7px);
}
.b-menu-toggle.on .menu-toggle__line:after {
    transform: rotate(-45deg) translate(6px, -7px);
}
@media (min-width: 240px){
	.b-topnav {
		position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	background-color: #fff;
    	z-index: 99999999;
    	overflow-y: auto;
    	box-shadow: 0 1px 3px rgba(100,100,100,0.9);
    	max-height: 400px;
    	max-height: 90vh;
	}
	.b-topmenu__list {
		margin: 0 0 0.5em 3px;
		max-height: 0;
		overflow:hidden;
    	transition: max-height ease-out .3s;
	}
	.b-topmenu__list.on {
		max-height: 1000px;
		
	}
	.topmenu__item {
		display: block;
		padding: 0.5em 0;
	}
	.topmenu__link {
		color: #333;
		text-transform: uppercase;
	}
	/* level 2 */
	.topmenu__sublist{
		margin: 0.5em 0 0.5em 1em;
	}
	.topmenu__sublink {
		color: #333;
	}
	.topmenu__item.active .topmenu__link,
	.topmenu__link:hover,
	.topmenu__subitem.active .topmenu__sublink,
	.topmenu__sublink:hover {
		color: #007eff;
	}
}
@media (min-width: 768px){
	.b-menu-toggle {
		display: none;
	}
	.b-topnav {
		position: relative;
    	top: 0;
    	left: 0;
    	right: 0;
    	background-color: #007eff;
    	z-index: 0;
    	overflow-y: initial;
    	box-shadow: none;
    	max-height: none;
    	margin-bottom: 20px;
	}
	.b-topmenu__list {
		margin-left: 0;
		display: table;
		width: 100%;
		background-color: #007eff;
		overflow: visible;
	}
	.topmenu__item {
		display: table-cell;
		padding: 0.5em 0;
		text-align: left;
		position: relative;
	}
	.topmenu__link{
		padding: 0 1em;
		color: #fff;
	}
	.topmenu__link:hover,
	.topmenu__item.active .topmenu__link{
		color: #333;
	}
	/*level 2 */
	.topmenu__sublist{
		margin:0;
		display: none;
		background-color: #007eff;
	}
	.topmenu__item:hover>.topmenu__sublist,
	.topmenu__item>.topmenu__sublist:hover {
		display: block;
		position: absolute;
		top:25px;
		left:0;
		right: 0;
	}	
	.topmenu__subitem {
		display: block;
		padding: 0.5em 1em;
		text-align: left;
	}
	.topmenu__sublink {
		color: #fff;
		line-height: 1.3;	
	}
	.topmenu__subitem.active>.topmenu__sublink,
	.topmenu__subitem:hover>.topmenu__sublink  {
		color: #333;
	}
}
/* /NAVBAR */
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
	/*Мобильное меню*/
	$(".js-menu-toggle").on('click', function() {
	  $(this).toggleClass('on');
	 
	   $(".js-topmenu__list").toggleClass('on');
	  return false;
	});
</script>
</body>
</html>

Ответ написан более трёх лет назад

Комментировать

Как передать начальные данные клиентской стороне?

Андрей @AndreyMyagkov

Вы правильно поступаете

Ответ написан более трёх лет назад

Комментировать

Как сделать карту google в окне bootstrap?

Андрей @AndreyMyagkov

найдите другой код вставки карты, скорее всего старый код нашли

Ответ написан более трёх лет назад

1 комментарий

Как разрешить доступ другому человеку в yandex метрика?

Андрей @AndreyMyagkov

домен не надо было добавлять, он сам появится у вас

Ответ написан более трёх лет назад

Комментировать

Ноутбук Windows для web-дизайнера?

Андрей @AndreyMyagkov

Для веб-дизайна критическими параметрами будут качество цветопередачи и производительность.
Поэтому экран должен быть на IPS матрице? диагональ 15 дюймов. Меньше не советую. Разрешение в пикселях должно более-менее совпадать с разрешениями настольных мониторов такой же диагонали, иначе шрифты в дизайне будете ставить на размер больше. Т.е. если берете ноут с диагональю 15.6 дюймов, то разрешение должно быть 1366 по ширине, не больше.
Памяти от 6гб (можно взять с 4гб и добавить планку памяти).
Процессор оптимально Intel Core I5.
Желательно иметь SSD диск, опять же можно поставить самому на место обычного HDD.
Возможно вы захотите подключить ноутбук к внешнему монитору, тогда смотрите что бы совпадали разъемы.
Желательно что бы были разъемы USB 3

Ответ написан более трёх лет назад

2 комментария

Какой мощный компрессор для уменьшения размера изображений Вы используете?

Андрей @AndreyMyagkov

Нестандартный, разовый способ для картинок сайта: тестим страницу в google page speed, Гугл сам определит какие картинки, скрипты можно дожать и даст архив со сжатыми.

Ответ написан более трёх лет назад

Комментировать

Есть ли плагин к саблайму, который из html разметки создаёт структуру для css/scss?

Андрей @AndreyMyagkov

Tag для Sublime 3

Ответ написан более трёх лет назад

1 комментарий

Почему не индексируется сайт?

Андрей @AndreyMyagkov

А как вы проверяете что он индексируется?
Гугл хавает сайты за 1 день обычно, яндекс месяц может.

Ответ написан более трёх лет назад

Комментировать

Где грань авторского права в верстке?

Андрей @AndreyMyagkov

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

Ответ написан более трёх лет назад

Комментировать

Что я не правильно делаю с Media queries?

Андрей @AndreyMyagkov

media only screen and (min-width : 1201px) and (max-width : 1600px) {

Ответ написан более трёх лет назад

Комментировать

Как называется одним словом фирма по разработке программного обеспечения?

Андрей @AndreyMyagkov

Software developer
IT developer
Разработчик ПО

Ответ написан более трёх лет назад

Комментировать

Сколько стоит сайт, подобный booking.com?

Андрей @AndreyMyagkov

Букинг однозначно стоит более миллиона долларов, например российский сервис по поиску авиабилетов Эвитерра обошелся в миллион долларов.

Ответ написан более трёх лет назад

Комментировать

Как работать с dom внутри iframe?

Андрей @AndreyMyagkov

если подключен jquery
то высота фрейма:

$( "#tinymce-editor-1_ifr" ).contents().find('body').ourerHeight();

проверку высоты можно сделать по таймеру или по клику на body

не уверен, но может есть в настройках редактора автоматического увеличения высоты?

Ответ написан более трёх лет назад

Комментировать

Войдите на сайт