Question

编码很新，

主要寻找border帮助和navbar单词分离问题

HTML

<!DOCTYPE html>
<html>
  <link type="text/css" rel="stylesheet" href="stylesheet.css" />

  <head>
    <title>Rock Coast</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <header>
    <img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome"></img>
    <div id="nav">
      <span><a href="#">Home</a></span>
      <span><a href="#"><button>Televeisions</button></a></span>
      <span><a href="#">Electronics</a></span>
      <span><a href="#">Services</a></span>
    </div>
  </header>

  </body>
  <div id="black">
    <h1> Something Occurs</h1>
    <p>Within this space is some text, or other graphical representations of things that this page displays</p>
  </div>
  <h1> Products </h1>
  <div id="parent">
    <span id="first"> <b>Product Name</b> </span>
    <span id="second"> <b>Product Name</b></span>
    <span id="third"> <b>Product Name</b> </span>
  </div>
  <div id="left">
    <pre>  
    This is a product
    description
    It takes up a few
    lines of space.
  <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

           Dimensions
    Product    might go
    Info:      here

               Another
    More       piece of
    Info:      data

  <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

     Buy it now!
    </pre>
  </div>
  <div id="center">
    <pre>  
    This is a product
    description
    It takes up a few
    lines of space.
  <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

           Dimensions
    Product    might go
    Info:      here

               Another
    More       piece of
    Info:      data

  <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

     Buy it now!
    </pre>
  </div>
  <div id="right">
    <pre>  
    This is a product
    description
    It takes up a few
    lines of space.
  <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

           Dimensions
    Product    might go
    Info:      here

               Another
    More       piece of
    Info:      data

  <span style= "color:#b25a03;font-style:bold;"><strong>________________________ </strong></span> 

     Buy it now!
    </pre>
  </div>
  </body>

</html>

CSS

header {
  height: 5.5em;
  background: gray;
  color: Black;
  text-align: justify;
  overflow: hidden;
}
img {
  float: left;
}
header {
  height: 5.5em;
  background: gray;
  color: Black;
  text-align: justify;
  overflow: hidden;
}
img {
  float: left;
}
#nav {
  width: 600px;
  text-align: center;
  margin-top: 2.5em;
}

#nav span a {
  color: black;
  text-decoration: none;
  padding: 10px;
  background:white;
}



h1 {
  color: #e5780d;
  font-family: Courier;
  letter-spacing: 3px;
  margin-left:.5%;

}
p{margin-left:.5%;
  word-spacing:4px }

#black {
  margin: 3px solid black;
  word-spacing: 4px;
  margin:left:.75%;
}

h3 {
  color: #e5780d;
  font-family: Courier;
  letter-spacing: 3px;
}

span { vertical-align: baseline; }

#first { font-size:16px;
         margin-left:5.5%;
         }

#second {font-size:16px;
         margin-left:9.1%}

#third{font-size: 16px;
        margin-left:8.6%}

#left {
  float: left;
  text-align: justify;
  display: inline-block;
  color: white;
  margin-left: 2%;
  background: #e5780d;
  width: 14%;
  border-radius: 10px;
  font-size:12px;
  font-style:Bold;
}

#center {
  display: inline-block;
  float: left;
  margin-left: 2.001%;
  color: white;
  background: #e5780d;
  width: 14%;
  border-radius: 10px;
  font-size:12px;
  font-style:Bold
}

#right {
  display: inline-block;
  float: left;
  text-align: left;
  color: white;
  margin-left: 2.002%;
  background: #e5780d;
  width: 14%;
  border-radius: 10px;
  font-size:12px;
  font-style:Bold;
}

Fiddle

Answer 1

我快速翻了你原来的codepen只是为了看看我是否可以帮助你了解你在做什么。缺少一个完整的教程，快速和肮脏的是你需要使用适当的标记，然后智能地对事物进行分组。

我只为你建造了导航，因为没有为你做的工作，我希望你能学到一些东西。 HTML看起来像：

  <header>
  <img src="http://s32.postimg.org/5bebu6mbl/Image_5_8_16_at_12_10_PM.jpgHome" />
    <nav role="navigation">
      <a href="#">Home</a>
      <a href="#">Televisions</a>
      <a href="#">Electronics</a>
      <a href="#">Services</a>
    </nav>
</header>
<main>
 <p>Content goes here</p>
</main>

基本的CSS会是这样的：

    body{
 background:black; 
}
header {
  background: #789;
  color: Black;
  font-family:sans-serif;
}
header *{
  display:inline-block;
  border-radius:4px;
}
nav {
  background:white;
  position:relative;
  top:-2rem;
  padding:.7rem 1rem;
  padding-right: 4rem;
}
nav a{
  text-decoration:none;
  color:black;
  padding:.4rem .6rem;
}
nav a:hover{
  border:1px solid black;
  background:lightgray;
}
main{
  margin-top:10px;
  padding-top:.5rem;
  height:100%;
  border-radius:1rem;
  background:white;
}

希望如果你看看我为你做的代码笔，你至少会有一个跳跃点，我可以回答你可能遇到的任何具体问题。

***编辑** 块元素的html我可能会做类似的事情：

<section>
    <div>
      Block stuff goes here.
    </div>
    <div>
      Block stuff goes here.
    </div>
    <div>
      Block stuff goes here. 
    </div>
  </section>

我还可以为每个添加类，这样你就可以单独控制那些外部分组。

我要做的最后一件事是学会使用flexbox，并将适当的CSS应用到外部。

希望我帮忙！：）

边框导致与div和段落对齐的问题

1 个答案: