unity 暴风雨天气效果_暴风雨的天气：响应式网页练习

unity 暴风雨天气效果

This 100-minute exercise tests basic web development tasks, including markup, typography, and (optionally) responsive design. Your goal is to recreate the design shown above; I’ve provided a 4MB .zip file that includes a .psd and .jpg mockup of the original, together with a copy of the background image: a photograph by Jörn Guntermann, used with permission.

这个100分钟的练习测试了基本的Web开发任务，包括标记， 版式和(可选) 响应式设计 。 您的目标是重新创建上面显示的设计； 我提供了一个4MB的.zip文件 ，其中包括原始文件的.psd和.jpg样机，以及背景图片的副本： JörnGuntermann的照片，经允许使用。

When you’re done, download my solution, also provided as a .zip file, and compare your work against it. Students in my classes have the option to send me a copy of their work for feedback.

完成后，下载我的解决方案( 也以.zip文件提供) ，然后将您的工作与之进行比较。 我班上的学生可以选择将我的作业副本发送给我，以征询反馈。

使用说明 (Instructions)

• You have a time limit of 100 minutes once you start the exercise.
  开始练习后，您的时间限制为100分钟。

• Download the resources file, which contains a PhotoShop mockup, a JPEG version of the same, and the background image.

  下载资源文件 ，其中包含PhotoShop样机，相同的JPEG版本以及背景图片。

• The exercise is open-book: you can consult any resources you like as you work, including this blog.
  该练习是开放式的：您可以在工作时查阅喜欢的任何资源，包括此博客。

• Create your CSS as an embedded style sheet on the page.

  在页面上将CSS创建为嵌入式样式表。

• All text on the page is in the Oxygen typeface, available from Google Web Fonts. The icons in the top left corner are from IcoMoon. The body text is the second verse of the 1933 song Stormy Weather.

  页面上的所有文本均为Oxygen字体，可从Google Web Fonts获得。 左上角的图标来自IcoMoon 。 正文是1933年的“ 暴风雨天气”的第二节。

• The result should be valid code: my version is HTML5, but XHTML would work equally well.
  结果应该是有效的代码：我的版本是HTML5，但是XHTML可以同样有效地工作。

伸展目标 (Stretch Goals)

After getting the basic look and feel of the page correct, there are several further goals you can attempt if you are still under the 100 minute mark:

正确设置页面的基本外观和感觉之后，如果您仍处于100分钟的标记范围内，则可以尝试其他一些目标：

• Make the page responsive, down to mobile sizes.

  使页面自适应 ，缩小到移动大小。

• Make the icons interactive.
  使图标互动。

• Add a print stylesheet.

  添加打印样式表 。

When you're done, download the solutions file to compare your work with mine. Of course, there are many possible responsive designs: the important thing is to have your desktop version look like the mockup as much as possible.

完成后，下载解决方案文件以将您的工作与我的工作进行比较。 当然，有许多可能的响应式设计：重要的是尽可能使桌面版本看起来像样机。

Good luck!

祝好运！

翻译自: https://thenewcode.com/799/Stormy-Weather-A-Responsive-Web-Page-Exercise

unity 暴风雨天气效果