Отправляет email-рассылки с помощью сервиса Sendsay
Компьютеры и интернет → Веб → Порталы

Учимся работать в компьютерных программах 1086

Открытая группа
54192 участника
Администратор VLLq
Модератор JoomlaSecrets.ru
Модератор В ТОП 10
Модератор Smart Payment
Модератор DigitalExpert

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

20250110213210

←  Предыдущая тема Все темы Следующая тема →
webguru
пишет:

Создание простейшего макета

Здравствуйте! В этой статье мы обобщим знания полученные из уроков Блочная верстка (2 колонки) и Блочная верстка (3 колонки) и создадим простейший макет страницы для сайта. Макет будет 3 колоночным с основным содержимым и 2 колонками по бокам.

Для начала определим базовую структуру веб-страницы:

 <!DOCTYPE html>
lt;html>
    <head>
        <meta charset="utf-8">
        <link href="/styles.css" rel="stylesheet">
        <title>Блочная верстка в HTML5</title>
    </head>
    <body>
        <div id="header">
            <h1>MySyte.com - Сайт о Lorem Ipsum</h1>
            <div id="nav">
                <ul>
                    <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>
                </ul>
            </div>
        </div>
        <div class="wrapper">
            <div id="sidebar1" class="aside">
                <h2>The standard Lorem Ipsum passage</h2>
                <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                ut labore et dolore magna aliqua..."</p>
                </div>
            <div id="sidebar2" class="aside">
                <h2>1914 translation by H. Rackham</h2>
                <p>It is a long established fact that a reader will be distracted by the readable
                content of a page when looking at its layout.</p>
                <h3>Options</h3>
                <ul>
                    <li>Item1</li>
                    <li>Item2</li>
                    <li>Item3</li>
                </ul>
            </div>
            <div id="article">
                <h2>What is Lorem Ipsum?</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</p>
                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of
                classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
                a Latin professor at Hampden-Sydney College in Virginia...</p>
            </div>
        </div>
        <div id="footer">
            <p>Contacts: admin@mysyte.com<;/p>
            <p>Copyright © MySyte.com, 2016</p>
        </div>
    </body>
</html>

Читать далее

 
Это интересно
0

webguru
26.01.2017
Пожаловаться Просмотров: 684  
Комментарии 1
←  Предыдущая тема Все темы Следующая тема →


Комментарии временно отключены