Question

我的页面背景如下：

enter image description here

是老tbillisi的照片，这里也是我的代码

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

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

Answer 1

将您的“links”div放置在您希望使用tour 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;
}

Answer 2

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

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

Answer 3

<强> HTML

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

<强> CSS

#links-container {
    float: right;
}

Answer 4

<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 here：http://jsfiddle.net/Ya4Ra/1/

将Div定位到页面的中心

4 个答案: