Создание сайта
Регистрация
Продвижение
Монетизация
Облако тегов

Требуется для просмотраFlash Player 9 или выше.

Показать все теги

Главная » Создание сайта » HTML » Учебник HTML для начинающих. Блочная верстка

Учебник HTML для начинающих. Блочная верстка
Раздел: Создание сайта » HTML  
14 июня 2009   |   автор: admin Оставить комментарий



 

Урок 16. Ссылки и списки

 

Вы уже многому научились. Поэтому вам, скорее всего, не сложно будет сделать небольшое меню навигации и добавить несколько ссылок на страницу.

 

Сделаем меню навигации из трех пунктов. Укажем в нем главную страницу вашего сайта. Затем поставим ссылку на страницу, содержащую данное пособие, а третьему пункту вы присвоите назначение по своему усмотрению.

 

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

 

Итак, вот код HTML:

 

 

</p>
<p><div id="leftside"><br /> <h1>Левая колонка</h1><br /> <ul><br /> <li>Главная</li><br /> <li>Учебник HTML</li><br /> <li>Ваша ссылка</li><br /> </ul><br /> </div></p>
<p>

 

А вот дополнительный стиль CSS:

 

 

</p>
<p>#leftside ul{<br /> color: #CCCCFF;<br /> padding:10px 0px 10px 20px;<br /> font-size: 16px;<br /> font-weight: bold;<br />}</p>
<p> </p>
<p> </p>
<p>

 

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

 

Код HTML:

 

</p>
<p style="text-align: left;"><div id="leftside"><br /> <h1>Левая колонка</h1><br /> <ul><br /> <li><a href="index.html">Главная</a></li><br /> <li><a href="http://www.web-lesson.ru/site-creation/html/16-uchebnik-html-blochnaya-verstka.html">Учебник HTML</a></li><br /> <li><a href="#">Ваша ссылка</a></li><br /> </ul><br /></div></p>
<p>

 

 

Стиль CSS:

 

 

</p>
<p>#leftside a{<br /> color: #CCCCFF;<br /> padding:10px 0px 10px 20px;<br /> font-size: 16px;<br /> font-weight: bold;<br /> text-decoration:none;<br />}</p>
<p>#leftside a:hover{<br /> color: #FF0000;</p>
<p>}</p>

 

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

 

Вот, как это выглядит в браузере:

 

 

Учебник HTML для начинающих. Блочная верстка

 

 

 

Далее... Заключение

 

 

 

Вернуться к Оглавлению 

 


Ключевые теги: Учебник HTML, Блоки, div, блочная верстка
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
web-lesson.ru
Добавление комментария
Ваше Имя:
Ваш E-Mail:
Код:
Введите код