0

我的页面上有以下背景：

在此处输入图像描述

这是老第比利斯的照片，这也是我的代码

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<style>

#links { 
    margin: 0 auto; 
    width: 4800px; 
    font-size:70px;
    clear: both; 
    display: block;

}
#test a {
    float: right;
}
a, a:active, a:visited {
    color: red;
}
</style>
<body background="თბილისი.jpg" >


</body>
</html>

我想在我的页面上添加一些链接，例如“酒店”、“旅游”和“娱乐”，这样它们就不会出现在房屋等处。我喜欢它们在中间或右侧。你能告诉我怎么做吗？

4

4 回答 4

1 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>

<body background="http://www.cyprusq.com/wp-content/uploads/2010/02/NORTH-CYPRUS-HOTELS-view.jpg" >
<nav>
<ul>
<li><a href="">Hotel</a></li>
<li><a href="">Tours</a></li>
<li><a href="">Entertainment</a></li>
</ul>
</nav>

<style>
nav {
width: 300px;
float: right;
margin-top: 20px;
}

nav li a{
float: left;
padding: 0px 10px;
color: #fff;
}
</style>

</body>
</html>​

jsfiddle在这里：http: //jsfiddle.net/Ya4Ra/1/

于 2012-07-19T14:46:31.587 回答
1

将您的“链接” div 定位到您希望使用游览 CSS 显示链接的位置。使用边距或填充移动 div。定位 div 的其他方法可能是向左或向右浮动。

#links { 
    margin-top: 400px;//moves div down, this will probably be below the middle of the page 
    width: 4800px; 
    font-size:70px;
    clear: both; 
    display: block;
}
于 2012-07-19T14:10:14.503 回答
1

您已经将您的链接（#links，而不是在代码中）定位在页面的中心。您应该减小宽度以查看效果。尝试width: 950px;或width: 60em; max-width: 90%;。

另一种选择是绝对定位您的链接元素（我假设它将是一个列表）。

于 2012-07-19T14:11:20.773 回答
1

HTML

<div id="links-container">
    <a href="http://hostel.com>Super Hotel</a>
</div>

CSS

#links-container {
    float: right;
}
于 2012-07-19T14:13:14.173 回答