Question

所以我正在为我的一个朋友建立一个网站，我不得不定位图像和导航栏＆＃34;亲戚＆＃34;所以我可以正确定位它们。但是现在当我添加段落标签时，单词和导航栏的空间很大

另外，我如何扩展我的导航栏以使其跨越页面？

代码：http://jsbin.com/puzihahaxu/edit?html,output

（你可以在jsbin中看到问题）

谢谢你的帮助！ - Anthony DeMatteis

Answer 1

代码有很多杂乱，正如我的评论中提到的：过度填充会导致奇怪的定位，请记住，在设计网站时必须考虑各种屏幕分辨率，否则它会在屏幕上看起来不错在其他计算机上很奇怪，你会想知道为什么......所以我建议回过头几步，了解每个元素的默认和基本样式以及HTML框模型的工作原理。看看我的简化示例，希望您从中学习：

https://jsfiddle.net/azizn/oo8sk8uw/

＆＃13;

/* main */

html,
body {
  padding: 0;
  margin: 0;
  background: darkseagreen;
  font-family: monospace;
}

#page {
  width: 75%;
  padding: 40px;
  margin: 40px auto;
  background: #FFF;
}


/* header */

#header {
  width: 100%;
  height: auto;
}

h1 {
  color: firebrick;
  padding: 0;
  margin: 20px 0;
}

/* menu */

#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display:block;
  background-color: lightgray;
  text-align: center;
}

#nav ul li {
  display: inline-block;
  padding:15px;
  font-size: 15pt;
  margin:0;
}

ul li a {
  text-decoration: none;
  width: 100%;
}

ul li a:link {
  color: green;
}

ul li a:visited {
  background-color: mediumpurple;
}

ul li a:hover {
  background-color: cornflowerblue;
}

ul li a:active {
  background-color: grey;
}

#word {
  margin-top:20px;
  position: relative;
}

＆＃13;

<div id="page">
  <img src="header.jpg" alt="Real Estate Lawyer" id="header">
  <h1> John De Matteis </h1>
  <div id="nav">
    <ul>
      <li><a href="john.html"> Home </a> </li>
      <li><a href="home.html"> About </a> </li>
      <li><a href="contact.html"> Contact Us </a> </li>
    </ul>
  </div>
  <div id="word">
    <p> This is some sample text egin by considering two key questions that ultimately summarize the return on your efforts: How much impact will addressing that issue have? Consider your essential question and your targeted objective. How far will addressing
      this issue get you towards your goal? How easy will it be to design and implement a solution? Consider the complexity of the issue, the amount of time and resources required, and risks to success. Ask these questions for each issue, tagging the
      issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix, like the one shown below. One axis will correspond to Ease of Execution; the
      other axis will correspond to Potential Impact. Plot out your solutions on the matrix, and focus on those faegin by considering two key questions that ultimately summarize the return on your efforts: How much impact will addressing that issue have?
      Consider your essential question and your targeted objective. How far will addressing this issue get you towards your goal? How easy will it be to design and implement a solution? Consider the complexity of the issue, the amount of time and resources
      required, and risks to success. Ask these questions for each issue, tagging the issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix,
      like the one shown below. One axis will correspond to Ease of Execution; the other axis will correspond to Potential Impact. Plot out your solutions on the matrix, and focus on those faegin by considering two key questions that ultimately summarize
      the return on your efforts: How much impact will addressing that issue have? Consider your essential question and your targeted objective. How far will addressing this issue get you towards your goal? How easy will it be to design and implement
      a solution? Consider the complexity of the issue, the amount of time and resources required, and risks to success. Ask these questions for each issue, tagging the issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or
      Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix, like the one shown below. One axis will correspond to Ease of Execution; the other axis will correspond to Potential Impact. Plot out your solutions on the matrix,
      and focus on those fa </p>
  </div>
</div>

＆＃13;

Answer 2

可能会有效 HYML代码：

<div id="page">
  <img src="header.jpg" alt="Real Estate Lawyer" id="header">
  <h1> John De Matteis </h1>
  <div id="nav">
    <ul>
      <li><a href="john.html"> Home </a> </li>
      <li><a href="home.html"> About </a> </li>
      <li><a href="contact.html"> Contact Us </a> </li>
    </ul>
  </div>
  <div id="word">
    <p> This is some sample text egin by considering two key questions that ultimately summarize the return on your efforts: How much impact will addressing that issue have? Consider your essential question and your targeted objective. How far will addressing
      this issue get you towards your goal? How easy will it be to design and implement a solution? Consider the complexity of the issue, the amount of time and resources required, and risks to success. Ask these questions for each issue, tagging the
      issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix, like the one shown below. One axis will correspond to Ease of Execution; the
      other axis will correspond to Potential Impact. Plot out your solutions on the matrix, and focus on those faegin by considering two key questions that ultimately summarize the return on your efforts: How much impact will addressing that issue have?
      Consider your essential question and your targeted objective. How far will addressing this issue get you towards your goal? How easy will it be to design and implement a solution? Consider the complexity of the issue, the amount of time and resources
      required, and risks to success. Ask these questions for each issue, tagging the issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix,
      like the one shown below. One axis will correspond to Ease of Execution; the other axis will correspond to Potential Impact. Plot out your solutions on the matrix, and focus on those faegin by considering two key questions that ultimately summarize
      the return on your efforts: How much impact will addressing that issue have? Consider your essential question and your targeted objective. How far will addressing this issue get you towards your goal? How easy will it be to design and implement
      a solution? Consider the complexity of the issue, the amount of time and resources required, and risks to success. Ask these questions for each issue, tagging the issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or
      Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix, like the one shown below. One axis will correspond to Ease of Execution; the other axis will correspond to Potential Impact. Plot out your solutions on the matrix,
      and focus on those fa </p>
  </div>
</div>

CSS代码

/* main css*/

*{
    margin:0;
    padding:0;}
html,body {
  background: darkseagreen;
  font-family: monospace;
}
#page {
  width: 75%;
  padding: 40px;
  margin: 40px auto;
  background: #FFF;
}


/* header css*/

#header {
  width: 100%;
  height: auto;
}
h1 {
  color: firebrick;
  padding: 0;
  margin: 20px 0;
}

/* menu css*/
ul li, ul li a{text-decoration:none;} 

#nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display:block;
  background-color: lightgray;
  text-align: center;
}
#nav ul li {
  display: inline-block;
  padding:15px;
  font-size: 15pt;
  margin:0;
}
ul li a {
  width: 100%;
}
ul li a:link {
  color: green;
}
ul li a:visited {
  background-color: mediumpurple;
}
ul li a:hover {
  background-color: cornflowerblue;
}
ul li a:active {
  background-color: grey;
}
#word {
  margin-top:20px;
  position: relative;
}

单词是从导航栏＆amp;如何扩展导航栏

2 个答案: