Пришло время для вашего первого задания в этом курсе.
В первом задании
мы предоставим вам нестилизованную страницу aboutus.html.
ZIP-файл, содержащий эту
страницу aboutus.html, доступен для вас в инструкциях по назначению.
Поэтому вам нужно загрузить страницу, а затем переместить эту страницу в папку con Fusion.
После этого вы примените
классы Bootstrap и сетку Bootstrap Flexbox для стилизации страницы,
затем вы перемещаете страницу в папку Con Fusion,
затем вы можете просмотреть страницу в своем браузере, набрав
localhost: 3000/aboutus.html и ваш сервер сборки облегченного сервера вверх на странице aboutus.html,
так что это единственный способ просмотреть страницу.
Итак, для начала
страница будет выглядеть так,
полностью Unstyle страница, которая просто содержит содержимое.
Теперь ваша работа состоит в том, чтобы пройти через три задачи, чтобы форматировать эту страницу.
Давайте рассмотрим три задачи более подробно.
Ваша первая задача - применить
Bootstraps CSS и классы Javascript к
странице aboutus.html, чтобы эта страница была мгновенно преобразована в эту страницу,
где, как только вы добавите классы Bootstraps CSS и JavaScript,
верхний и нижний колонтитулы будут автоматически отформатированы правильно,
потому что я просто скопировал заголовок в нижнем колонтитуле со страницы index.html на
эту страницу, и я оставил все форматирование Bootstrap как таковое,
но фактическое содержимое страницы все еще остается нестилизованным.
Итак, теперь, в качестве второй задачи,
вы собираетесь применить сетку Bootstraps Flexbox, включая контейнер,
строки и классы столбцов к
этому содержимому или странице, чтобы вы могли правильно настроить его.
Теперь, когда примените классы,
вы собираетесь применить классы строк и столбцов к aboutus, чтобы просто оставить его как таковой.
Затем вы собираетесь применить классы строк и столбцов к
этому содержимому, чтобы этот контент занимал только половину экрана,
а затем вы собираетесь применить классы строк и столбцов к
этому содержимому, чтобы занять всю ширину экрана.
Итак, правильно выберите классы строк и столбцов, чтобы применить к этому.
Вы можете использовать пользовательские классы CSS, которые мы уже
реализовали для index.html, добавив файл style.css,
также для стилизации содержимого на этой странице.
Поэтому, когда вы завершите вторую задачу,
ваша страница будет выглядеть так.
Таким образом, вы можете видеть, что страница aboutus существует сама по себе.
Затем наша история часть,
обратите внимание, что на маленьком или большом экране,
Наша история будет занимать только половину ширины экрана.
Затем часть Corporate Leadership занимает всю ширину экрана в этом случае.
Это вторая задача, которую необходимо выполнить в своем задании.
Для третьей задачи, как вы можете видеть,
этот макет контента выглядит отлично для больших размеров экрана,
но когда вы переходите на дополнительный маленький размер экрана, особенно это,
вы заметите, что содержание слишком много в этом разделе.
Итак, что мы хотели бы сделать, это использовать другой класс Bootstrap, предоставленный нам, называемый
[неслышным] и блок DSM.
Существует ссылка на адаптивные классы в ресурсах назначения,
поэтому вы можете проверить документацию для блока [неслышный] и DSM.
Вы должны применить их так, чтобы это описание было
скрыто в дополнительных небольших размерах экрана.
Поэтому, когда вы классы к этой части корпоративного лидерства,
то же содержание теперь будет выложено без описания,
так что он будет скрыт в дополнительных небольших размеров экранов.
Но когда вы перейдете к маленькому большому размеру экрана,
контент станет видимым.
Таким образом, вы можете заметить, что для дополнительного небольшого размера экрана
содержимое скрыто,
но для небольшого размера экрана,
это содержание описания будет показано четко.
Итак, это ваша третья задача в вашем задании.
Пока вы находитесь в нем, вы также можете применить те же классы к
описаниям на нашей странице index.html, чтобы
подробные описания элементов содержимого также были скрыты
на странице index.html при просмотре на дополнительных небольших размерах экрана.
Это завершает ваше первое задание.
Кроме того, когда вы отправляете свое задание,
пожалуйста, сделайте снимок экрана
на всю страницу вашего макета как в маленьком, так и в очень большом размере экрана,
а затем включите это как часть вашего представления.
Чтобы сделать полный скриншот страницы в Chrome,
вы можете использовать доступное нам расширение Chrome,
ссылка на расширение Chrome предоставляется в
ресурсах назначения, которые следуют описанию назначения.
После завершения задания,
в случае, если вы сохраняете свои изменения в репозитории Git,
не забудьте зафиксировать изменения в
вашем репозитории Git с помощью Message Assignment One.