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

【问题标题】：HTML and CSS - how do I create buttons and transition pagesHTML 和 CSS - 如何创建按钮和过渡页面
【发布时间】：2015-03-01 21:23:10
【问题描述】：

我早些时候在某个我被卡住的地方问了一个问题，它已经解决了。现在因为我是初学者，没有钱购买教程，我将在这里自学并提出常见问题。现在我的问题是在我的页面上，如何在页面右侧仅在白色部分所在的位置制作按钮，以及如何修改这些按钮？请注意，页眉和页脚上的黑色是我的基本边框，而空白是我要放置所有网站信息的地方（这是我的 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>

【问题讨论】：

这个问题混合了很多不同的查询。 a) 让用户导航到另一个页面的方式。 b) 如何设置 HTML 元素的样式以显示在其他元素的右侧/左侧。使用 Stack Overflow 的最佳方式是，一旦您遇到无法通过基本搜索找出的本地化特定问题 - 我们大多数人通过各种令人头疼的时刻学习 Web 编程，我们必须在网上搜索教程和资源为了。我们发现的大多数教程都是免费的。当您要求个人关注时，通常应该是因为没有其他任何地方可以解决您的问题。
请不要使用 sn-p 功能，除非有实际需要演示的东西。在这种情况下，只有一个空白乐队。已移除。谢谢。

标签： html css button hover transition

【解决方案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 的 body 标记中，更改按钮代码，使其具有“onclick”属性。这是它的样子：

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

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

至于您的页脚不起作用，请对照我的示例检查您的示例。

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

【讨论】：

感谢这位朋友。当我单击一个按钮时，我不想删除页脚和页眉，我只想让包含所有信息的空白区域滑到下一组信息。这可能吗？
您是否正在寻找一种滑动动作，您可以在其中看到空白区域滑动以显示另一张白色幻灯片（页眉和页脚仍然完好无损）？
是的，这正是我要找的
你能发布你当前代码的 JSfiddle 吗？对我来说可能会更容易一些。