Мастерство в стилизации с CSS: Повысьте свой веб-дизайн

Введение

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") subgraph Lab Skills css/selectors -.-> lab-35202{{"Основы стилизации с CSS"}} css/margin_and_padding -.-> lab-35202{{"Основы стилизации с CSS"}} css/width_and_height -.-> lab-35202{{"Основы стилизации с CSS"}} css/positioning -.-> lab-35202{{"Основы стилизации с CSS"}} css/mobile_first_design -.-> lab-35202{{"Основы стилизации с CSS"}} end

Полноэкранное изображение

Вы можете написать код в index.html и style.css..

Создает полноэкранное изображение.

Используйте left: 50% и right: 50%, чтобы расположить изображение по центру родительского элемента.
Используйте margin-left: -50vw и margin-right: -50vw, чтобы сдвинуть изображение по обеим сторонам относительно размера viewport.
Используйте width: 100vw и max-width: 100vw, чтобы задать размер изображения относительно viewport.

<main>
  <h4>Lorem ipsum dolor sit amet</h4>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris molestie
    lobortis sapien, sit amet iaculis est interdum tincidunt. Nunc egestas nibh
    ut metus elementum consequat. Integer elit orci, rhoncus efficitur lectus
    eu, faucibus interdum felis.
  </p>
  <p>
    <img class="full-width" src="https://picsum.photos/id/257/2560/1440.jpg" />
  </p>
  <p>
    Orci varius natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Nullam pretium lectus sed ex efficitur, ac varius sapien
    gravida. Sed facilisis elit quis sem sollicitudin, ut aliquam neque
    eleifend. Maecenas sagittis neque sapien, ac tempus nulla tempus nec.
    Curabitur tellus est, convallis id dolor ut, porta hendrerit quam.
  </p>
</main>

main {
  margin: 0 auto;
  max-width: 640px;
}

img {
  height: auto;
  max-width: 100%;
}

.full-width {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: 100vw;
  width: 100vw;
}

Резюме

Поздравляем! Вы завершили практическое занятие по полноэкранному изображению. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.