by Codesmith
通过Codesmith
如何使用HTML和CSS轻松构建Mashable的导航栏
(
How to easily build Mashable’s navigation bar with HTML and CSS
)
When you visit wecodejs.com, you might think to yourself, “Man, what a navigation bar. What a big, beautiful navigation bar. It’s winning.”
当您访问wecodejs.com时，您可能会想到，“伙计，这是一个导航栏。 多么大，漂亮的导航栏。 赢了。”
And then you go to your code editor and can’t seem to get your blob of HTML elements to resemble that big, beautiful navigation bar.
然后转到代码编辑器，似乎无法使HTML元素的斑点看上去像那个大而漂亮的导航栏。
Writing CSS is like getting a root canal, you think. Heck, it might as well be magic.
您认为，编写CSS就像获得根管。 哎呀，那也很神奇。
Well, it’s not magic. You can style a “nav bar” or any other web component easily. All you have to do is change how you view CSS.
好吧，这不是魔术。 您可以轻松设置“导航栏”或任何其他Web组件的样式。 您要做的就是更改查看CSS的方式。
元素，你是什么？
(
Element, what are you?
)
The first thing we have to get out of the way is the notion that all CSS does is prettify things. It’s the wrong way to go about tackling a CSS project, because it distracts you from what CSS is really used for. At a very base level, we use CSS to organize elements on a web page.
我们必须摆脱的第一件事是所有CSS都做的是美化事情。 解决CSS项目是错误的方法，因为它会使您从CSS真正的用途中分散注意力。 从根本上讲，我们使用CSS来组织网页上的元素。
Now what is an element? This is how Wikipedia defines an HTML element:
现在什么是元素？ Wikipedia就是这样定义HTML元素的：
An
HTML element
is an individual component of an
HTML
document or web page, once this has been parsed into the Document Object Model.一旦将
HTML元素
解析为文档对象模型，它就是
HTML
文档或网页的单个组件。
Yuck. That doesn’t really help us. W3schools’ definition is more straightforward, which is: “All HTML elements can be considered as boxes.”
uck 那真的对我们没有帮助。 W3schools的定义更为简单，即：“所有HTML元素都可以视为盒子。”
That’s amazing! No, seriously this can’t be stressed enough. It’s very easy to simply gloss past that statement when grinding your way through CSS. If we can conceptualize that every single HTML element we create is a new box, we can better understand CSS’ role in arranging those boxes.
棒极了！ 不，严重的是，这还不够强调。 在遍历CSS时，只需简单地忽略该语句即可。 如果我们可以将创建的每个HTML元素概念化为一个新框，则可以更好地理解CSS在布置这些框时的作用。
Suddenly, the “box model” makes sense. I’m sure you’ve seen it before.
突然，“盒子模型”变得有意义了。 我敢肯定你以前看过。
The padding, border, and margin properties all help to give shape to our boxes. We use padding to create the visual image of the box, a border to fence its perimeter, and a margin to set it apart from every other box.
padding，border和margin属性都有助于使我们的盒子成形。 我们使用填充来创建框的视觉图像，使用边框围住框的外围，并使用边距将框与其他框分开。
Now, how does this apply to our nav bar conundrum? Let’s start coding to find out. We’re going to recreate Mashable’s nav bar minus the dropdown and social icons(that’s for another tutorial). Be sure to code along as that’s the best way to learn.
现在，这如何适用于我们的导航栏难题？ 让我们开始编码以找出答案。 我们将重新创建Mashable的导航栏，减去下拉菜单和社交图标(这是另一篇教程)。 请务必进行编码，因为这是最好的学习方法。
计划，计划，计划
(
Plan, plan, plan
)
Starting off a project with a checklist helps us write organized code. Normally, we’d set up a wireframe, but we already have a model to work off of.
从清单开始一个项目有助于我们编写有组织的代码。 通常，我们会设置一个线框，但是我们已经有了一个模型可以使用。
HTML:
HTML：
-
Create a nav element that contains all of the tab elements
创建包含所有选项卡元素的导航元素
-
Create tab elements
创建标签元素
-
Id the topmost tab as a logo
将最上面的标签标识为徽标
CSS:
CSS：
-
Set the color of the nav bar to a hue of blue
将导航栏的颜色设置为蓝色
-
Set the color of the tab box to a lighter hue of blue
将选项卡框的颜色设置为浅蓝色
-
Set the fonts within the tab boxes to sans-serif and color them white
将选项卡框中的字体设置为sans-serif并将其颜色设置为白色
-
Set the font and box properties of the logo.
设置徽标的字体和框属性。
两个导航栏的故事
(
A Tale of Two Nav Bars
)
It seems like we’re ready to code, but hold up! Remember when we mentioned “blob of HTML” earlier? Well, you want to think about the elements you want to use to create your nav bar. One way of writing it in HTML is by creating an unordered list:
似乎我们已经准备好编写代码，但是请耐心等待！ 还记得我们之前提到“ HTML blob”吗？ 好吧，您想考虑要用于创建导航栏的元素。 用HTML编写它的一种方法是创建一个无序列表：
output:
输出：
If you’re just starting out with CSS, this might look like an immutable blob. We didn’t even add links, which means we have to nest elements.
如果您只是从CSS入手，这可能看起来像是一成不变的斑点。 我们甚至没有添加链接，这意味着我们必须嵌套元素。
Here’s a simpler approach to creating a nav bar while keeping our markup semantic:
这是在保持标记语义的同时创建导航栏的一种更简单的方法：
As you can see, we’ve hacked a nav bar just by using HTML. Now all we have to do is implement the box model to space them out. Let’s use the second HTML boilerplate to create Mashable’s nav bar, and then we’ll provide a walk-through on how to style it properly.
如您所见，仅使用HTML，我们就入侵了导航栏。 现在，我们要做的就是实现盒子模型以将它们隔开。 让我们使用第二个HTML样板创建Mashable的导航栏，然后我们将提供如何正确设置其样式的演练。
CSS来解救
(
CSS to the rescue
)
Now let’s organize these boxes with some CSS. We’re going to list all the selectors we’re going to need for this task.
现在，让我们用一些CSS来组织这些框。 我们将列出此任务所需的所有选择器。
/* we'll target the entire nav */nav {}/*we'll target a specific tab*/ nav a { }/*we're going to use a css pseudo-class to change the background color when we hover over a tab */ nav a:hover { }/*we're going to target the logo for some specific styles 'cause the logo is super special*/ #logo { }
The first thing we should start with is setting the width and height of our nav, and adding a bit of color. A great resource for a color wheel is right
here
.
首先，我们应该设置导航的宽度和高度，并添加一些颜色。 色轮的绝佳资源就
在这里
。
nav { width: 100%; //width should be a percentage for responsiveness height: 38px; //height should be px. Adjust to your liking background-color: #0b98de;//hex color code should be used} nav a { } nav a:hover { } #logo { }We have our nav bar! Next, let’s start creating some boxes that we can move around. We can do that by displaying the elements as blocks.
我们有我们的导航栏！ 接下来，让我们开始创建一些可以移动的盒子。 我们可以通过将元素显示为块来做到这一点。
nav { width: 100%; background-color: #0b98de;} nav a { display: block;} nav a:hover { } #logo { }
It seems like we’ve broken our nice nav. We didn’t necessarily need to do this, but aligning our elements is much easier when we can treat each element as a block. To fix this, we simply write,
float: left;.
This will get us back to square one.
看来我们已经破坏了我们的导航。 我们不一定需要这样做，但是当我们可以将每个元素视为一个块时，对齐元素会容易得多。 为了解决这个问题，我们只需编写，
float: left;.
这将使我们回到正题。
Note:
this step can be skipped,
but
if you’re using an unordered list, then it must be implemented.
注意：
可以跳过此步骤，
但是
如果您使用的是无序列表，则必须将其实现。
Now let’s create the boxes. If you look back at the box model, you’ll notice that padding is what creates these boxes. If you want to see how this works and test the size of your boxes, set a
background-color
and
border:
within the
nav a
selector.
现在让我们创建盒子。 如果回头看一下盒子模型，您会发现填充是创建这些盒子的原因。 如果要查看其工作原理并测试盒子的大小，请在
nav a
选择器中设置
background-color
和
border:
nav a { display: block; float: left;/*We're just setting up fonts settings here*/font-family: sans-serif; font-size: 9px; color: white;/*Box Method Test AKA handicap*/background-color: #17b0cf; border: 1px solid #000;/*Padding Our Box*/padding-top: 20px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;/Let's remove the dumb link decoration*/ text-decoration: none;}
The widths are all different, but that’s consistent with Mashable’s random style. You can always set a width if you crave consistency. We also adjusted the font here for a clean look. You can get some great fonts from
Google
. Make sure to stick the link tag they provide into your
<he
ad> tag.
宽度各不相同，但这与Mashable的随机样式一致。 如果需要一致性，可以始终设置宽度。 我们还在此处调整了字体，以使外观更加简洁。 您可以从
Google
获得一些很棒的字体。 确保将它们提供的链接标签粘贴到您的
<he
ad>标签中。
We’ll delete our handicap and move the
background-color
property to the
nav a:hover
selector. You can always keep the handicap on if you need to make adjustments.
我们将删除障碍，并将
background-color
属性移动到
nav a:hover
选择器。 如果需要进行调整，您可以随时保持障碍。
We’re almost done. Let’s work on the logo.
我们快完成了。 让我们来研究徽标。
#logo { /*font*/font-family: 'Hind', sans-serif; font-size: 30px; letter-spacing: -2px; text-shadow: 1px 1px 2px #c4c4c4;/*box*/padding-left: 20px; padding-right: 40px; margin-right: 10px; margin-top: -20px; }
You might have noticed by now that your padded boxes extend past the nav. All you have to do is hide the overflow by adding
overflow: hidden;
to your
nav
selector. This little property gets rid of a lot of frustrations.
您可能已经注意到，您的填充框超出了导航。 您所要做的就是通过添加
overflow: hidden;
到您的
nav
选择器。 这个小财产摆脱了很多挫败感。
最终产品
(
The final product
)
结束语
(
Closing statements
)
CSS can appear to be a language full of magic, especially if you’re used to the logic of programming languages. But all you have to do is keep the box method in mind when constructing the layout of a site.
CSS似乎是一种充满魔力的语言，尤其是如果您已经习惯了编程语言的逻辑。 但是您要做的就是在构建网站布局时记住box方法。
Of course, there are tricks that CSS masters use to add that extra bit of style. We’ll list a bunch of resources below that’ll make you a pro at CSS in no time. If you’re still annoyed with CSS, then you should take a look at some of the
pre-processors
designed to make the task of styling an entire site more efficient.
当然，CSS大师可以使用一些技巧来增加样式。 我们将在下面列出大量资源，这些资源将使您立即成为CSS专业人士。 如果您仍然对CSS感到恼火，那么应该看看一些
预处理器
，这些
预处理器
旨在使样式化整个网站的任务更加高效。
资源：
(
Resources:
)
You’ll know how to create anything you can dream of by browsing through this site.
通过浏览本网站，您将知道如何创建您梦dream以求的东西。
Thecodeplayer offers live coding to help you understand the nuances of CSS.
编码播放器提供实时编码，以帮助您了解CSS的细微差别。
Get precise values for your background colors.
获取准确的背景色值。
Don’t forget to drop some claps if this tutorial helped. Share it with friends who head desk when wrangling with CSS.
如果本教程有帮助，请别忘了鼓掌。 与处理CSS的公司总部的朋友分享。
Code in peace,
和平编码
Raji Ayinla|intern technical content writer|email: rajiayinla858@gmail.com
拉吉·艾因拉(Raji Ayinla)|实习技术内容作家|电子邮件：rajiayinla858@gmail.com