gpt4 book ai didi

jquery - 底部边距不起作用

转载 作者:行者123 更新时间:2023-11-28 14:13:20 26 4
gpt4 key购买 nike

我是网络开发的新手,我只是想为自己制作一个作品集网站。我选择使用 bg stretcher 2 (全屏图像 slider )作为查看我的图像的方法。最重要的是,我正在尝试创建一个导航菜单,尽管我在将 div 标签定位在窗口的左下角时遇到了一些麻烦,并且在窗口打开时保持在相同的位置调整大小。这是我的源代码:

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jerome Lousick</title>

<link rel="stylesheet" type="text/css" href="demo/main.css" />
<link rel="stylesheet" type="text/css" href="bgstretcher.css" />

<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="bgstretcher.js"></script>

<script type="text/javascript">
$(document).ready(function(){

// Initialize Backgound Stretcher
$('BODY').bgStretcher({
images: ['images/18.jpg', 'images/3.jpg', 'images/2.jpg', 'images/4.jpg', 'images/11.jpg', 'images/13.jpg', 'images/15.jpg'],
imageWidth: 1024,
imageHeight: 768,
slideDirection: 'W',
slideShowSpeed: 1000,
transitionEffect: 'fade',
sequenceMode: 'normal',
buttonPrev: '#prev',
buttonNext: '#next',
pagination: '#nav',
anchoring: 'left center',
anchoringImg: 'left center'
});

$('BODY').bgStretcher.pause(); //slideshow starts paused

});
</script>

<script type="text/javascript" src="demo/main.js"></script>

<style type="text/css">
#apDiv1 {
position:absolute;
width:250px;
height:65px;
z-index:1;
left: 16px;
top: 338px;
}
#apDiv2 {
position:absolute;
width:200px;
height:51px;
z-index:2;
left: 19px;
margin-bottom: 400px;
}
#apDiv2 .nav-buttons .nav-buttons #prev, #next, #toggleAnimation {
font-family: Consolas;
color: #FFF;
font-size:10px
}
</style>

</head>
<body>
<div id="apDiv1"><img src="images/logo.png" alt="" width="244" height="59" /></div>
<div id="apDiv2">
<p><span class="nav-buttons"><span class="nav-buttons"><a href="javascript:;" id="prev">Back |</a></span> <a href="javascript:;" id="next">Next</a></span></p>
<p>&nbsp;</p>
</div>
</body>
</html>

最佳答案

如果你想让 apDiv2 确实在窗口的左下角,你可以试试这个......

#apDiv2 {
position:absolute;
width:200px;
height:51px;
z-index:2;
left: 19px;
bottom: 19px; /*this would be how far from the bottom you want it positioned*/

此外,如果您希望导航菜单在您滚动时 float 在同一位置,您可以使用 position:fixed 而不是 position:absolute。

关于jquery - 底部边距不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9255578/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com