jquery - 如何将 jquery 移动按钮向下移动页面-6ren

jquery - 如何将 jquery 移动按钮向下移动页面

转载作者：行者123 更新时间：2023-11-28 08:04:04

我正在创建一个只有页眉和页脚以及位于页面中间的按钮的页面。我试过使用 margin-top 并且它似乎没有改变任何东西。您还可以看到我正在尝试为背景加载图像，但每当我运行代码时它都不会显示。我知道这可能是我遗漏的东西，但任何帮助也将非常棒。

谢谢。

HTML

<html>

<head>
    <meta charset="UTF-8">
    <meta name="description" content="End-term project submission for CS4056 by Kevin Murphy - 11139323">
    <meta name="keywords" content="HTML,CSS, Mobile App Design">
    <meta name="author" content="Kevin Murphy">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="http://demos.jquerymobile.com/1.4.5/theme-classic/theme-classic.css">
    <link rel="stylesheet" href="styles.css">

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

    <div data-role="page" id="background">

        <div data-role="header" data-theme="a">
            <h1>Formula 1 Constructor List</h1>
        </div>

        <div data-role="main" class="ui-content" id="index_button">
            <a href="#" data-role="button" data-ajax="false">List of Teams</a>
        </div>

        <div data-role="footer" data-theme="a" data-position="fixed">
            <h1>Kevin Murphy - 11139323</h1>
        </div>

    </div>
</body>

</html>

CSS

html,
body {
    height: 100%;
    width: 100%;
}

.ui-header .ui-title {
    white-space: normal;
}

#background {
    background-image: url(formula1.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100%;
}

#index_button {
    margin-top: 50%;
}

如果我没有正确显示代码，我很抱歉。

最佳答案

您可以通过像这样组织代码来做到这一点:http://jsfiddle.net/ydsoneh7/

HTML:

<div data-role="page" id="background">
    <div class="header" data-role="header" data-theme="a">
        <h1>Formula 1 Constructor List</h1>
    </div>

    <div class="ui-content" data-role="main">
        <div id="index_button">
            <a href="#" data-role="button" data-ajax="false">List of Teams</a>
        </div>
    </div>

    <div class="footer" data-role="footer" data-theme="a" data-position="fixed">
        <h1>Kevin Murphy - 11139323</h1>
    </div>
</div>

还有你的 CSS:

body {
    width: 100%;
    height:100%;
    background: url(https://phillipbrande.files.wordpress.com/2013/10/random-pic-14.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* This makes the background always fill the div white spaces */
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color:#fff;
}
.ui-header .ui-title {
    white-space: normal;
}
.ui-content {
    height: 170px;
    position: relative;
    border: 1px solid #ff0;
}
#index_button {
    position: absolute;
    top: 50%; /* This centers #index_button */
    left: 50%; /* This centers #index_button */
    margin-left: -50px; /* This need to be half of the LEFT value */
    margin-top: -25px; /* This need to be half of the TOP  value */
    width: 100px;
    height: 50px;
    background: #fff;
}