1. 首页
  2. 问答
  3. 如何修复我的投资组合网站的路线？

如何修复我的投资组合网站的路线？

2014-06-27 25 views
-1

我是新来的HTML和CSS，并试图建立我的第一个投资组合网站。如何修复我的投资组合网站的路线？

我有一些困难，想知道是否有人能带领我走向正确的方向。我希望我的导航栏保持固定，以便在向下滚动页面时不会移动。但所有的身体项目都没有正确对齐。我似乎无法让我的形象，表格和目标正确对齐。

我想发生：

  • 的图像是最左边的页面中，居中，和下方的导航栏
  • 表对齐图片正下方（无论图像，表格也是如此） ps该表只是链接到我的社交媒体帐户
  • 目标是在页面的右侧，图像旁边，但它们之间有很多空间
  • 标题是高于目标（无论目标是什么，标题）
  • 结论：在页面的右边应该是客观和称号，并在页面的左边应该是图像和表格

问题我有：

  • 标题隐藏在后面导航栏
  • 表，图像和目标将不会正确对齐

任何帮助将不胜感激，谢谢！

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; 
}

来源

2014-06-27 user3781682

回答

相关问题

 相关问题