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

Шпаргалка по CSS Selector Изучение

Макет целевой страницы в чистом 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>

Вывод:

Читайте также:  Что нового в Node.js 20

В этом примере описывается базовая реализация макета

Пример 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>

Вывод:

Это еще один базовый пример, описывающий использование

Оцените статью
bestprogrammer.ru
Добавить комментарий