css - 我正在尝试从 psd 模板创建一个网站，但我在标题部分遇到了困难

Question

大家晚上好

如标题中所述，我尝试从我找到的 psd 模板重新创建一个网站(当然是练习)。

我遇到的问题是，当我尝试重新创建网站的 header 部分时，我很难将它们放在一个“盒子”中，因为之后我需要将 Logo 和 ul 列表都放在黑色背景的边框中，并且不透明度设置为 0.3(我知道该怎么做，这不是问题)。

任何帮助都会很棒，我确实尝试过使用一些新的 HTML5 语法，但它们不起作用，这可能是我现在遇到的相同问题的原因。

我附上我的代码:

<div id="header">
  <p id="logo">Brandi <span id="line"> | </span> <span id="tag">I'am your tag line</span></p>
  <ul id="nav">
    <a href="#">
      <li>Home</li>
    </a>
    <a href="#">
      <li>Features</li>
    </a>
    <a href="#">
      <li>Works</li>
    </a>
    <a href="#">
      <li>Team</li>
    </a>
    <a href="#">
      <li>Contact</li>
    </a>
  </ul>
</div>  

这是我的 CSS:

body {
width: 100%
margin: auto;}

#logo   {
float: left;
font-size: 28pt;
font-family: Pacifico;
color: black;
padding: 0 100px;}

#tag {
font-family: Open Sans;
font-style: Regular;
font-size: 12pt;
color: #666;}

#line {
color: deepskyblue;
font-family: Open Sans;
font-style: Regular;
font-size: 20pt;
padding: 0 20px;}

#nav {
float: right;
list-style: none;
padding: 30px 0;}

#nav a {
font-family: Open Sans;
font-style: Regular;
display: inline-block;
text-decoration: none;
padding: 20px 20px;
color: black;}

a:hover {
border-bottom: 2px solid deepskyblue;}

Answer 1

为了格式良好的 HTML，我建议嵌套您的 <a > <li> 内的标签而不是相反。 (引用文档 here )。查看您的代码，您的 <div id="header">已经在你的 #logo 周围形成了一个盒子和 #nav .

如需复习，请查看 HTML Block Elements和 Box Model .

看看这些jsfiddle做你想做的。

body {
    width: 100%;
    margin: auto;
    overflow: hidden;
}

#header {
    border: 1px solid black;
    background-color: lightblue;
    overflow: auto;
}

#logo {
    float: left;
    font-size: 28pt;
    font-family: Pacifico;
    color: black;
    padding: 0 100px;
}

#tag {
    font-family: Open Sans;
    font-style: Regular;
    font-size: 12pt;
    color: #666;
}

#line {
    color: deepskyblue;
    font-family: Open Sans;
    font-style: Regular;
    font-size: 20pt;
    padding: 0 20px;
}

#nav {
    list-style: none;
    padding: 30px 0;
}

#nav li{
    float: right;
}

#nav a {
    font-family: Open Sans;
    font-style: Regular;
    display: inline-block;
    text-decoration: none;
    padding: 0px 20px;
    color: black;
}

a:hover {
    border-bottom: 2px solid deepskyblue;
}

<div id="header">
    <p id="logo">Brandi<span id="line"> | </span><span id="tag">I'am your tag line</span></p>
    <ul id="nav">      
      <li><a href="#">Home</a></li>
      <li><a href="#">Features</a></li>
      <li><a href="#">Works</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
</div>