Макет целевой страницы на чистом CSS

Макет целевой страницы в чистом CSS облегчает создание адаптивной целевой страницы для веб-сайта или любого веб-приложения путем реализации доступных классов. Это помогает сделать привлекательное веб-приложение в целом, улучшающее взаимодействие с пользователем, а также интерактивность сайта или приложения. Он также обеспечивает подход к дизайну, ориентированный на мобильные устройства, который обеспечивает отзывчивость конкретного веб-приложения или сайта к любому размеру экрана или ширине устройства, а также поддержку старых браузеров.

Чистые классы макета целевой страницы CSS:

pure-g:помогает создать грид-контейнер.
pure-u:используется для создания элемента сетки внутри контейнера pure-g.
pure-form: помогает создать элемент формы.
pure-menu:помогает создать меню.
pure-menu-item: помогает создать пункт меню в элементе чистого меню.
pure-menu-link:помогает создать ссылку внутри элемента чистого меню.
pure-table:помогает создать элемент таблицы.
pure-button:помогает создать элемент кнопки.
pure-input: помогает добавить элемент ввода.

Синтаксис:

<div class="pure-g">
    <div class="pure-form">
        ...
    </div>
</div>

Пример 1. В этом примере описывается базовая реализация макета целевой страницы на чистом CSS.

HTML

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" href=

"https://unpkg.com/purecss@2.0.4/build/pure-min.css">

</head>

<body>

    <h1 style="color:green">

        GeeksforGeeks

    </h1>

    <h3>

        Pure CSS Landing Page Layout

    </h3>

    <header class="pure-menu pure-menu-horizontal">

        <a href="#" class="pure-menu-heading">

            Logo

        </a>

        <ul class="pure-menu-list">

            <li class="pure-menu-item">

                <a href="#" class="pure-menu-link">

                    Menu Item 1

                </a>

            </li>

            <li class="pure-menu-item">

                <a href="#" class="pure-menu-link">

                    Menu Item 2

                </a>

            </li>

            <li class="pure-menu-item">

                <a href="#" class="pure-menu-link">

                    Menu Item 3

                </a>

            </li>

        </ul>

    </header>

    <main class="pure-g">

        <div class="pure-u-1 pure-u-md-1-2">

            <h1>Welcome to My Landing Page</h1>

            <p>

                GeeksforGeeks is a popular website for programmers and

                computer science students. It provides a wide range of resources

                such as articles, tutorials, and practice problems to help users

                improve their programming skills. One of the key functionalities

                of the website is its wide range of topics covered.

                The website offers a variety of articles and tutorials on

                different programming languages, data structures, and algorithms,

                making it a great resource for anyone looking to improve their

                coding skills. The website also provides a platform for users to

                test their skills by solving practice problems,

                which are accompanied by detailed solutions and explanations.

                Additionally, GeeksforGeeks has a large and active community of

                users who can share their knowledge and help others with their

                coding problems.

            </p>

        </div>

        <div class="pure-u-1 pure-u-md-1-2">

            <form class="pure-form">

                <fieldset>

                    <legend>

                        Sign Up for Our Newsletter

                    </legend>

                    <label for="email">

                        Email

                    </label>

                    <input type="email"

                           id="email" required>

                    <button type="submit"

                            class="pure-button pure-button-primary">

                            Sign Up

                    </button>

                </fieldset>

            </form>

        </div>

    </main>

    <footer>

        <p>

            Copyright © 2021 My Company

        </p>

    </footer>

</body>

</html>

Вывод:

Пример 2. Это еще один базовый пример, описывающий использование макета целевой страницы в чистом CSS.

HTML

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" href=

"https://unpkg.com/purecss@2.0.4/build/pure-min.css">

    <style>

        .hero {

            background-color: #333;

            color: white;

            height: 400px;

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .hero h1 {

            font-size: 48px;

        }

        .hero p {

            font-size: 24px;

        }

        .feature {

            background-color: #f4f4f4;

            padding: 50px;

            text-align: center;

        }

        .feature h2 {

            font-size: 36px;

            margin-bottom: 20px;

        }

        .feature p {

            font-size: 18px;

            margin-bottom: 40px;

        }

        .feature img {

            max-width: 100%;

            height: auto;

            margin-bottom: 20px;

        }

    </style>

</head>

<body>

    <h1 style="color:green">

        GeeksforGeeks

    </h1>

    <h3>

        Pure CSS Landing Page Layout

    </h3>

    <header class="pure-menu pure-menu-horizontal">

        <a href="#"

           class="pure-menu-heading">

            Logo

           </a>

        <ul class="pure-menu-list">

            <li class="pure-menu-item">

                <a href="#"

                   class="pure-menu-link">

                       Menu Item 1

                </a>

            </li>

            <li class="pure-menu-item">

                <a href="#"

                   class="pure-menu-link">

                       Menu Item 2

                </a>

            </li>

            <li class="pure-menu-item">

                <a href="#"

                   class="pure-menu-link">

                       Menu Item 3

                </a>

            </li>

        </ul>

    </header>

    <div class="hero">

        <div class="pure-g">

            <div class="pure-u-1 pure-u-md-1-2">

                <h1>Welcome to GFG</h1>

                <p>

                    GeeksforGeeks is a popular website for programmers

                    and computer science students. It provides a wide

                    range of resources such as articles, tutorials, and

                    practice problems to help users improve their

                    programming skills. One of the key functionalities

                    of the website is its wide range of topics covered.

                </p>

                <a href="#" class="pure-button pure-button-primary">

                    Learn More

                </a>

            </div>

        </div>

    </div>

    <div class="pure-g">

        <div class="pure-u-1 pure-u-md-1-3">

            <div class="feature">

                <img src=

"https://media.geeksforgeeks.org/wp-content/uploads/20230124162938/gfg6.png"

                     alt="Feature 1 image">

                <h2>Feature 1</h2>

                <p>

                    The website offers a variety of articles and tutorials

                    on different programming languages, data structures, and

                    algorithms, making it a great resource for anyone looking

                    to improve their coding skills. The website also provides

                    a platform for users to test their skills by solving

                    practice problems, which are accompanied by detailed

                    solutions and explanations.

                </p>

            </div>

        </div>

        <div class="pure-u-1 pure-u-md-1-3">

            <div class="feature">

                <img src=

"https://media.geeksforgeeks.org/wp-content/uploads/20230124162938/gfg6.png"

                     alt="Feature 2 image">

                <h2>Feature 2</h2>

                <p>

                    Additionally, GeeksforGeeks has a large and active

                    community of users who can share their knowledge

                    and help others with their coding problems.Another

                    great functionality of GeeksforGeeks is its

                    user-friendly interface and easy navigation.

                </p>

            </div>

        </div>

        <div class="pure-u-1 pure-u-md-1-3">

            <div class="feature">

                <img src=

"https://media.geeksforgeeks.org/wp-content/uploads/20230124162938/gfg6.png"

                     alt="Feature 3 image">

                <h2>Feature 3</h2>

                <p>

                    The website is well-organized and easy to navigate,

                    making it easy for users to find the information

                    they need. The articles and tutorials are well-written

                    and easy to understand, making them accessible to users

                    of all skill levels. The website also has a search bar,

                    which allows users to quickly find specific information

                    or topics.

                </p>

            </div>

        </div>

    </div>

</body>

</html>

Вывод:

Читайте также: Команда Set Linux