构建静态服务器_为浏览器构建静态管理栏

构建静态服务器

从我们的.psd教程继续 ，此截屏视频集将带您逐步构建浏览器的管理栏。 我们要考虑一些障碍，我们将探索一些有趣的方法来解决这些问题。 我们走吧！

几点考虑

在构建此模型之前，需要牢记一些事情。 首先，我们的管理栏将在页面顶部抢占其父网站的一些像素。 如果下面的网站恰好在顶部具有有价值的内容，那么它将被管理栏掩盖。 因此，我们首先需要将整个网页向下推。

其次，我们需要记住，我们CSS将成为总体网页的有效部分。 如果我们不小心，它将影响样式超出我们管理栏的范围-不好。

最后（与上一点有关），我们的管理栏已打开，以受到属于父网页CSS的影响。 我们需要确保标记和演示是完全自主的。

注意：这些截屏视频均以高清录制，因此请随时单击该HD按钮！

第1部分：基本标记

让我们通过组织项目结构并布置一些基本标记来开始工作。 我们还将对reset.css进行一些重大更改，并快速了解一下使用Gravatar图像所涉及的内容。

有用的资源

• 埃里克·梅耶（Eric Meyer）的重置CSS
• Gravatar.com 有关调用图像的建议
• Gravatar.com PHP哈希脚本

第2部分：初始样式

设置好标记之后，让我们建立一些样式，使整个外观看起来更像是“管理栏”。 我们将介绍一些@ font-face用法，包括用于图标的出色的Web Symbols字体。 在此过程中，我们还将有趣地使用:first-child ， :last-child和很少见的:only-child伪选择器。

有用的资源

• Google Fonts API Droid衬线
• Web Symbols字体，来自Just Be Nice Studio
• 白色微妙的背景图案

第3部分：黄色的位

在此视频中，我们将介绍黄色的优先级按钮和小通知符号。 我们将研究CSS3的渐变，过渡，并帮助我们使用各种浏览器供应商前缀，我们将研究一些有用的在线工具。

有用的资源

• Paul Irish的CSS3请！
• Jeffrey Way的Prefixr网络应用
• Prefixfree由利·贝罗

第4部分：搜索表单标记和样式

是时候让搜索表单看起来更受人尊敬了。 我们将使用HTML5 input type="search"尽可能在语义上进行处理，然后研究解决这样做带来的表示性问题。

有用的资源

• w3.org关于CSS 框大小的参考
• 关于输入类型=“搜索”的 w3.org参考
• 关于HTML5 占位符属性的w3.org参考
• 通过Glyn Mooney重置Webkit奇怪的搜索输入样式

第5部分： CSS3下拉菜单

现在，我们将使用经典方法在HTML和CSS中构建下拉菜单。 我们将简要讨论可访问性，并探索一些过渡效果，以使整个过程看起来尽可能平滑。

有用的资源

• 哈里·罗伯茨的可访问CSS3下拉菜单

下次...

我们差不多完成了，但是有一些细节需要整理。 有工具提示（请注意该快速提示，在其中我们将介绍可用于我们HTML5 / CSS3选项）。 我们还没有适当考虑跨浏览器的兼容性，也没有在真正HTML网页中实际测试过我们的工具栏。 届时仍有大量工作要做，敬请期待！

翻译自: https://webdesign.tutsplus.com/articles/building-a-static-admin-bar-for-the-browser--webdesign-4767

构建静态服务器