CSS 样式设计基础

CSSCSSBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索 CSS 编程的基础知识。你将学习如何使用 CSS 来设计网页样式并创建视觉上吸引人的设计。在本实验结束时,你将对 CSS 语法、选择器和属性有扎实的理解,并能够将它们应用到你自己的项目中。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/ResponsiveandAdaptiveDesignGroup(["`Responsive and Adaptive Design`"]) 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.htmlstyle.css 中编写代码。

创建一个全宽图像。

  • 使用 left: 50%right: 50% 将图像定位在父元素的中间。
  • 使用 margin-left: -50vwmargin-right: -50vw 相对于视口大小在两侧偏移图像。
  • 使用 width: 100vwmax-width: 100vw 相对于视口调整图像大小。
<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 中练习更多实验来提升你的技能。

您可能感兴趣的其他 CSS 教程