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

我创建一个页面，该页面只有一个页眉和页脚，还有一个按钮位于页面中间。我尝试使用边距顶部，它似乎没有改变任何东西。您还可以看到我试图为背景加载图像，但每当我运行代码时，它都没有显示。我知道这可能是我缺少的东西，但任何帮助都会很棒。

谢谢。

.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;
}

阅读更多关于"完美背景在这里"

相关内容

最新更新

热门标签：