Создайте web-страничку, состоящую из 3-х фреймов, названных условно, «left», «right», «bottom». Фрейм «left» должен содержать перечень

2 ноября, 2023
0 комментариев

Пользователь задал следующий вопрос:

Создайте web-страничку, состоящую из 3-х фреймов, названных условно
«left», «right», «bottom». Фрейм «left» должен содержать перечень факультетов университета, при щелчке по названию факультета в
фрейме «right» должно появиться описание факультета. Во фрейм
«bottom» поместить бегущую строку с приглашением поступать в университет. Бегущая строка должна быть разноцветной.

Этот ответ написан нейросетью.

Внимание! Ответы искусственного интеллекта могут быть неточными. Не полагайтесь на них в медицине, юриспруденции, финансах и вопросах безопасности. При принятии важных решений всегда консультируйтесь с профильными специалистами.
Администрация сайта не несет ответственности за любой автоматически созданный контент. Если вы обнаружили ошибки, пожалуйста, сообщите об этом через кнопку "репорт" внизу ответа и мы примем соответствующие меры. Спасибо за вашу помощь в улучшении качества нашего сервиса.

текстовая нейросеть отвечает:

Для реализации данной задачи мы можем использовать HTML и CSS. 

HTML - это язык разметки, который используется для создания структуры веб-страницы. 

CSS - это язык стилей, который используется для изменения внешнего вида элементов веб-страницы.

Прежде всего, создадим HTML-файл со следующим содержимым:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Мой университет</title>

    <style>

        body {

            margin: 0;

        }

        #leftFrame {

            float: left;

            width: 20%;

            height: 100vh;

            background-color: #f0f0f0;

        }

        #rightFrame {

            float: left;

            width: 70%;

            height: 100vh;

            background-color: #fff;

        }

        #bottomFrame {

            clear: both;

            background-color: #000;

            color: #fff;

            padding: 10px;

            position: fixed;

            bottom: 0;

            width: 100%;

        }

        #bottomFrame span {

            animation: runningText 20s linear infinite;

        }

        @keyframes runningText {

            0% { transform: translateX(100%); }

            100% { transform: translateX(-100%); }

        }

    </style>

</head>

<body>

    <iframe id="leftFrame" src="left.html"></iframe>

    <iframe id="rightFrame" src="right.html"></iframe>

    <div id="bottomFrame">

        <span>Поступай в наш университет!</span>

    </div>

</body>

</html>

В этом файле мы создаем 3 фрейма, используя элемент <iframe>. Назначаем каждому фрейму уникальный идентификатор, чтобы мы могли применить к ним стили с помощью CSS.

Затем мы определяем стили для каждого фрейма и для бегущей строки в разделе <style>. 

В стиле для body мы устанавливаем отступ по умолчанию равным 0, чтобы убрать внешние отступы.

В стиле для #leftFrame мы задаем размеры и цвет фона фрейма слева. Мы используем float: left, чтобы поместить его слева от основного содержимого.

В стиле для #rightFrame мы задаем размеры и цвет фона фрейма справа.

В стиле для #bottomFrame мы задаем цвет фона, цвет текста, отступы и устанавливаем фиксированное положение к нижней части страницы. Мы также добавляем анимацию для бегущей строки с помощью @keyframes. В данном случае бегущая строка будет перемещаться горизонтально слева направо.

Сохраните этот файл с расширением .html, например index.html.

Теперь создадим два дополнительных HTML-файла «left.html» и «right.html», которые будут содержать содержимое для фреймов «left» и «right» соответственно.

В файле left.html добавим следующий код:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Факультеты университета</title>

</head>

<body>

    <ul>

        <li><a href="javascript:void(0)" onclick="displayDescription('Факультет 1')">Факультет 1</a></li>

        <li><a href="javascript:void(0)" onclick="displayDescription('Факультет 2')">Факультет 2</a></li>

        <li><a href="javascript:void(0)" onclick="displayDescription('Факультет 3')">Факультет 3</a></li>

    </ul>

    <script>

        function displayDescription(description) {

            parent.document.getElementById("rightFrame").innerHTML = description;

        }

    </script>

</body>

</html>

В файле right.html добавим следующий код:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Описание факультета</title>

</head>

<body>

    <div id="description">Выберите факультет слева для отображения описания</div>

</body>

</html>

Теперь, когда мы откроем файл index.html в браузере, мы увидим 3 фрейма - фрейм слева с перечнем факультетов, фрейм справа с описанием факультета и фрейм внизу с бегущей строкой.

Если мы щелкнем по названию факультета в левом фрейме, описание факультета будет отображаться в правом фрейме. Мы достигаем этого, вызывая функцию displayDescription, которая получает описание факультета в качестве аргумента и изменяет содержимое правого фрейма с помощью innerHTML.

Таким образом, мы создали web-страницу с 3-мя фреймами, названными «left», «right» и «bottom», и добавили возможность отображения описания факультета при щелчке по названию факультета. Также мы добавили бегущую строку в нижнюю часть страницы.

Создайте web-страничку, состоящую из 3-х фреймов, названных условно, «left», «right», «bottom». Фрейм «left» должен содержать перечень

Задайте любой вопрос нейросети!

но вы должны быть авторизованы, чтобы ей пользоваться

Создайте web-страничку, состоящую из 3-х фреймов, названных условно, «left», «right», «bottom». Фрейм «left» должен содержать перечень

Задайте любой вопрос нейросети!

но вы должны быть авторизованы, чтобы ей пользоваться

Обратная связь с администрацией проекта

Форма репорта неправомерного контента.

Хотите задать любой вопрос нейросети?