Question

相当有能力使用HTML和CSS希望找到最顺从的方式来实现这一点。我想使用position：relative来制作一个菜单和页脚。我不能使用position：absolute，因为我希望我的页脚根据内容始终位于页面底部，而不是破坏DOM的流程。当我使用position：relative和width：100％;我注意到我的菜单和页脚两边都有空格。菜单顶部还有一个空白区域，而页脚底部有一个空白区域。希望这里的一位专家可以帮助我。

谢谢：）

＆＃13;

#mainMenu {
 font-family:Arial, Times, sans-serif;
 list-style-type:none;
 padding-right:30px;
 
} 

#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;

}

#mainMenu a:hover {
color:Teal;

}

#menu {
text-align:right;
width:inherit;
height:50px;
background-color:paleGoldenRod;
position:relative;
left:0;
top:0;


}
li {
display:inline;
}


th, td {
text-align:center;
border:1px dashed grey;
width:90px;
height:40px;
}
.formText {
margin:10px 0px;
}
footer {
background-color:SlateGray;
width:100%;
height:100px;
position:relative;
bottom:0;
left:0;



}

＆＃13;

<!DOCTYPE html>

<html>
  <head>
  <title>Contact Me</title>
  <link href="C:\Users\dan\Desktop\Table Generator Website\style.css" rel="stylesheet" type="text/css">
  </head>

  <body>
    <div id="menu">
      <ul id="mainMenu">
	    <li><a href="C:\Users\dan\Desktop\Table Generator Website\index.html">HOME</a></li>
	    <li><a href="C:\Users\dan\Desktop\Table Generator Website\About\index.html">ABOUT</a></li>
	    <li><a href="C:\Users\dan\Desktop\Table Generator Website\Contact\index.html">CONTACT ME</a></li>
	  </ul>
    </div>	
	
    <h2>Contact Me Directly</h2>
 
    <form>
	  <label>Full Name:</label><br> <input type="text" name="name" class="formText"><br>
	  <label>Your Age:</label><br> <input type="text" name="age" list="ageList" class="formText"><br>
	  <datalist id="ageList">
	  <option value="18">
	  <option value="19">
	  <option value="20">
	  <option value="21">
	  <option value="22">
	  </datalist>
	  <label>E-Mail:</label><br> <input type="text" name="e-mail" class="formText"><br>
	  <label>Your Message</label><br><textarea rows="5" cols="50" class="formText"> </textarea><br>
	  <textarea></textarea><br><textarea></textarea>
	  
	  <input type="submit" value="Submit">
	
	
	</form>
	   <footer>
	  <p>This website was designed to learn how to code with proper syntax</p>
	</footer>
 
  </body>

</html>

＆＃13;

编辑：使用保证金解决：0;问题是我的页脚和菜单正在采用＆＃34;默认＆＃34;确定文档正文的大小。

还有一个问题是，有没有办法将菜单放在页面顶部？没有上面的空白区域。

页脚也是如此，无论每页的内容大小如何，我都需要它始终位于页面底部。

Answer 1

margin上有大多数/所有浏览器的默认body。要删除它，请添加body { margin: 0; }。

浏览器会为所有类型的元素添加默认样式，这样，如果您只创建了一个包含h1，一些p＆和ul的HTML页面，页面将在视觉上格式化，没有任何额外的样式。在设计/设计自己的页面时，通常需要更改这些默认样式。

有些人使用* {margin:0;padding:0;}作为从浏览器中删除所有默认填充和边距的方法，如果您想在任何元素上添加边距/填充，则可以在需要的位置指定它。

还有像reset.css和normalize这样的样式表摘要，它们会执行此操作并设置一组其他默认值，这些默认值可以帮助您保持CSS一致性和浏览器不一致性的差异。您只需复制/粘贴该代码，并将其作为网站CSS中的第一个块包含在内。

＆＃13;

body {
  margin: 0;
}

#mainMenu {
  font-family: Arial, Times, sans-serif;
  list-style-type: none;
  padding-right: 30px;
}

#mainMenu a {
  text-decoration: none;
  margin: 5px;
  padding: 2px;
  color: SeaGreen;
  font-weight: bold;
}

#mainMenu a:hover {
  color: Teal;
}

#menu {
  text-align: right;
  width: inherit;
  height: 50px;
  background-color: paleGoldenRod;
  position: relative;
  left: 0;
  top: 0;
}

li {
  display: inline;
}

th,
td {
  text-align: center;
  border: 1px dashed grey;
  width: 90px;
  height: 40px;
}

.formText {
  margin: 10px 0px;
}

footer {
  background-color: SlateGray;
  width: 100%;
  height: 100px;
  position: relative;
  bottom: 0;
  left: 0;
}

＆＃13;

<!DOCTYPE html>

<html>

<head>
  <title>Contact Me</title>
  <link href="C:\Users\dan\Desktop\Table Generator Website\style.css" rel="stylesheet" type="text/css">
</head>

<body>
  <div id="menu">
    <ul id="mainMenu">
      <li><a href="C:\Users\dan\Desktop\Table Generator Website\index.html">HOME</a></li>
      <li><a href="C:\Users\dan\Desktop\Table Generator Website\About\index.html">ABOUT</a></li>
      <li><a href="C:\Users\dan\Desktop\Table Generator Website\Contact\index.html">CONTACT ME</a></li>
    </ul>
  </div>

  <h2>Contact Me Directly</h2>

  <form>
    <label>Full Name:</label><br> <input type="text" name="name" class="formText"><br>
    <label>Your Age:</label><br> <input type="text" name="age" list="ageList" class="formText"><br>
    <datalist id="ageList">
	  <option value="18">
	  <option value="19">
	  <option value="20">
	  <option value="21">
	  <option value="22">
	  </datalist>
    <label>E-Mail:</label><br> <input type="text" name="e-mail" class="formText"><br>
    <label>Your Message</label><br><textarea rows="5" cols="50" class="formText"> </textarea><br>
    <textarea></textarea><br><textarea></textarea>

    <input type="submit" value="Submit">


  </form>
  <footer>
    <p>This website was designed to learn how to code with proper syntax</p>
  </footer>

</body>

</html>

＆＃13;

Answer 2

要添加@Michael Coker的答案，默认样式应用于所有浏览器。

通常的做法是将重置css文件添加到项目中。好的就在这里：reset css

Answer 3

添加保证金：0;根据您的身体风格，如果您希望菜单始终位于底部，请使用position：fixed;

Answer 4

# config/initializers/resque_scheduler.rb
Resque.schedule = YAML.load_file('../calendar.yml')

# config/calendar.yml
your_recurring_job:
  cron: "0 0 * * *" # Every day at midnight
  class: "YourJobClass"
  queue: your_queue
  args:
  description: "This job does a thing, daily"

#mainMenu {
 font-family:Arial, Times, sans-serif;
 list-style-type:none;
 padding-right:30px;
 
} 

#mainMenu a {
text-decoration:none;
margin:5px;
padding:2px;
color:SeaGreen;
font-weight:bold;

}

#mainMenu a:hover {
color:Teal;

}

#menu {
text-align:right;
width:inherit;
height:50px;
background-color:paleGoldenRod;
position:relative;
left:0;
top:0;


}
li {
display:inline;
}


th, td {
text-align:center;
border:1px dashed grey;
width:90px;
height:40px;
}
.formText {
margin:10px 0px;
}
footer {
background-color:SlateGray;
width:100%;
height:100px;
position:relative;
bottom:0;
left:0;



}

为什么我的菜单和页脚有空格？

4 个答案: