HTML和CSS - 如何创建按钮和转换页面

Question

我早些时候在某个地方问了一个问题，我被困住了，它已经解决了。 现在因为我是初学者，没有钱购买教程，所有我都会自学并在这里经常提问。 现在我的问题在我的页面上是如何在我的页面右侧仅在白色部分的位置制作按钮以及如何修改这些按钮？ 请注意，页眉和页脚上的黑色是我的基本边框，白色空间是我要放置所有网站信息的地方（这是我的IT课程，所以它是基本的）。 现在，当我按下按钮时，如何仅在白色空间过渡到网站的下一部分时才提供信息？ 例如，我说我点击了一个名为“信息”的按钮 - 我希望我当前所在的页面转到那个页面幻灯片或不是什么，我只想在页面的白色部分发生这种情况。 这是我的代码：

对于那些在这个过程中帮助我的人，我将非常感激。 而且我也很困惑为什么页脚不会与顶部横幅完全相同。

html {
    font-family: volkorn;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

.top-section {
    padding: 30px 0;
    margin-bottom: 0;
    color: #000000;
    background-color: #000000;
    background-size: cover;
}

.top-section {
    padding-top: 100px;
    padding-bottom: 100px;
}  

.bottom-banner {
  padding: 30px 0;
  margin-bottom: 0;
  color: #000000
  background-color: #000000;
  background-size: cover;
 }

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<title>Upload Festival</title>  
    <head> 
    <!--css-->
    <link href="css/customization.css" rel="custom" style="text/css">
  </head>
<body class="index">
<header class="top-section" role="banner"></header>
<div class="bottom-banner">
</div>
</body>
</html>

Answer 1

要使按钮出现在最右侧，请使用以下css：

button {
    float:right;
    /*Other Modifications Go Here*/
}

这将使按钮与窗口的右侧对齐，而不是通常的左侧。 要修改所有按钮，请使用上面的css。 如果你只想做一个按钮，在HTML中给它一个名为info的类：

<button class="buttonName">Click Me</button>

然后在你的CSS类型中：

.buttonName {
    float:right;
}

如果您希望按钮位于标题下方，只需将标记放在标题之后和页脚之前。

如果要在单击按钮时使页眉和页脚消失，​​则需要在页面中添加JavaScript。 只需添加（在头部标签中）

<script>
    function hideBlack() {
        document.getElementByTagName("header").display="none";
    }
</script>

然后在HTML的正文标记中，更改按钮代码，使其具有“onclick”属性。 这是它的样子：

<button id="buttonName" onclick="hideBlack()">Click Me</button>

使用该属性，您的按钮将告诉浏览器运行名为“hideBlack（）”的JavaScript函数。

至于你的页脚没有锻炼，请检查你的例子对我的。

你的页脚不起作用，因为在你的CSS中，你忘了在你的一个样式的末尾添加一个分号，它会搞砸背景颜色，让它变成白色。