Question

我创建的页面只有一个页眉和页脚，一个按钮位于页面中间。我尝试使用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%;
}

对不起，如果我没有正确显示代码。

Answer 1

您可以通过这样组织代码来完成此操作：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;
}

详细了解“perfect background here”

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

1 个答案: