百度前端技术学园

# 多列布局模仿报纸风格

# 课程目标

  • 掌握在 web 页面中创建多列布局的方法
  • 复习盒模型浮动相关概念

# 阅读

# 编码

参考如下示例图 (opens new window)，完成模仿报纸风格制作一个 HTML 页面，并且添加如下要求的 CSS 样式代码

  • 要求运用多列布局实现模仿报纸风格的三列布局
  • 设置合适的列间隙，以及给列添加边框样式
  • 报纸大标题 Newspaper Title 和 表示时间的标题横跨三列
  • 样例中有两张图片，分别实现左浮动和右浮动，图片自定（不能违法、反动、色情等）
  • 实现三个首字母下沉效果,你需要使用伪元素结合浮动属性实现。
  • 第二列:无序列表风格为i,ii,iii...
  • 第三列中:使用box-radius属性实现三个不规则形状，使用左浮动排列这三个形状。
  • 第三列中:使用box-shadow属性给这三个不规则形状增加阴影,模仿实现一个拟态效果
  • 引入 web 字体，字体风格为PT Serif
  • 页面背景颜色为rgb(249 247 241)

下面为 HTML 模板代码(仅供参考)

<article>
  <!--报纸大标题-->
  <h1>Newspaper Title</h1>
  <!--时间栏-->
  <div>
    <time>Sunday, 9<sup>th</sup> September 2021</time>
  </div>
  <!--第一列-->
  <section>
    <h2>WHAI IS CSS？</h2>
    <p>
      All the documentation in this page is taken from
      <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">MDN</a>
    </p>
    <p lang="en">
      <!--这里的图片需要左浮动-->
      <img
        src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1024px-CSS3_logo_and_wordmark.svg.png"
      />
      <!--段落首字需要大写并且下沉-->
      CSS is a language for specifying how documents are presented to users —
      how they are styled, laid out, etc A document is usually a text file
      structured using a markup language — HTML is the most common markup
      language, but you may also come across other markup languages such as SVG
      or XML. Presenting a document to a user means converting it into a form
      usable by your audience. Browsers, like Firefox, Chrome, or Edge , are
      designed to present documents visually, for example, on a computer screen,
      projector or printer.
    </p>
    <p>
      CSS can be used for very basic document text styling — for example
      changing the color and size of headings and links. It can be used to
      create layout — for example turning a single column of text into a layout
      with a main content area and a sidebar for related information. It can
      even be used for effects such as animation
    </p>
  </section>

  <!--第二列-->
  <section>
    <h3>The Box Model</h3>
    <p>
      <!--这里的图片需要右浮动-->
      <img
        src="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model/boxmodel-(3).png"
      />
      <!--段落首字需要大写并且下沉-->
      Everything in CSS has a box around it, and understanding these boxes is
      key to being able to create layouts with CSS, or to align items with other
      items. In this lesson, we will take a proper look at the CSS Box Model so
      that you can build more complex layout tasks with an understanding of how
      it works and the terminology that relates to it.
    </p>
    <!--列表风格需要修改-->
    <ul>
      <li>The box will break onto a new line.</li>
      <li>
        The box will extend in the inline direction to fill the space available
        in its container. In most cases this means that the box will become as
        wide as its container, filling up 100% of the space available.
      </li>
      <li>The width and height properties are respected.</li>
      <li>
        Padding, margin and border will cause other elements to be pushed away
        from the box
      </li>
    </ul>
  </section>

  <!--第三列-->
  <section>
    <h3>CSS Border Properties</h3>
    <!--段落首字需要大写并且下沉-->
    <p>
      The border-radius CSS property rounds the corners of an element's outer
      border edge. You can set a single radius to make circular corners, or two
      radii to make elliptical corners.
    </p>

    <h4>Border Radius Examples</h4>
    <p>We can use the border-radius attribute to make the following shapes</p>
    <!--这里需要添加完成三个不规则形状的出HTML-->

    <p>Box-shadow demo</p>
    <p>
      Neumorphismis also a popular CSS style. Its main principle is to use the
      boxshadow attribute
    </p>
    <!--这里需要添加完成拟态效果三个不规则形状的出HTML-->
  </section>
</article>

以上的 HTML 代码提供给你，以便大家进行快速实践 CSS 知识，仅供参考，时间充足的同学完全可以自己构建一个 HTML 页面。

# 自测问题

思考下列属性分别有什么作用

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

# 提交

把你的代码提交到 Github ，把 Github 地址提交到作业里，如果有余力的同学，可以学习如何在 Github 中预览你的 HTML 代码，并提交预览地址。

# 总结

找一个你可以记录笔记的地方，可以是电脑里的记事本或是手边的笔记本（不做任何限制），记录下今天的学习笔记，包括以下内容：

  • 日期，今天的学习总用时，今天学习的目标是什么，是否达成
  • 哪些东西今天了解得比较透彻，说说自己的理解
  • 哪些东西今天了解到了一些，还有哪些点需要后续继续深入阅读
  • 哪些东西今天学了之后还有很多疑问没有被解答，把问题记录下来，以待后续解决

← 瀑布流布局 →