bootstrap排版布局_高级排版和布局挑战

最新推荐文章于 2023-09-05 11:21:09 发布

cungui5726

最新推荐文章于 2023-09-05 11:21:09 发布

阅读量326

点赞数

文章标签： java css html linux vue ViewUI

原文链接：https://thenewcode.com/874/Advanced-Typography-and-Layout-Challenge

版权

bootstrap排版布局

While many of my student’s final sites last semester were excellent, I did note a little weakness in typography and layout. Like everything in a two-year, two-lessons-per-week curriculum, there are some subjects I can’t address deeply in class, although I do provide extensive reading lists.

虽然上学期我学生的许多期末考试成绩都很出色，但我确实注意到版式和版式上有些不足。就像两年制，每周两节课的课程中的所有内容一样，尽管我确实提供了广泛的阅读清单，但有些课程在课堂上我无法深入探讨。

To address this gap, I’ve made the exercise you can see above: a cover for a fictional scientific journal featuring a wonderful illustration of a Sea Nettle jellyfish by Laurent M. Bourgeault. The goal of the exercise is to replicate the cover using HTML & CSS.

为了解决这一差距，我在上方进行了练习：虚构的科学杂志的封面，其中包括Laurent M. Bourgeault撰写的关于海荨麻水母的精彩插图。练习的目的是使用HTML和CSS复制封面。

挑战性 (Challenges)

This exercise is deliberately designed to challenge your skills, so there is no upper time limit: you should feel free to work on the exercise a little bit at a time. I’ve provided a CodePen of the completed cover; you can switch to Editor view on CodePen for clues and assistance if you wish. I’ll also write a blog post explaining the code in the near future.

本练习是专为挑战您的技能而设计的，因此没有上限时间：您应该一次随意进行一些练习。我提供了完整封面的CodePen ; 您可以根据需要在CodePen上切换到“编辑器”视图以获取线索和帮助。我还将在不久的将来写一篇博客文章来解释代码。

A few important points to note:

需要注意的几个要点：

There are no bitmaps aside from the Sea Nymph illustration on the cover: all text remains real text.
除封面上的“海若虫”插图外，没有其他位图：所有文本均为真实文本。
Semantics are important, and should be reflected in the markup you use.
语义很重要，应该反映在您使用的标记中。
Accessibility and reading order are paramount: that is, you should keep the text in your page in the logical order it would be read on the cover.
可访问性和阅读顺序至关重要：也就是说，您应该按照在封面上阅读的逻辑顺序将页面中的文本保留下来。

资源资源 (Resources)

You will need the following to complete the work:

您需要完成以下工作：

The illustration caption text (which reads “Chrysaora quinquecirrha, Patrice Stephens-Bourgeault”) is set in Jane Austen.
插图标题文字(显示为“ Chrysaora quinquecirrha，Patrice Stephens-Bourgeault”)设置在Jane Austen中。
The illustration of the Sea Nettle Jellyfish.
海荨麻水母的插图。
The “Journal of Jellyfish Studies” and “May 2014” text is in Aspira by Durotype, a demo of which you can download from myFonts as an OTF or webfonts package. (You will need to create a free myFonts account first)
“水母研究杂志”和“ 2014年5月”文本在Dspirtype的Aspira中，您可以通过myFonts的OTF或webfonts软件包下载该演示。 (您需要先创建一个免费的myFonts帐户)
All other text is in Pesaro by Hoftype; again, you can download the Light version of the font from myFonts.
所有其他文字均以霍夫特类型在佩萨罗中 ; 再次，您可以从myFonts下载字体的Light版本。