Question

我是HTML和CSS的新手，并尝试构建我的第一个投资组合网站。

我遇到了一些困难，并且想知道是否有人可以引导我朝着正确的方向前进。我希望我的导航栏保持固定，以便在向下滚动页面时，它不会移动。但是所有身体物品都没有正确对齐。我似乎无法将我的图像，表格和目标正确对齐。

我想要发生什么：

图片位于页面的最左侧，居中并位于导航栏下方
表格在图像正下方对齐（无论图像在哪里，表格也是如此）附：该表只是指向我的社交媒体帐户的链接
目标位于页面右侧，图像旁边但是它们之间有很多空间
标题高于目标（无论目标在何处，标题也是如此）
总结：页面右侧应该是客观和标题，并且页面左侧应该是图像和表格

我遇到的问题：

标题隐藏在导航栏后面
表格，图片和目标未能正确对齐

非常感谢任何帮助，谢谢！

HTML

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

<body> 

<div id="center">
<h1>NAME</h1>
<img src="#"/a>
<table>
<tr>
<td><a href="#"><img src="#"/></a></td>
<td><a href="#"><img src="#"/></a></td>
<td><a href="#"><img src="#"/></a></td>
<td><a href="#"><img src="#"/></a></td>
<td><a href="#"><img src="#"/></a></td>
</tr>
</table>

<h4>Objective<h4>

</div>

<div id="navigation"> 
<ul>
<li><a href="#">MENU ITEM</a></li>
<li><a href="#">MENU ITEM</a></li>
<li><a href="#">MENU ITEM</a></li>
<li><a href="#">MENU ITEM</a></li>
<li><a href="#">MENU ITEM</a></li>
</ul>
</div>


<div id="footer">
<div id="bottom">
<p> &copy; All Rights Reserved by FULL NAME<span class="em"></span></p></div>
</div>
</body>     
</html>

CSS

body {
    padding: 0;
    margin: 0;
    max-width: 960px;
    font-family: Verdana, Geneva, Sans-serif;
}

#navigation {
    position: fixed;
    top: 0; 
    color: #FFFFFF;
    height: 50px;
    text-align: center;
    width: 100%; 
    margin: 0;
}

#navigation  li {
    font-size: 30px;
    padding-left: -20px;
    padding-right: -20px;
    color: white;
    text-decoration: none;
    font-family: Georgia, Serif, Times;
    display: inline;
    float: left;
}

#navigation ul {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#navigation ul li {
    width: 20%;
    float: left;
    color: #00131C;
}

#navigation a:link, a:visited {
    color:#FFFFFF; 
    background-color:#000000; 
    text-align:center; 
    padding:6px; 
    text-decoration:none; 
    display: block;
} 

#navigation a:hover, a:active {
    background-color:#FFFFFF; 
    color: #000000;
}

#circle{
    border-radius: 100% 100% 100% 100%;
    width: 300px;
    height: 300px;
    position: center;
}

.center {
    font-family: Verdana, Geneva, Sans-serif;
    text-align: center;
    top: 100px;
    float: center;
    margin-left: auto;
    margin-right: auto;
}

.center img {
    float: center;
    margin-right: auto;
    margin-left: auto;
}

.center p {
    text-align: left;
    position: relative;
    float: right;
    font-family: Verdana, Geneva, Sans-serif;
    font-size: 30px;
    top: -100px;
}

.center p{
  width: 50%;
  background: #FFFFFF;
  border: 5px solid #FFFFFF;
  border-radius: 10px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  margin: 0 auto;
  padding: 15px 10px 15px 10px;
  background: #FFFFFF;
  position: top;
}

.center table {
    background-color: #FFFFFF;
    margin-left: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    position: center;
}

table img {
    height: 40px;
    width: 40px;
    float: center;
    position: center:
}

#footer{
    clear: both;
    position: relative;
    bottom: 0;
    height: 3 px;
    background-color: #FFFFFF;
    padding: 0;
}

#bottom p {
    color: black;
    font-size: 15px;
    padding-left: -20px;
    padding-right: -20px;
    padding-top: 17px;
    padding-bottom: 17px;
    text-decoration: none;
    font-family: Georgia, Serif, Times;
    float: center;
    position: center;
}

Answer 1

以下是您的代码出错的地方：

您在html中使用<div id="center">，但您的CSS引用了类center
float: center;和position: center;对中心对象无效。有关如何对象居中的详细信息，请参阅http://www.w3.org/Style/Examples/007/center.en.html

我认为你想要这样的事情http://jsfiddle.net/vAuFA/

如何修复我的投资组合网站的对齐方式？

1 个答案: