Категории:

  • Программирование


  • Изобразительное искусство


  • Программирование встраиваемых систем


  • Компьютерная графика


  • WEB Разработка


  • Музыка


  • Инженерия


  • iVARIOUS


  • Mobil App


  • HTML. Создаем меню

    html menu create Пример тегов HTML и стилей CSS для создания простого меню. Создан тег <div id="menu"> </div> с шириной width: 100%; в котором находятся элементы меню. За отступы его внутренних элементов отвечает значения padding, за фон - background. Теги <ul> </ul> содержат в себе списки <li> </li>. По умолчанию строка списка начинается с ромбика, точки и некоторых других символов по выбору, чтоб их убрать применяем list-style: none; для обведения списка в рамки записываем значения в border , и border-radius для округления углов. Параметр width: auto; применяет автоматическую ширину для содержимого списка ( в нашем случае это ссылки-меню). Также по умолчанию список вертикальный, со строками сверху-вниз, чтоб выводить его горизонтально применяется команда float: left. Margin-left увеличивает зазор между горизонтальными элементами списка. Background: голубой фон для элементов. Управление видом самих ссылок, как и с другими элементам: #menu + тег "а" обозначающий ссылку. По умолчанию ссылка подчеркнута, чтоб это отменить применяется команда text- decoration: none; Тегом color выбираем цвет названия ссылки.
    < html >

    < head >

    < link rel='stylesheet' type="text/css" href="layout.css"> <!--Адрес файла с описанием стилей-->

    </head>

    < div id="menu"> <!--Выделение фрагмента страницы с именем menu-->

    <ul>
    <li> <a href="www.ivarious.com">Главная</a> </li>

    <li> <a href="www.ivarious.com">Продукция</a> </li>

    <li> <a href="www.ivarious.com">Контакт</a> </li>
    </ul>

    </div> <!-- Конец фрагмента страницы с именем menu-->

    </html>
    Документ layout.css с описанием стиля.


    #menu{
    width:100%;
    height: 60px;
    padding: 3px;
    background: gray;
    }


    #menu li {
    padding: 5px;
    list-style: none;
    border: 2px solid gray;
    border-radius: 5px;
    float: left;
    margin-left: 175px;
    background: lightblue;
    }


    #menu a {
    text-decoration: none;
    color: aliceblue;
    }



    Читайте больше в категории: WEB Разработка

    2016-03-16 12:02:56



    Другие статьи:

    STM32. ADC (АЦП)

    STM32. Программирование на СИ

    Java. Графики функций - продолжение

    PHP. Строки. Переменные в строках

    Физика цвета в живописи

    HTML. Таблицы

    Android. HttpURLConnection. Чтение WEB HTML

    2D. Рисование реалистичной воды

    Бронецький Замок. 3D реконструкція

    STM32. Режим альтернативной функции