web页面uri唤醒应用_带有数据URI的高性能Web设计

web页面uri唤醒应用

我们最近在Webdesigntuts +上介绍了Web设计中的数据URI的内容，原因和方式，在其中研究了使用数据URI进行性能友好的界面设计的一些可能性。

在今天的Premium教程中，我们将采用介绍性文章中介绍的一些理论，以一些用于开发完全实现的用户界面的示例为基础。为了使事情有趣，我们还将使我们的设计具有响应性，并且将使用Dribbble API和jQuery从Envato Dribbble feed中提取一些图像。

有很多要讲的内容，所以让我们开始吧！

开始之前

正如我已经提到的那样，本教程基于Web设计教程中的数据URI的内容，原因和方式。即使您对数据URI的了解已经扎实，我还是强烈建议您在开始此处之前先阅读本文。我将使用初始文章中的练习中的一些代码来节省时间，因此，我将要求您在以下几点上跳回到原始文章。

其次，在该项目中，我们将严重依赖数据URI，以便为您提供大量使用此技术的实践。是否实际在生产中大量使用数据URI还是有争议的（尤其是如果支持<IE7），因此请记住，数据URI只是工具箱中的另一个工具，这些技术不一定适合每种情况。

最后，该项目在Webkit，Firefox和Internet Explorer的最新版本中进行了测试。您可以放心地假定此接口在IE7及以下版本中将无法完全发挥作用（尽管如果需要，可以很容易地将后援应用于旧版IE版本）。此外，在本教程中，我将引用-webkit和CSS3元素的通用前缀，但是源文件将包含所有供应商前缀。

关于数据URI的两分钟回顾

在开始破解之前，让我们快速回顾一下数据URI方案是什么，以及为什么它可以作为向浏览器提供元素的好选择，这些元素通常会消耗资源并降低性能。

数据URI是一种将二进制数据编码为ASCII文本字符串的方式，现代浏览器可以读取和呈现该字符串。
数据URI通常用于替换图像文件，但是可以对任何二进制数据进行编码，包括SVG，多媒体，字体等。
使用数据URI的主要好处是减少了在浏览器窗口中加载页面所需的HTTP请求数量。简而言之，每增加一个HTTP请求（通常）都会对网站的整体性能产生负面影响。
数据URI比标准文件类型（例如JPG图像）大33％左右，但通过压缩和gzip压缩，该数量通常减少到5％以下。这个额外的文件大小通常不是一个大问题，但是在选择最佳技术以将资产包含到设计中时要牢记这一点。
数据URI冗长，毫无意义，看起来也不是很漂亮，使得标记和样式表难以阅读，浏览和维护。最好在文本编辑器中使用代码折叠！

进攻计划

本教程将分为三个单独的阶段，我们将按以下顺序进行处理：

使用HTML和CSS中的参考图片设计“全角”网站。
从Dribbble API和jribbble jQuery插件中提取图像
添加媒体查询以使站点在较小的视口中响应。

好的！聊够了！让我们开始编码吧！

步骤1：初始标记

对于我们的设计，我们将以最新HTML5 Boilerplate作为起点。我们不会在项目中使用样板的所有功能（例如，现代化脚本或分析），但是最好在初始阶段保持“原样”，然后在项目后期返回以减少我们最终没有使用的功能（或者将来可能不会使用）。

在还包含css和js文件夹的目录中创建一个新的index.html文件。

在文档的<body>中，添加<header> ，精选内容<div>和<footer> 。我们将继续进行充实。

<!DOCTYPE html>
<!-- HTML5 Boilerplate content goes here -->
<head>
<title>Albireo: Designing With Data URIs</title>
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 Boilerplate content goes here -->
</head>
<body>
<!-- HTML5 Boilerplate content goes here -->
<header>
<!-- header content will go here -->
</header> <!-- end header -->
<div class="featured-content">
<!-- featured-content content will go here -->
</div><!-- end featured content -->
<footer>
</footer>
<!-- Scripts and analytics can go here -->
</body>

接下来，让我们使用Eric Myers CSS Reset重置CSS并添加一些基本的布局样式：

* {
/* Give all elements box-sizing of border-box
(Total width = width + margin + padding + border) */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin:0;
padding:0;
background-color: #eee;
}
header {
height: 80px;
margin:0;
padding:0;
position: relative;
background-color: #3C3C3C;
}
.featured-content {
margin-top: 4%;
}
footer {
border-top: 1px solid #eee;
width:100%;
min-height: 80px;
background-color: #ccc;
margin-top: 0;
text-align: center;
padding-top:21px;
}

除了border-box框模型的通用应用之外，这里的所有内容都应该相当简单。在此，代替使用将填充，边距和边框分别添加到元素的定义宽度的标准框模型，定义的宽度是元素的总宽度，包括填充，边距和边框。

这种方法在可变布局中很流行，许多流行的框架都使用border-box模型，包括Twitter Bootstrap和Zurb Foundation，因为它使处理百分比无效的工作变得容易。是否需要等宽的列，每列之间有沟槽？简单。只需应用Boder-Box模型并将该列设置为33.333％-无需分别计算填充和边距。

当然，到目前为止没有什么可看的，这只是我们的画布！

步骤2：定义简单的流体网格

如果看一下该演示，您将看到精选内容将被布置在三个等宽列中。在幕后，这些列位于<div>其中的类为<class="row"> ， <class="row">设置居中内容区域，最大宽度为1024px。

为了使我们的项目顺利进行，让我们在CSS中定义这个简单的网格（部分改编自Zurb Foundation 3.1 ）：

.row {
width:1024px;
margin:0 auto;
max-width: 100%;
/* Prevent child elements scaling down further once the viewport hits 767px */
min-width: 767px;
background-color: transparent;
}
.row:after {
/* Clearfix applied since columns are floated */
content: "";
display: table;
clear: both;
}
.row .three {
/* Remember that the width of this element is the total of the defined width + padding + margin + border */
width: 33.33333%;
}
.column, .columns {
float: left;
min-height: 1px;
padding: 0 15px;
position: relative;
}

在继续之前，让我澄清一下这段代码中的几点。首先，您会看到我们对行应用了min-width 767px。这意味着，在小于此宽度的视口上查看时，任何子元素（即.row .three ）都将停止缩放，以防止特色内容项变得太小。在本教程的稍后部分，我们将重新介绍媒体查询，以为浏览器提供有关视口何时小于767像素宽的其他说明。

其次，因为我们知道每一行都将包含浮动的子元素，所以我们需要在结束行div标签之后清除所有浮动。在这个项目中，我将clearfix hack应用于了row:after伪元素。如果你打算建立这个项目了，你可能需要额外clearfixes，只是追加了.row:after有一个附加的类的规则.clearfix:after 。

步骤3：定义版式和图标字体

尽管我们还没有使用过任何字体，但我更喜欢在样式表的顶部建立我的字体（尽管没有什么可以阻止您稍后再处理）。为了使我们可以直接进入设计而无需回溯，现在让我们为字体和图标字体设置所有基本规则。

对于自定义的base64编码图标字体，我们将使用出色的IcoMoon应用程序生成图标字体集和所需CSS。有关屏幕截图的完整演练，请参阅Data URI教程。

总结一下，使用IcoMoon应用程序，创建以下图标字体：

选择一个自定义集，其中包括Broccolidry系列中的“心脏”，“眼睛”，“评论”和“放大镜”图标。
将基准设置更改为10％
在“更多设置”下，将字体名称更改为“ customFont”
选中“ Base64在CSS中编码和嵌入字体”复选框

下载字体，打开主样式表，然后将CSS复制到项目的style.css文件中。

除一些其他字体样式外，样式表的“版式”部分还将包含以下代码：

p, a, h1, h2, h3, h4, h5, h6, li {
font-family: sans-serif;
}
a {
text-decoration: none;
}
@font-face {
font-family: 'customFont';
/* IE9 Compatibitly mode */
src:url('fonts/customFont.eot');
/* Old IE Fix */
src:url('fonts/customFont.eot?#iefix')
}
@font-face {
font-family: 'customFont';
src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to have a class per icon */
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: 'customFont';
font-style: normal;
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
.icon-search:before {
content: "\21";
}
.icon-comment:before {
content: "\22";
}
.icon-heart:before {
content: "\23";
}
.icon-eye:before {
content: "\24";
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'customFont';
content: attr(data-icon);
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}

有关此代码的语法，其用法和旧版IE修复程序的更详细说明，请参阅Intial Data URI教程。

现在，我们已经完成了所有基础工作，包括基本的流体网格和base64编码的自定义图标字体，让我们开始遍历每个部分并为我们的基本标记提供一些急需的修饰。

步骤4：为身体提供重复的背景

在第一个教程中，我们从Subtle Patterns的一幅小图像创建了一个Data URI，这对于我们网站的背景来说是完美的。取得此base64编码的图像，并将其作为重复的background-image添加到页面的<body>元素中。

使用以下CSS充实body规则，该CSS取自本教程前面的步骤：

body {
margin:0;
padding:0;
background-image: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFBNjg5RjI2RjZCODExRTE5Q0IwRDA0QjY4QTg3NEJCIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFBNjg5RjI3RjZCODExRTE5Q0IwRDA0QjY4QTg3NEJCIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUE2ODlGMjRGNkI4MTFFMTlDQjBEMDRCNjhBODc0QkIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUE2ODlGMjVGNkI4MTFFMTlDQjBEMDRCNjhBODc0QkIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wAARCAAsACwDAREAAhEBAxEB/8QAbAABAQEBAQEBAAAAAAAAAAAAAwIBAAQFCgEBAAAAAAAAAAAAAAAAAAAAABAAAwACAgEDAgQDCQAAAAAAAQIDEgQRExQhIiMAJEEyMwVCNBUxokOjVGQ1ZdURAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AP2JIiaaPGLokUQPKThimmhbEKoXjHUXglEJUIFKqQgAQJpNdHXraLfKHN6vbN23bOEnjbqm9WrYKs59aMU4RUQqBMhkgP3CNfKmVBoUOoxK11Gi60maOhBG6rKtFpNsUOJkzDirgpBpMQbYPDM8mtMmVqiY900eYRZXIBDtMgjFigU/kANmrft6xXUgtU6zNNGSuvXOEvbWCwlUz14AKrqEPtI6waYyqHp9fG7fKTnDv8r08fjHLPDsx8XH8M+cfXLL3/QDOmvoq0bVcV/WetyHtus7zl3L1ootVquk+uajAsiKgUzBCZSprUUlS2mxLSkxDU/baMCCqkEq+m6ngAcnXJKqTEgSCtiddmnXEmMwMdnYRmnayqSRqa7r6z5YnO3q01JWfFGLyDmrqVkNNVGR5iNRD01gYCTEnqIbVXWDzZaKRxkhQktPIL1+2Jee0wo4Hs3eFTyYoCVF1ULOOzIE5qoWb+roF5ZJgP3XZ29EfB7MvGwr5mXOfnfqdXHZ6+P19nHyZ9nxfQUJR/cBPa7aEKS2oULxbUqpKPQzoqsu6CGnRaLyi5SK8NUOGz2KbNTGfAnEsmxsryq2tNsX19QElj1n9Z+Ss2PWpagcyDdjYbTbsp79V+S7k+7Tb0+WvoWOgWIDuATAnJviyaQYdZNdn3mtjcKW2dir4ReCAt00VmM462uOTMj1kSzckvXsBNelNrKzq8InlYxfKewykel9lPbTXainlJHh0UguA5wmBdu73eL1jHn/AJHOGHXjl1ePl3f1Hj8MOjD5Mufh+gUGdDsNAMw5M7NJxMVtIibpNvQG8lQzZwV4ICFuV9gHVpV1FXTHLcFNQRIgYVjzLklpONZdVgVorTbjgoUYnrYO1i2ulm3nUXXOuxssQkHimTLSOR419aMzwZkkyPOTOT20DiYShOlJtPTm3Yq09qa6Li0q1kyhpQkwyAb0iOCQoX2BO6mzR1Gi3VsKrCtmYLLqKNjFw0bh7s7AzbBuk8uwZSZWBvh8XDqrxxh0cnye7nLHs7OfIz93bnxz8mfHu+gCuyv7e0NRYzwqqy0UmZQnPF5QWFV9BDXmaoFdVK+onx2GS1BvHMattTcB6AeanokdnBQq3CkkS2YzUKr8++ahHJxRphtNfyqK9m5jB84xUgq2xNvZs3HqtG16LzJDyqOA5BcJ1gKbr02W0QqrsSya1QyGXUoiweK5M7XcXTKZHMcgzkq0jYFjEaIMpH7T3GMSyjxeFLGECxUeJwpwTn4fyr8eKzCfFv2+X5NfJ/s6e2ng9H+m8f8ATy593kY92f49fw/QL9tztduHOH3Xfjx4/FMM8vb4uOfH8POXPuz+g83yeVDt7PB6U8bLnLzO2n89n8nHV1+Pz6dmfZ8nV9BVe7zZ+Lzjw/8AUfy9eHQ3j9WXp/Ue7Dj+Doy7PXp+gX7Xplhxx2now57vJ5p2Y5e/yOc+3L14z7PTL6CNXt79ny/5ntr08foeD2fb+N+OXXj5GXv7uf8AD6foPn/deV/0H+f3/wDgf38/9r9B/9k=);
background-repeat: repeat;
background-color: #eee;
}

大！现在，我们有了一个漂亮的背景图块，该图块在整个文档的y和x轴上都重复。

步骤5：标记和样式网站标题

跳回到您的标记中，并在<header>部分中添加以下HTML：

<header>
<div class="row"><a class="logo"><img src="css/logo.svg" alt="Albireo" />Albireo</a>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Submit</a></li>
</ul>
</nav></div>
</header>

接下来，让我们使用重复线性渐变呈现的格子背景来设置标题背景的样式：

header {
height: 80px;
margin:0;
padding:0;
/* We'll be positioning elements absolutely inside the header shortly */
position: relative;
border-bottom: 1px solid #303031;
box-shadow: inset 0px -1px 14px rgba(0, 0, 0, .6), 00px 5px 10px rgba(0, 0, 0, .1) inset, 0px 1px 1px white;
/* Left to right linear gradient */
background-image: -webkit-repeating-linear-gradient(45deg,
transparent 0%, transparent 60px,
rgba(54, 54, 54, 0.7) 60px, rgba(54, 54, 54, 0.7) 100px,
rgba(0, 255, 199, 0.1) 100px, rgba(0, 255, 199, 0.1) 140px,
rgba(172, 172, 172, 0.1) 140px, rgba(172, 172, 172, 0.1) 160px),
/* Right to left linear overlayed gradient */
-webkit-repeating-linear-gradient(-45deg,
transparent 0%,transparent 60px,
rgba(54, 54, 54, 0.7) 60px, rgba(54, 54, 54, 0.7) 100px,
rgba(0, 255, 199, 0.1) 100px, rgba(0, 255, 199, 0.1) 140px,
rgba(172, 172, 172, 0.1) 140px, rgba(172, 172, 172, 0.1) 160px);
/* Provide a fallback background-color */
background-color: #3C3C3C;
}

该背景是对最近在Webdesigntuts +文章中使用的技术的修改。有关更多信息，请参考《 Webdesign中的纹理的内容，位置和方式》。

接下来，让我们添加.svg徽标，您可以从本教程的资源部分下载该徽标。

.logo {
width: 175px;
height: 80px;
margin-left: 15px;
top: 5px;
position: absolute;
background-repeat: no-repeat;
display: block;
/* Render text invisible */
font-size: 0;
color: transparent;
text-shadow: none;
}
.logo img {width:100%}

您会注意到，我将徽标作为HTML标记（带有附加的HTTP请求）中的外部.svg文件进行了引用，以实现完全可扩展的矢量解决方案。对于真正的免费图像设计，您还可以直接在HTML本身中使用.svg文件。要了解如何最好地做到这一点，请参阅可伸缩矢量图形（SVG）入门。

接下来，我们将为网站设置一个简单的导航菜单：

nav {
top: 23px;
position: absolute;
right: 30px;
}
nav ul li {
display:inline-block;
font-weight:bold;
font-size: 13px;
}
nav ul li a {
color:#eee;
display:block;
padding:10px;
height: auto;
border-radius: 6px;
cursor: pointer;
margin-right: 5px;
}
nav ul li a:hover {
background: -webkit-linear-gradient(top, rgba(0,0,0,.4) 0%, rgba(0,0,0,0.6) 100%);
color:white;
}

步骤6：设置简单的页脚样式

我们将暂时中断逻辑流程，并注意（非常简单的）页脚的样式，因为接下来的大部分步骤将集中在创建内容项上，我想确保我们在本节中保持势头。将以下标记添加到HTML：

<footer><a href="#">Designing With Data URIs | Webdesign Tuts+ 2012</a></footer>

样式如下：

footer {
border-top: 1px solid #eee;
width:100%;
min-height: 80px;
background-color: #ccc;
margin-top: 0;
text-align: center;
padding-top:21px;
box-shadow: inset 0px 4px 10px rgba(0, 0, 0, .2);
}
footer a {
color:#999;
font-size: 14px;
font-weight: 100;
}

完成之后，让我们回到设计的重点，即特色内容项。

步骤7：精选内容项

在本教程的下一阶段，我们将使用jQuery和Dribbble API从Dribbble中提取图像。现在，我们将使用占位符图像并设置图像本身的一般样式。

重要的是要注意，我们的标记将很快更改以适应jQuery插件，因此不要太在意以下标记！话虽如此，如果您不想从外部站点获取资源并提供自己的静态资产，那么这就是您将要使用的代码。

我们将设计接口，使其能够扩展，以通过复制整个<figure>元素来容纳所需数量的图像。我们将首先创建一个<figure>元素，然后再将其复制五次以创建两行三个图像。

在您HTML中，直接在</header>标记下添加特色内容图像面板的基本标记：

<div class="featured-content">
<div class="row">
<div class="three columns content-items">
<figure>
<a href="#" class="view-more"><span class="large-icon icon-search"></span></a>
<img src="img/1.jpg">
<ul class="icon-group">
<li><a href="#"><span data-icon=""" aria-hidden="true" class="list-icon"><span class="list-number">20</span></a></span>
<li><a href="#"><span data-icon="#" aria-hidden="true" class="list-icon"><span class="list-number">8</span></a></span>
<li><a href="#"><span data-icon="$" aria-hidden="true" class="list-icon"><span class="list-number">4</span></a></span>
<!-- the list-number values are purely arbitrary -->
</ul>
</figure>
</div>
<div class="three columns content-items">
<-- 2nd featured content panel will go here... -->
</div><!-- end three columns -->
<div class="three columns content-items">
<-- 3rd featured content panel will go here... -->
</div><!-- end three columns -->
<div class="three columns content-items">
<-- 4th featured content panel will go here... -->
</div><!-- end three columns -->
<div class="three columns content-items">
<-- 5th featured content panel will go here... -->
</div><!-- end three columns -->
<div class="three columns content-items">
<-- 6th featured content panel will go here... -->
</div><!-- end three columns -->
</div><!-- end row -->
</div><!-- end featured-content -->

总结我们在这里所做的事情，我们创建了三列等宽（33.3333％）的列。在每列内部，我们创建了：

包含图像的<figure>元素，
锚定链接，它将带我们到其他内容（即Dribbble）
链接中的span元素将定义我们的放大镜图标
没有设置来源的图片标签（我们将在后续步骤中使用jQuery填充图片标签）
“注释”，“视图”和“喜欢”的图标字体的无序列表，已被赋予一些任意的数字值。

因为图像的放置/流对整个文档结构并不重要，所以HTML5 <figure>元素是<img>元素的完美包装。

继续介绍内容项的样式，我们将从在内容项行的底部添加边距开始，然后为<figure>元素设置样式。 <figure>由一个元素和两个伪元素组成，以产生一堆堆积的图像效果。

为了创建一个更好地响应水平和垂直浏览器窗口大小变化的界面，我们将使用百分比来尽可能地测量元素的宽度和高度。

设置图形元素样式和图像堆栈效果所需的代码如下：

.content-items {
margin-bottom: 5%;
}
figure {
/* Max height of any image at any viewport width */
max-height: 260px;
width: 100%;
margin:0 auto;
padding: 3% 3% 30px 3%;
display:block
/* Allow children to position themselves absolutely to the parent */
position: relative;
background: -webkit-linear-gradient(top, white 0%,#F3F3F3 100%);
background-color: #fff;
border-radius: 5px;
border: 1px solid #C7C7C7;
}
/* Bottom-most 'stacked' image */
figure:before {
content: '';
height: 100%;
width: 98%;
margin:0 auto;
/* Absolute position within the relatively positioned parent */
position: absolute;
/* Stack bottom-most */
z-index: -2;
top: 6px;
left: 3px;
border-radius: 5px;
border: 1px solid #C7C7C7;
background: -webkit-linear-gradient(top, white 0%,#ECECEC 100%);
background-color: #efefef;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
}
/* Top-most 'stacked' image */
figure:after {
content: "";
height: 100%;
width: 99%;
position: absolute;
top: 3px;
left: 1px;
/* Stack to middle */
z-index: -1;
margin: 0 auto;
border: 1px solid #C7C7C7;
border-radius: 5px;
background: -webkit-linear-gradient(center top , white 0%, #F3F3F3 100%) repeat scroll 0 0 #EFEFEF;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

现在，我们应该具有良好的堆栈效果，当浏览器窗口的大小从全角缩小到767px时，可以很好地缩放。

步骤8：创建占位符图像

接下来，让我们设置实际图像本身的样式。在本教程的下一阶段，我们将直接用Dribbble的资源填充此区域，但现在，我们将添加一个占位符图像（灰色的Envato徽标），以确保我们的<figure>元素不会加载图像时，图像自身会崩溃。此外，如果以后从Dribbble提取内容时遇到任何问题，则占位符图像也将保持设计正常运行（尽管我们希望保留默认的残破图像图标，以向用户提供一些反馈，提示应该存在一个图像）。

对于占位符图像，我已经使用Web语义数据URI工具将291px x 218px .jpg图像（包含在源文件中）转换为Data URI。

从工具的输出面板中复制base64编码的字符串后，我们可以完成image元素的样式设置：

figure > img {
max-height: 219px;
/* Super simple responsive images */
width: 100%;
margin:0 auto;
padding: 0;
border: 1px solid #E4E4E4;
/* Placeholder Image */
background-position:center center;
background-image: url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNGRUMwNEREMEJCMDExRTI4RUE0QzM4NTc5MUMxNTFBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNGRUMwNERFMEJCMDExRTI4RUE0QzM4NTc5MUMxNTFBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0ZFQzA0REIwQkIwMTFFMjhFQTRDMzg1NzkxQzE1MUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0ZFQzA0REMwQkIwMTFFMjhFQTRDMzg1NzkxQzE1MUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAAGBAQEBQQGBQUGCQYFBgkLCAYG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);
}

通过为图像提供100％的宽度和218px的最大高度，我们可以确保在调整浏览器窗口大小时，图像保持其纵横比，同时相对于<figure>元素进行缩放。对于响应式媒体，有更复杂的方法，但是这种超简单的方法对于此应用程序将是很好的。

为了快速进行理智检查，到目前为止，这是第一个<figure>元素应该具有的功能：

第9步：设置“查看更多”链接的样式

当每个图像都悬停时，半透明的叠加层以及一个放大镜将出现在图像的顶部，我们将使用我们的图标字体来创建它。

首先，让我们快速查看查看更多链接的标记：

<figure>
<a href="#" class="view-more"><span class="large-icon icon-search"></span></a>
<img src=".">
...
...
</figure>

我们将设计一个块级锚链接的样式，该链接包含100％的宽度和100％的高度跨度，并具有一类icon-search ，它将链接到我们已经建立的图标字体CSS中。

链接的代码如下所示：

a.view-more {
max-height: 219px;
display: block;
position: absolute;
z-index: 20;
top: 3%;
bottom: 31px;
left: 3%;
right: 3%;
border: 1px #464646 solid;
background-color: rgba(0, 0, 0, 0.5);
-webkit-box-shadow: inset 0px 2px 76px rgba(0, 0, 0, .6);
opacity: 0;
-webkit-transition: .3s all;
}

接下来，我们将添加伪类来设置:hover和:active上的链接的样式：

a.view-more:hover {
opacity: 1;
-webkit-transition: all 0.3s;
}
a.view-more:active {
opacity: 1;
background-color: rgba(0,0,0,0.7);
}

您会注意到，对于查看更多链接的大小和位置，默认情况下使用百分比。当调整浏览器窗口的大小时，这种方法允许查看更多的链接缩放并保持良好的比率。

另外，您会注意到a.viewmore链接本身已触发转换。尽管这本身并不能做任何事情，但是当用户将鼠标悬停然后从元素上移开时，它允许链接淡出。

放大镜跨度CSS是通过使用两个独立的类（ large-icon和icon-search 。第一类的代码如下（我已包含在样式表的“版式”部分中）：

.large-icon {
width: 100%;
height: 100%;
position: absolute;
display: block;
font-size: 76px;
color: rgba(255, 255, 255, 0.9);
margin: 0 auto;
/* Vertical and horizontal alignment */
padding-top: 25%;
text-align: center;
/* Give the icon a white glow effect */
text-shadow: 0px 0px 70px rgba(255, 255, 255, 1);
-webkit-transition: all 1s;
}

而且，我们已经在本教程的前面部分中使用IcoMoon应用程序生成的代码为icon-search建立了CSS。但是，只是为了刷新您的记忆，下面是相关的代码，这些代码将用作未样式化的放大图标图标：

@font-face {
font-family: 'customFont';
src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to have a class per icon */
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: 'customFont';
font-style: normal;
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
.icon-search:before {
content: "\21";
}

重要的是要注意，我们已尝试将显示和图标的样式尽可能地分开（实际上，这是我尝试在整个设计中广泛应用的内容）。这是一个很小的项目，但是如果我们想扩展界面的范围并在设计中的其他地方重用放大镜图标，则这种面向对象的方法将降低更改图标样式的复杂性。

第10步：设置评论/赞/查看列表的样式

现在剩下要做的就是用适当的图标字体设置图标组的样式。

让我们提醒自己有关项目此部分的标记。每个内容项都有以下无序列表：

<ul class="icon-group">
<li><a href="#"><span class="list-icon" data-icon="&quot;"><span class="list-number">20</span></span></a></li>
<li><a href="#"><span class="list-icon" data-icon="#"><span class="list-number">8</span></span></a></li>
<li><a href="#"><span class="list-icon" data-icon="$"><span class="list-number">4</span></span></a></li>
</ul>

您会注意到，尽管在上一步中为放大镜图标使用了类名，但此列表仍使用data-icon方法。在基于类的应用程序上使用这种方法没有特别的原因-这只是使用图标字体的替代执行的好机会。您会看到我们已经使用了IcoMoon应用程序提供给我们的Unicode来定义适当的图标。让我们首先设置列表本身的样式：

.icon-group {
position: absolute;
bottom: -1px;
right: 11px;
z-index: 30;
}
.icon-group li {
float: right;
margin: 0 0 0 12px;
color: #AAA;
}

上面代码的第一部分放置<ul>元素，而列表项的样式将它们浮动到右侧，内联显示元素并设置一些父级样式。接下来，我们将为list-item和list-number元素设置样式：

.list-icon {
line-height: 2;
color:#888;
position: relative;
font-size: 16px;
margin-right: 2px;
}
.list-number {
line-height: 2;
text-decoration: none;
font-size: 12px;
margin:0 2px 0 4px;
}

因此，我们使用了一些很酷CSS3和两种不同的图标字体实现来样式化第一个特色内容元素。这是我们的最终内容项，其中的view-more链接处于悬停状态：

此时，如果我们要保持接口静态（即不通过Dribbble API提取资产），我们可以根据需要简单地复制并粘贴content-items代码块多次，并引用适当的图像文件。但是，由于我们在接下来的步骤中会做一些不同的事情，因此在讨论下一步之前，我们将暂时保留当前的标记，然后大吃一惊，到目前为止，我们的所有工作。

步骤11：介绍Dribbble API和Jribbble插件

对于本教程的后续步骤，我们将使用Dribbble API直接从Dribbble拍摄的镜头填充特色内容项目。

该API允许我们通过HTTP直接从应用程序获取内容，并以JSON返回响应。在撰写本文时，该API不需要密钥，并且具有相当自由的非商业许可，但有一些限制，因此非常适合我们的应用程序。

如果您以前从未处理过API，请不要担心。我们将使用Jribbble jQuery插件来帮助通过ID请求拍摄，并使用我们已经设计好的自定义布局将其插入DOM。正如我已经提到的，我们将通过Jribbble插件和Dribbble API请求单独拍摄（出于该项目的目的，我们将从Envato Dribbble帐户拍摄6张照片）。

正如您所期望的，Jribbble除了单独拍摄外，还允许您请求一系列参数，包括：

试一下
获得镜头的评论
获得镜头的反弹
通过列表名称获取拍摄列表
获取球员的射门清单
获取玩家正在追踪的镜头列表
获取玩家喜欢的镜头列表
获取玩家的个人资料详细信息
获取玩家的关注者
获取玩家关注的玩家
获取球员的选秀

我今天不会花任何时间详细讨论插件或API，但是如果您想扩展本教程的范围并探讨Jribbble的某些可能性，建议您阅读文档以了解更多信息。学到更多。现在，转到实验室并下载Jribbble ，并将其保存到名为“ js”的新根目录中。

步骤12：链接脚本

要使Jribbble正常运行，我们需要做的第一件事就是连接相关的脚本。该插件依赖jQuery，因此要使我们的插件正常工作，我们需要：

jQuery的最新发行版，
Jribbble代码，
一个名为js / jribbble.shots.js的文件，它将是调用Dribbble镜头所需的所有功能的宿主。

在HTML文件的底部，在</footer>和</body>标记之间，添加以下代码：

<script type="mce-text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="mce-text/javascript" src="js/jquery.jribbble-1.0.0.ugly.js">
</script><script type="mce-text/javascript" src="js/jribbble.shots.js"></script>

步骤13：试一试

Jribbble'Get a Shot'参数的基本结构非常简单：

$.jribbble.getShotById(shotId, callback)

从Dribbble插入一个镜头ID，插件将捕获以下数据：

镜头本身（400像素x 300像素）
镜头标题
玩家;选手
观看次数
注释
喜欢
篮板

让我们看一下Jribbble页面上使用的演示函数，以了解如何请求此信息并将其插入DOM：

$(document).ready(function () {
// API Ref: http://api.dribbble/shots/:id
$.jribbble.getShotById(196071, function (shot) {
var html = [];
$('#shotById a:first').attr('href', shot.url);
$('#shotById img').attr('src', shot.image_url);
$('#shotById h3').text(shot.title);
$('#shotById h4').html('by <a href="' + shot.player.url + '">' +
shot.player.name + '</a>');
html.push('<li><b>Views:</b> ' + shot.views_count + '</li>');
html.push('<li><b>Likes:</b> ' + shot.likes_count + '</li>');
html.push('<li><b>Comments:</b> ' + shot.comments_count + '</li>');
html.push('<li><b>Rebounds:</b> ' + shot.rebounds_count + '</li>');
$('#shotById ul').html(html.join(''));
});
});

即使您不是jQuery向导，这也应该相当简单。插件将要查找的是ID为"shotById"的元素，然后将带有以下标记的镜头，视图，喜欢，注释等插入DOM：

<div id="shotById">
<a href="#"></a>
<img src="...">
<h3>Shot Title</h3>
<h4><a>Player URL</a></h4>
<ul>
<li><b>Views</b></li>
<li><b>Likes</b></li>
<li><b>Comments</b></li>
<li><b>Rebounds</b></li>
</ul>
</div>

显然，这对于先前步骤中已经创建的现有HTML标记不起作用（原样）。为了确保我们的辛勤工作不会被破坏，我们需要蚕食我们的标记，并对js / jribbble.shots.js文件中的基本代码进行一些更改。

步骤14：摇一摇标记

我建议的第一件事是采用我们已经创建的现有内容项标记，将其复制并注释掉，以确保我们为以下步骤提供参考。接下来，使用以下代码覆盖未注释HTML：

<!-- REFERENCE ONLY (ORIGINAL MARKUP)
<div class="three columns content-items">
<figure>
<a href="#" class="view-more"><span class="large-icon icon-search"></span></a>
<img src=".">
<ul class="icon-group">
<li><a href="#"><span data-icon=""" aria-hidden="true" class="list-icon"><span class="list-number">4</span></a></span>
<li><a href="#"><span data-icon="#" aria-hidden="true" class="list-icon"><span class="list-number">8</span></a></span>
<li><a href="#"><span data-icon="$" aria-hidden="true" class="list-icon"><span class="list-number">20</span></a></span>
</ul>
</figure>
</div> -->
<div class="three columns content-items">
<!-- give the figure element a unique ID -->
<figure id="shot1">
<a href="#" class="view-more"><span class="large-icon icon-search"></span></a>
<img src=".">
<ul class="icon-group"></ul>
</figure>
</div>

如您所见，我们确实缩减了索引文件中的标记。下一步，我们将使jQuery填补空白。

步骤15：创建一个新函数

要进行射击并在<figure>元素中填充一些数据，我们需要在新创建的js / jribbble.shots / js文件中创建一个新函数。我们的新功能如下所示：

$(document).ready(function () {
$.jribbble.getShotById(332826, function (shot) {
var html = [];
$('#shot1 a:first').attr('href', shot.url);
$('#shot1 img').attr('src', shot.image_url);
html.push('<li><span data-icon="$" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.views_count + '</span></span></li>');
html.push('<li><span data-icon="#" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.likes_count + '</span></span></li>');
html.push('<li><span data-icon=""" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.comments_count + '</span></span></li>');
$('#shot1 ul').html(html.join(''));
});
});

毫无疑问，您的旧标记看起来非常熟悉这部分代码。现在，只要准备好文档，该函数将执行以下步骤：

从Dribbble拍摄ID为'332826'的照片
查找ID为“ Shot1”的元素
从Dribbble填充包含镜头URL的链接
将图像位置放入子<img>源
在<ul>创建三个<li>元素
插入相关的<span>元素以创建图标并计算数字。

这里的好消息是，因为我们在整个项目中都小心使用了类名，所以不需要对CSS进行任何更改。至此，我们使用ID为332826的Envato Dribbble镜头完成了我们的第一个特色内容项目。

步骤16：填补空白

到目前为止，尽管我们已经为另外五个特色内容项创建了一些占位符标记，但我们仅与一个特色内容项进行了合作。现在是时候填补空白，并使这个设计看起来像一个正确的界面！这个过程非常简单。只需从最后一步复制特色内容项，然后将其复制五次，即可更改每个ID。 index.html文件的这一部分如下所示：

<div class="three columns content-items">
<figure id="shot1">
<a href="#" class="view-more"><span class="large-icon icon-search"></span></a>
<img src=".">
<ul class="icon-group"></ul>
</figure>
</div>
<div class="three columns content-items">
<figure id="shot2">
<a href="#" class="view-more"><span class="large-icon icon-search"></span></a>
<img src=".">
<ul class="icon-group"></ul>
</figure>
</div>
<div class="three columns content-items">
<figure id="shot3">
<a href="#" class="view-more"><span class="large-icon icon-search"></span></a>
<img src=".">
<ul class="icon-group"></ul>
</figure>
</div>
<div class="three columns content-items">
<figure id="shot4">
<a href="#" class="view-more"><span class="large-icon icon-search"></span></a>
<img src=".">
<ul class="icon-group"></ul>
</figure>
</div>
<div class="three columns content-items">
<figure id="shot5">
<a href="#" class="view-more"><span class="large-icon icon-search"></span></a>
<img src=".">
<ul class="icon-group"></ul>
</figure>
</div>
<div class="three columns content-items">
<figure id="shot6">
<a href="#" class="view-more"><span class="large-icon icon-search"></span></a>
<img src=".">
<ul class="icon-group"></ul>
</figure>
</div>
</div><!-- end row -->

接下来，我们需要为每个特色内容项创建功能。在您的js / jribbble.shots.js文件中，根据需要从最后一步复制功能，更改每个镜头的镜头ID和元素ID。我们的最终脚本如下：

$(document).ready(function () {
$.jribbble.getShotById(332826, function (shot) {
var html = [];
$('#shot1 a:first').attr('href', shot.url);
$('#shot1 img').attr('src', shot.image_url);
html.push('<li><span data-icon="$" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.views_count + '</span></span></li>');
html.push('<li><span data-icon="#" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.likes_count + '</span></span></li>');
html.push('<li><span data-icon=""" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.comments_count + '</span></span></li>');
$('#shot1 ul').html(html.join(''));
});
$.jribbble.getShotById(315548, function (shot) {
var html = [];
$('#shot2 a:first').attr('href', shot.url);
$('#shot2 img').attr('src', shot.image_url);
html.push('<li><span data-icon="$" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.views_count + '</span></span></li>');
html.push('<li><span data-icon="#" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.likes_count + '</span></span></li>');
html.push('<li><span data-icon=""" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.comments_count + '</span></span></li>');
$('#shot2 ul').html(html.join(''));
});
$.jribbble.getShotById(247707, function (shot) {
var html = [];
$('#shot3 a:first').attr('href', shot.url);
$('#shot3 img').attr('src', shot.image_url);
html.push('<li><span data-icon="$" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.views_count + '</span></span></li>');
html.push('<li><span data-icon="#" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.likes_count + '</span></span></li>');
html.push('<li><span data-icon=""" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.comments_count + '</span></span></li>');
$('#shot3 ul').html(html.join(''));
});
$.jribbble.getShotById(201434, function (shot) {
var html = [];
$('#shot4 a:first').attr('href', shot.url);
$('#shot4 img').attr('src', shot.image_url);
html.push('<li><span data-icon="$" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.views_count + '</span></span></li>');
html.push('<li><span data-icon="#" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.likes_count + '</span></span></li>');
html.push('<li><span data-icon=""" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.comments_count + '</span></span></li>');
$('#shot4 ul').html(html.join(''));
});
$.jribbble.getShotById(70447, function (shot) {
var html = [];
$('#shot5 a:first').attr('href', shot.url);
$('#shot5 img').attr('src', shot.image_url);
html.push('<li><span data-icon="$" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.views_count + '</span></span></li>');
html.push('<li><span data-icon="#" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.likes_count + '</span></span></li>');
html.push('<li><span data-icon=""" aria-hidden="true" class="list-icon"><span class="list-number"> ' + shot.comments_count + '</span></span></li>');
$('#shot5 ul').html(html.join(''));
});
$.jribbble.getShotById(722560, function (shot) {
var html = [];
$('#shot6 a:first').attr('href', shot.url);
$('#shot6 img').attr('src', shot.image_url);
html.push('<li><span class="list-icon icon-eye"></span><span class="list-number"> ' + shot.views_count + '</span></li>');
html.push('<li><span class="list-icon icon-heart"></span><span class="list-number"> ' + shot.likes_count + '</span></li>');
html.push('<li><span class="list-icon icon-comment"></span><span class="list-number"> ' + shot.comments_count + '</span></li>');
$('#shot6 ul').html(html.join(''));
});
});

快速说明一下，如果您真正专注于将HTTP请求减少到最低限度，则可以轻松地将每个函数包含在HTML的<script>标记中。我选择今天不这样做，是为了使HTML和Javascript之间的分隔更容易理解。

如果您一直在密切关注，则网站的主要内容部分将如下所示（按比例缩小）：

做得好！在我们开始项目的最后一部分之前，花点时间喝杯咖啡，休息一下……打开响应界面。

步骤18：规划响应式设计

由于我们是在浏览器中进行设计，因此无法受益于为小视口显示引用模型。在我们超越自我之前，最好计划一下媒体查询的总体方向并建立一些基本的响应式基础结构。

以下是我们的设计在较小视口中的主要功能：

内容项将从480px到767px的视口从跨越三个变为两个
对于小于480像素的视口（即移动视图），内容项将彼此堆叠。
界面导航将放置在徽标下方，当小于767px时将占据视口宽度的100％
项目之间的边距将根据需要进行调整。

如您所见，这是一个非常简单的游戏计划，只需两个媒体查询即可实现。

在样式表的“媒体查询”部分下，创建以下两个媒体查询：

@media only screen and (max-width: 767px) {
/* Indivual rules will go here */
}
@media only screen and (max-width: 480px) {
/* Indivual rules will go here */
}

步骤19：调整导航

在响应性上下文中，有很多方法可以访问导航菜单，但是今天，我们将保持快速，基本和不依赖JavaScript的状态。

在上一步中创建的第一个媒体查询（767px以下）中，添加以下代码：

@media only screen and (max-width: 767px) {
nav {
width:100%;
right:0;
left:0;
top: 80px;
background-color: rgb(63, 63, 63);
box-shadow: 0px -3px 3px rgba(0,0,0,.2) inset;
}
nav ul {
position: relative;
z-index: 999;
}
}

这个简单的代码块将导航移动到主标题下，将其宽度更改为100％，并添加一些基本样式。

步骤20：更改特色内容项目的布局

回到我们的响应式迷你计划，介于480像素到767像素之间，特色内容项将显示为两宽，而低于480像素的内容将显示为一宽，彼此叠放。

首先，我们将扩展我们的第一个媒体查询，以创建两个范围的特色内容项显示。

@media only screen and (max-width: 767px) {
nav {...}
nav ul {...}
.row {
width:auto;
min-width: 0;}
/* Two-wide display at 50% width of row */
.row .three {width:50%}
figure > img {
/* Ensure that images don't scale higher than their original size */
max-width: 300px;
margin: 0 auto;
display: block;
}
}

接下来，将以下规则添加到第二个媒体查询中，以管理小于480px的视口：

@media only screen and (max-width: 480px) {
.row .three {width:100%}
}

步骤21：调整边距和间距

最后，完成设计所需要做的就是调整一些边距，以确保我们在元素之间保持合理的边距。

在我们的<767px媒体查询中，添加以下规则：

@media only screen and (max-width: 767px) {
nav {...}
nav ul {...}
.row {...}
.row .three {...}
figure > img {...}
.content-items {margin-bottom: 7.5%;}
.featured-content {margin-top: 12%;}
a.view-more {bottom: 31px;}
}

在我们的<480px媒体查询中，遵循以下规则：

@media only screen and (max-width: 480px) {
.row .three {...}
.content-items {margin-bottom: 10%;}
.featured-content {margin-top: 19%;}
}

只要有可能，就可以以百分比形式保留边距，这使我们的界面几乎可以在任何视口大小上表现出色，而不仅仅是一组预定的断点。

花一点时间清理代码，确保所有内容都按照逻辑顺序排序，然后退后一步，欣赏所有辛苦的工作。我们完成了！

结论

如果您已完成整个教程，现在将掌握一系列智能技术，以提高站点的性能，以及将图像和图标字体编码为base64编码数据URI所需的所有工具。。

请记住，数据URI并非始终是每种情况的最佳选择，在确定对网站资产进行编码是否是最佳解决方案时需要谨慎考虑，并且在减少HTTP请求与文件大小以及代码可维护性和可读性之间取得平衡非常重要。。数据URI使用得当，是您的Web设计工具箱中的宝贵工具。

希望您喜欢本教程，也喜欢本教程！

您如何在项目中使用数据URI？在下面发表评论。

翻译自: https://webdesign.tutsplus.com/tutorials/hi-performance-web-design-with-data-uris--webdesign-9128

web页面uri唤醒应用