HTML 和 CSS - 如何创建按钮和过渡页面

Question

我之前在遇到问题的地方问了一个问题，问题已经解决了。现在，因为我是初学者，没有钱购买教程，所以我将自学并在这里经常提问。现在我的问题是在我的页面上如何只在页面右侧的白色部分制作按钮以及如何修改这些按钮？请注意，页眉和页脚上的黑色是我的基本边框，白色 space 是我要放置所有网站信息的地方（这是我的 IT 课程作业，所以它是基本的）。现在，当我按下一个按钮时，如何使白色 space 上的信息过渡到网站的下一部分？例如。假设我单击一个名为 "Info" 的按钮 - 我希望我当前所在的页面过渡到那个页面幻灯片或其他什么，我只希望这发生在页面的白色部分。这是我的代码：

我将非常感谢在此过程中竭尽全力帮助我的任何人。而且我也很困惑为什么页脚不会与顶部横幅完全相同。

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*/
}

这将使按钮与 window 的右侧而不是通常的左侧对齐。要修改所有按钮，请使用上面的 css。如果你只想做一个按钮，请在 HTML:

中给它一个 class 调用信息

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

然后在你的 CSS 中输入：

.buttonName {
    float:right;
}

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

如果您想让页眉和页脚在单击按钮时消失，您需要将 JavaScript 添加到您的页面。只需添加（在 head 标签中）

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

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

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

使用该属性，您的按钮将告诉浏览器运行名为 "hideBlack()" 的 JavaScript 函数。

至于您的页脚不正确，请对照我的示例进行检查。

您的页脚不起作用，因为在您的 CSS 中，您忘记在其中一种样式的末尾添加分号，这搞砸了背景颜色，使其变成白色。

HTML 和 CSS - 如何创建按钮和过渡页面

HTML and CSS - how do I create buttons and transition pages

html

css

transition

button

hover