将我的基础与 HTML5/CSS 对齐答案

【问题标题】：Aligning my base with HTML5/ CSS将我的基础与 HTML5/CSS 对齐
【发布时间】：2014-04-08 02:09:44
【问题描述】：

我是一名初级网页设计师，有一些基本问题想请教各位大神。我正在设计一个投资组合网站，但我似乎无法让它的基础与我想要的一致。

这就是我想要的： https://imageshack.com/i/0xovibp

它看起来不是那样的。这是我的html：

<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="graphic design, art direction, portfolio, toronto, design, branding, Mira Metter, St. Joseph Media, editorial">
<meta name="description" content="design">

<title>Portfolio site</title>

<link href="mainhome4.css" rel="stylesheet" type="text/css">

</head>

<body>

<div id="container">
<div id="top"> 

    <div id="banner">   
</div>

 <div id="nav-menu"><nav>
    <ul class="nav">
      <li><a href="portfolio.html">portfolio</a></li>
      <li><a href="about.html">about</a></li>
    </ul>
</nav></div>
<a href="index4.html"><img class="logo" src="images/mira-logo.png" alt="mira-logo"></a>

  </div>

<section id="home">

 <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="FlashID" title="homesmoke2">
<param name="movie" value="video/homesmoke2.swf">
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="6.0.65.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="Scripts/expressInstall.swf">
<param name="BGCOLOR" value="#FFFFFF">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object data="video/homesmoke2.swf" type="application/x-shockwave-flash">
  <!--<![endif]-->
  <param name="quality" value="high">
  <param name="wmode" value="opaque">
  <param name="swfversion" value="6.0.65.0">
  <param name="expressinstall" value="Scripts/expressInstall.swf">
  <param name="BGCOLOR" value="#FFFFFF">
  <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
  <div>
    <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
    <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
  </div>
  <!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</section>

<footer>

<h3> <a href="contact.html">contact me</a></h3>

<img class="arrow" src="images/arrow.png" alt="arrow">

<nav><ul>
<li><img class="social-media"src="images/pinterest.png" alt="pinterest"></li>
<li><img class="social-media" src="images/twitter.png" alt="twitter"></li>
<li><img class="social-media" src="images/instgram.png" alt="instagram"></li>
<li><img class="social-media" src="images/facebook.png" alt="facebook"></li>
</ul></nav>

</footer>  


</div>

</body>
</html>

这是我的 CSS：

/* CSS Document */

/* Header/ Navigation */

#container{
margin: 0 auto; 
text-align: center;
background-color:#FFF;
font-family: helvetica, arial;
text-decoration: none; }

img.logo { 
text-align: center;
padding-top:0.5em;
width: 255px;
height: 255px; 
position: relative;
z-index:+1;}

#nav-menu {
position: absolute;
z-index: +1;
margin-top: 12em;
width: 101%;
background-color:#000000;
height: 2.8em;
text-align: center; }

#top ul {
display: inline-block;
padding-top: 0.5em;
list-style-type: none;
text-align: center; }

#top ul li {
display: inline-block;
margin: auto; }


/*Nav Links*/   

#nav-menu li a:link {
font-size: 14px;
display: inline;
text-align: center;
padding: 4px;
text-decoration: none;
color: #FFF; }

#nav-menu li a:hover, a:active {
font-size: 18px;
text-align: center;
color: #CCC; }

#nav-menu li a:visited {
font-size: 14px;
font-color:#0F0;
text-align: center;
color: #CCC; }

/* Body/ Section */ 

#home {
margin-right: auto;
margin-left: auto;
margin-top: -10.3em;
position: fixed;
position: relative;
width: 100%;
height: 100%;
text-align: center; }

#portfoliobody {
display: inline-block;
width: 100%;
height: 100%;
background-color:#FFF;
text-align: center;
overflow-y: auto; } 

#portfoliobody ul {
text-align: center;
margin: 0 auto; }   

#portfoliobody ul li {
text-decoration: none;
display: inline-block;
text-align: center; }

#body {
margin-right: auto;
margin-left: auto;
width: 100%;
height: 100%;
text-align: center;
padding-top: 2.5em; }

#body ul {
text-align: center;
margin: 0 auto; }

#body ul li {
text-decoration: none;
display: inline-block;
text-align: center;
padding-right: 2em; }

h2 {
float:left;
padding-left: 2em;
padding-top: 0.5em;
text-align: left;
font-family: helvetica, arial;
font-size: 22px;
color:#FFF;
text-decoration: none;
font-weight: lighter; }

/* Contact Form CSS */

#form {
text-align: left;
font-family: helvetica, arial;
font-size: 14px;
font-weight: lighter;
color: #999;
text-decoration: none;
display: block;
padding-left: 24em; }

input, textarea {
background-color: #FFF; }

input[type=submit], input[type=reset] {
width:125px;
color:#999;
background-color:#CCC; }

/* Footer */
/*Footer Bar*/  
footer {
width:101%;
margin: 0 auto; 
height: 2.8em;
background-color:#000; }

footer ul {
padding-right: 2em; }

footer nav ul li {
list-style-type: none;
display: inline;
padding-left: 0.5em; 
float: right;
padding-right: auto;
padding-top: 5px; }

h3 {
float:left;
padding-left: 6em;
padding-right: 1em;
text-align: left;
font-family: helvetica, arial;
font-size: 20px;
color:#FFF;
text-decoration: none; }

h3 a:link {
font-size: 20px;
text-decoration: none;
color: #FFF; }

h3 a:hover, a:active {
font-size: 20px;
text-decoration:underline;
color: #CCC; }

h3 li a:visited {
font-size: 20px;
color: #CCC; }

/* Images */

.social-media { 
width: 35px;
height: 35px; }

.portfolio-menu {
width: 300px;
height: 300px; }    

.arrow {
float: left;
padding-top: 0.5em; }

.rollovers {
border: thin groove #000;
width: 283px; 
height: 294px; }

object { 
width: 100%; 
height: 100%; }

【问题讨论】：

“基地”是什么意思？标题？页脚？背景？身体？
Here is what I want: 我什么都没看到。
你能说得更具体点吗？
基本上我无法对齐网站的顶部。并让页脚位于浏览器的底部。我想将徽标和 2 个导航链接置于其中心，同时将它们置于黑条中。在它仍然响应的同时。
这是我想要的：imageshack.com/i/0xovibp

标签： css html responsive-design alignment

【解决方案1】：

如果您指的是容器，我认为您需要做的就是：

       body{
            margin: 0;
            padding: 0;

      }


        #container{
            margin: 0 auto; 
            width: whatever you want the width to be;
            text-align: center;
            background-color:#FFF;
            font-family: helvetica, arial;
            text-decoration: none; 
       }

您在 css 中还有一个您在页面中不使用的 body id。如果您希望容器 div 居中对齐，则不能在 body margin 上使用 auto。你也不需要身体的 id。 body 是 DOM 树结构的第一部分，所以只有 body 就可以了。

编辑：

检查this jfiddle 以帮助您入门，但您必须随时添加边距并调整高度。我建议您只需在任何给定网页上按 f12 即可熟悉 Google Chrome 开发工具。您实际上可以使用此工具重新创建网页。希望这会有所帮助！

【讨论】：

这似乎对一些人有所帮助，如何围绕徽标对齐导航链接？
在这种情况下，您将不得不对大多数内部容器使用 %s。您需要将外部 div #container 设置为 100%，然后将两个内部元素设置为每个内部元素所需的百分比，这样当窗口调整大小时，div 也会如此。标题和侧边栏是固定元素。我实际上建议在 chrome 中使用 f12 并观察 html 布局以查看是否无法复制它。这个工具作为一个 web 开发者是无价的。希望这会有所帮助！
谢谢，我想是的。我发布的网站是我在 Photoshop 中设计的，我很难在网上找到类似的东西来查看 HTML。
我注意到了。您还可以尝试在 Windows 中使用剪切工具并创建 Photoshop 图片的图像，或者仅保存图像，当您定义图像的宽度和高度时，父容器的高度应拉伸以适合它们。不客气。
谢谢！宽度：100%；做出响应？