- 现在通过将导航元素移动到HTML代码中 我们现在有一个问题 导航项目为我们提供了这种半透明黑色 Lynda中文网(www.lynda-cn.com) - Now by moving the navigation element down to where it appears in the HTML code, we now have an issue here where the navigation item was supplying us with that semi-transparent black color.
所以现在我们已经失去了与我们的标志背景图形相对较暗的相互作用 Lynda中文网(www.lynda-cn.com) So now we've lost the interplay with that darker color against the background graphic for our logo.
所以我们现在要做的是重新定义锚标签在标题区域内的显示方式 以重新创建相同的效果 Lynda中文网(www.lynda-cn.com) So what we're going to do now is redefine the way the anchor tag is being displayed inside of the header area to recreate that same effect.
所以让我们回到我们的CSS文件和我们的标题区域 让我们进入一个标志类的锚标签 So let's go back to our CSS file and in our header area, let's go in and target the anchor tag with a class of logo.
所以标题a.logo So header a.logo.
我们加入我们的括号 Let's add in our brackets.
让我们分开这个 Let's split this open.
现在 我们首先要做的是将width属性设置为100％ Now but we're first going to do is we're going to set a width property to 100%.
然后我们要设置一个66px的高度 Then we're going to set a height of 66px.
所以现在的标志将与整个标题一样宽 但仍然只有66px高 So now the logo will be as wide as the entire header, but still only 66px tall.
在下一行我们重新定义位置属性 On the next line let's redefine the position properties.
所以我们要设置一个0px的左边属性和一个0px的顶级属性 So we're going to set a left property of 0px and a top property of 0px as well.
接下来 我们将添加一个背景颜色 这将与导航元素中使用的背景颜色相匹配 Next we'll add in a background color that will match the background color we were using in the navigation element.
所以我们选择background-color：rgba（）;. So we'll choose background-color: rgba ();.
我们将使用0为红色 0为绿色 0为蓝色 然后为.65为alpha Inside we're going to use 0 for red, 0 for green, 0 for blue and then .65 for the alpha.
下一行 我们将进入并定义背景大小 Next line, we're going to come in and define background size.
我们要将背景设置为宽度为112px 高度为46px We're going to set the background to 112px on the width and 46px on the height.
但现在之前我们使用背景包含 因为我们正在设置锚点标签的高度和宽度与我们用作背景的SVG图形成比例 But now before we were using background contain because we were setting the height and the width of the anchor tag in proportion to the SVG graphic that we were using as the background.
但是在这里我们要确保 因为我们将标志的宽度设置为100％ 而是将高度设置为66 所以我们要将徽标放置在中心位置 并确保其尺寸成正比 But here we want to make sure since we're making the width of the logo 100% and the height 66, we want to position the logo in the center and make sure that its sized proportionally.
而现在要保持标志在左手边 我们将进入并设定背景位置 And now to keep the logo on the left hand side, we're going to come in and set the background position.
我们将在y上的x和中心设置20px We're going to set 20px on the x and center on the y.
所以这将在66的高度垂直中心 但它仍然会将标志位于左侧20px So this will center vertically within the height of 66 but it will still position the logo at 20px on the left hand side.
所以我们去浏览器测试一下 So let's go test this in a browser.
我们会重新加载 We'll hit reload.
徽标有点小 Logo's a little bit smaller.
锚标签正在占据整个区域 The anchor tag is taking up the entire area up here.
背景颜色正在生效 然后标志正在调整大小并位于左侧 The background color is taking effect and then the logo is now being resized and positioned over to the left.
而且在那里 让我们来这里 重新定位我们的英雄 And with that in place, let's come down here and reposition our hero div.
所以回到CSS 所以返回 So back to the CSS, and so return.
我们的目标是标题div.hero Let's target header div.hero.
放在我们的括号中 Put in our brackets.
我们将宽度更改为300px Let's change the width to 300px.
我们将顶级属性更改为85px Let's change the top property to 85px.
而我们将左边的属性改为130px And we'll change the left property to 130px.
现在我们以左边的财产为百分比 但是由于我们将背景图形定位在左边 所以我们总是知道背景图形将显示在哪里 Now before we had the left property as a percentage, but since we are positioning the background graphic to the left, we always know where that background graphic is going to show up.
所以我们可以将左边的属性设置为130像素 这将使内容远离背景图像中的元素 So we can set the left property here to 130px and that will move the content far enough away from the elements in the background image.
然后我们终于让目标在那里的h1标签 And then finally let's target the h1 tag inside of there.
我会复制这一行 I'll duplicate this line.
div.hero h1 div.hero h1.
删除这些属性 我们将添加边距：底部 我们将这只是10px Remove these properties and we'll add in margin: bottom and we'll make this just 10px.
看看它是否有效 See if it worked.
然后再回到浏览器中 让我们重新加载 And then back in the browser, let's hit reload.
现在 如果我调整浏览器的大小 你会看到 由于我们将左侧的背景图形关闭 我知道我需要有多远的内容 因此它不会与背景图像中的元素重叠 And now if I resize the browser, you'll see that since we hinge that background graphic to the left, I know exactly how far away I need to have my content so that it doesn't overlap with the elements in the background image.
所以现在 头部区域得到照顾 接下来我们将重点介绍主要和气氛部分 So now with the header area taken care of, next we'll focus on the main and atmosphere sections.