Уроки

Последние посты на desiremotors.ru

Лента не найдена

Последние объявления на saledrom.ru

Лента не найдена

Урок 11 Создаём ссылки меню и кнопку при наведение.

Рейтинг:  0 / 5

Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна
 

В данном уроке разберём такую вещь,как текстовые теги списков ul/ul и li/li. Добавим такие же ссылки как рисовали в фотошопе,а так же сделаем кнопку при наведении в пункте меню. Добавим такие же ссылки как рисовали в фотошопе,а так же сделаем кнопку при наведении в пункте меню. Урок получился не сильно большим,но вполне полезным. В архив положил и сам проект который рисуем,для тех у кого возникли непонятные ошибки или просто лень идти в след за мной.

P.S. Данное создание шаблонов рассказываю так,как сам понимаю. Буду стараться подгонять к правильному написанию кода и распределения файлов,но от ошибок никто не застрахован.

Не забываем подписываться на рассылку по видеоурокам,чтобы не пропустить новые.

Решил ещё добавить для тех кто любит наилучшее качество,то есть без повторного сжатия,то выбираем свой вариант. Так же возможен просмотр в браузере.

Скачать

Оставьте свой комментарий

Оставить комментарий от имени гостя

0 / 3500 Ограничение символов
Ваш текст должен быть в пределах 3-3500 символов
правилами и условиями.

Люди, участвующие в этой беседе

  • Гость - Guest

    Добрый день. Подскажите пожалуйста что не так в коде. Создала меню, но в IE8 появилась белая разделяющая полоса между шапкой и полосой меню. Похожа на ту что мы создавали в предыдущем меню. И потом появляется дальше.<br /><br />кода<br />HTML<br />....<br /> Детские праздники<br /> Свадьба<br /> "Живая открытка"<br /> Другие праздники<br /> Контакты<br /> <br />CSS<br /><br />html, body {<br /> height:100%;<br /> width:100%;<br /> margin:0;<br /> padding:0;<br />}<br />body {<br /> background: url(../images/Fairytale.jpg) repeat center;<br /> }<br />#border{<br /> margin:0 auto;<br /> padding:0;<br /> width:960px;<br /> height:360px;<br />}<br />#polosa{<br /> margin:0;<br /> padding:0;<br /> background-color: #f4b9ed;<br /> width:960px;<br /> min-height:360px;<br />}<br />#shapka{<br /> margin:0 auto;<br /> padding:0;<br /> background:url(../images/shapka.jpg) no-repeat;<br /> width:930px;<br /> height:360px;<br />}<br />#menu{<br /> margin:0 auto;<br /> padding:0;<br /> background-color: #74055b;<br /> width:930px;<br /> height:45px;<br />}<br />ul li{<br /> list-style-type:none;<br /> display:inline<br /> }<br />li a{<br /> display:block;<br /> float:left<br /> }<br />li a{<br /> font-family: Georgia, "Times New Roman", Times, serif;<br /> font-size:20px;<br /> text-decoration: none;<br /> color:#FF0;<br />}<br />li a{<br /> display:block;<br /> float:left;<br /> padding: 6px 15px;<br />}<br />ul li a:hover{<br /> background: url(../images/Cnopka_navedenia.jpg) repeat;<br /> padding:7px 14px;<br /> position:relative;<br /> top:-3px<br />}<br />#zalivka{<br /> margin:0 auto;<br /> padding:0;<br /> background: url(../images/zalivka.jpg) repeat;<br /> width:930px;<br /> min-height:110px; <br />} <br />#content{<br /> margin:0 auto;<br /> margin-right:15px;<br /> padding:0;<br /> background-color:#ce90c1;<br /> opacity:0.7;<br /> width:685px;<br /> min-height:400px;<br /> float:right;<br />}<br />#left{<br /> margin:0;<br /> margin-left:15px;<br /> padding:0;<br /> background-color:#ce90c1;<br /> opacity:0.7;<br /> width:200px;<br /> min-height:400px;<br />}

  • Гость - Guest

    Добрый день. Подскажите пожалуйста что не так в коде. Создала меню, но в IE8 появилась белая разделяющая полоса между шапкой и полосой меню. Похожа на ту что мы создавали в предыдущем меню. И потом появляется дальше.<br /><br />кода<br />HTML<br />....<br /> Детские праздники<br /> Свадьба<br /> "Живая открытка"<br /> Другие праздники<br /> Контакты<br /> <br />CSS<br /><br />html, body {<br /> height:100%;<br /> width:100%;<br /> margin:0;<br /> padding:0;<br />}<br />body {<br /> background: url(../images/Fairytale.jpg) repeat center;<br /> }<br />#border{<br /> margin:0 auto;<br /> padding:0;<br /> width:960px;<br /> height:360px;<br />}<br />#polosa{<br /> margin:0;<br /> padding:0;<br /> background-color: #f4b9ed;<br /> width:960px;<br /> min-height:360px;<br />}<br />#shapka{<br /> margin:0 auto;<br /> padding:0;<br /> background:url(../images/shapka.jpg) no-repeat;<br /> width:930px;<br /> height:360px;<br />}<br />#menu{<br /> margin:0 auto;<br /> padding:0;<br /> background-color: #74055b;<br /> width:930px;<br /> height:45px;<br />}<br />ul li{<br /> list-style-type:none;<br /> display:inline<br /> }<br />li a{<br /> display:block;<br /> float:left<br /> }<br />li a{<br /> font-family: Georgia, "Times New Roman", Times, serif;<br /> font-size:20px;<br /> text-decoration: none;<br /> color:#FF0;<br />}<br />li a{<br /> display:block;<br /> float:left;<br /> padding: 6px 15px;<br />}<br />ul li a:hover{<br /> background: url(../images/Cnopka_navedenia.jpg) repeat;<br /> padding:7px 14px;<br /> position:relative;<br /> top:-3px<br />}<br />#zalivka{<br /> margin:0 auto;<br /> padding:0;<br /> background: url(../images/zalivka.jpg) repeat;<br /> width:930px;<br /> min-height:110px; <br />} <br />#content{<br /> margin:0 auto;<br /> margin-right:15px;<br /> padding:0;<br /> background-color:#ce90c1;<br /> opacity:0.7;<br /> width:685px;<br /> min-height:400px;<br /> float:right;<br />}<br />#left{<br /> margin:0;<br /> margin-left:15px;<br /> padding:0;<br /> background-color:#ce90c1;<br /> opacity:0.7;<br /> width:200px;<br /> min-height:400px;<br />}

  • Добрый день. Подскажите пожалуйста что не так в коде. Создала меню, но в IE8 появилась белая разделяющая полоса между шапкой и полосой меню. Похожа на ту что мы создавали в предыдущем меню. И потом появляется дальше.<br /><br />кода<br />HTML<br />....<br /> Детские праздники<br /> Свадьба<br /> "Живая открытка"<br /> Другие праздники<br /> Контакты<br /> <br />CSS<br /><br />html, body {<br /> height:100%;<br /> width:100%;<br /> margin:0;<br /> padding:0;<br />}<br />body {<br /> background: url(../images/Fairytale.jpg) repeat center;<br /> }<br />#border{<br /> margin:0 auto;<br /> padding:0;<br /> width:960px;<br /> height:360px;<br />}<br />#polosa{<br /> margin:0;<br /> padding:0;<br /> background-color: #f4b9ed;<br /> width:960px;<br /> min-height:360px;<br />}<br />#shapka{<br /> margin:0 auto;<br /> padding:0;<br /> background:url(../images/shapka.jpg) no-repeat;<br /> width:930px;<br /> height:360px;<br />}<br />#menu{<br /> margin:0 auto;<br /> padding:0;<br /> background-color: #74055b;<br /> width:930px;<br /> height:45px;<br />}<br />ul li{<br /> list-style-type:none;<br /> display:inline<br /> }<br />li a{<br /> display:block;<br /> float:left<br /> }<br />li a{<br /> font-family: Georgia, "Times New Roman", Times, serif;<br /> font-size:20px;<br /> text-decoration: none;<br /> color:#FF0;<br />}<br />li a{<br /> display:block;<br /> float:left;<br /> padding: 6px 15px;<br />}<br />ul li a:hover{<br /> background: url(../images/Cnopka_navedenia.jpg) repeat;<br /> padding:7px 14px;<br /> position:relative;<br /> top:-3px<br />}<br />#zalivka{<br /> margin:0 auto;<br /> padding:0;<br /> background: url(../images/zalivka.jpg) repeat;<br /> width:930px;<br /> min-height:110px; <br />} <br />#content{<br /> margin:0 auto;<br /> margin-right:15px;<br /> padding:0;<br /> background-color:#ce90c1;<br /> opacity:0.7;<br /> width:685px;<br /> min-height:400px;<br /> float:right;<br />}<br />#left{<br /> margin:0;<br /> margin-left:15px;<br /> padding:0;<br /> background-color:#ce90c1;<br /> opacity:0.7;<br /> width:200px;<br /> min-height:400px;<br />}
    <br />Тут 2 решения,есть ошибка где то или просто смотрите дальше уроки,так как возможно в следующих я рассказывал как всё подправить. Если проблема останется,то тогда пишите,но после того как досмотрите,поточу что все ошибки сразу не учтёшь,а уроки я записывал зимой,весной поэтому уже не могу в точности всё помнить.

  • Добрый день. Подскажите пожалуйста что не так в коде. Создала меню, но в IE8 появилась белая разделяющая полоса между шапкой и полосой меню. Похожа на ту что мы создавали в предыдущем меню. И потом появляется дальше.<br /><br />кода<br />HTML<br />....<br /> Детские праздники<br /> Свадьба<br /> "Живая открытка"<br /> Другие праздники<br /> Контакты<br /> <br />CSS<br /><br />html, body {<br /> height:100%;<br /> width:100%;<br /> margin:0;<br /> padding:0;<br />}<br />body {<br /> background: url(../images/Fairytale.jpg) repeat center;<br /> }<br />#border{<br /> margin:0 auto;<br /> padding:0;<br /> width:960px;<br /> height:360px;<br />}<br />#polosa{<br /> margin:0;<br /> padding:0;<br /> background-color: #f4b9ed;<br /> width:960px;<br /> min-height:360px;<br />}<br />#shapka{<br /> margin:0 auto;<br /> padding:0;<br /> background:url(../images/shapka.jpg) no-repeat;<br /> width:930px;<br /> height:360px;<br />}<br />#menu{<br /> margin:0 auto;<br /> padding:0;<br /> background-color: #74055b;<br /> width:930px;<br /> height:45px;<br />}<br />ul li{<br /> list-style-type:none;<br /> display:inline<br /> }<br />li a{<br /> display:block;<br /> float:left<br /> }<br />li a{<br /> font-family: Georgia, "Times New Roman", Times, serif;<br /> font-size:20px;<br /> text-decoration: none;<br /> color:#FF0;<br />}<br />li a{<br /> display:block;<br /> float:left;<br /> padding: 6px 15px;<br />}<br />ul li a:hover{<br /> background: url(../images/Cnopka_navedenia.jpg) repeat;<br /> padding:7px 14px;<br /> position:relative;<br /> top:-3px<br />}<br />#zalivka{<br /> margin:0 auto;<br /> padding:0;<br /> background: url(../images/zalivka.jpg) repeat;<br /> width:930px;<br /> min-height:110px; <br />} <br />#content{<br /> margin:0 auto;<br /> margin-right:15px;<br /> padding:0;<br /> background-color:#ce90c1;<br /> opacity:0.7;<br /> width:685px;<br /> min-height:400px;<br /> float:right;<br />}<br />#left{<br /> margin:0;<br /> margin-left:15px;<br /> padding:0;<br /> background-color:#ce90c1;<br /> opacity:0.7;<br /> width:200px;<br /> min-height:400px;<br />}
    <br />Тут 2 решения,есть ошибка где то или просто смотрите дальше уроки,так как возможно в следующих я рассказывал как всё подправить. Если проблема останется,то тогда пишите,но после того как досмотрите,поточу что все ошибки сразу не учтёшь,а уроки я записывал зимой,весной поэтому уже не могу в точности всё помнить.

  • Гость - Е

    Урок невозможно скачать. Где возможно?

  • Скачивайте.

Подпишитесь на наши соц группы

  1. Вконтакте
  2. Facebook
  3. Google+1
  4. Ок
  5. Твитер

Голосование в ВК

Авторизация

Последние комментарии

Гость - profile
Coupons DJ-Classifieds App нас... в Материалы Joomla
Гость - profile
BuaXua Floating 3.6.0 рус в Материалы Joomla
Гость - profile
BuaXua Floating 3.6.0 рус в Материалы Joomla
Гость - profile
http://www.instiz.net/
JJ Accordion 3.1.0 рус в Материалы Joomla

Последнее на форуме

  • Нет сообщений для показа

Поддержка проекта