javascript - CSS/JavaScript : Liquid Design issue-6ren

javascript - CSS/JavaScript : Liquid Design issue

转载作者：行者123 更新时间：2023-11-28 07:22:05

25

4

我正在尝试制作一个与另一个网站相似的网站。在他们的网站上，他们使用 JavaScript 更改第一部分的填充以将其保留在 Windows 视口(viewport)中。我已经这样做了，但是现在我遇到了一个问题，就是当窗口大小改变时，让按钮按照按钮的移动方式移动。

请看下面的视频，基本上当我减小高度(在一定程度上)时按钮应该向上移动，但在我的副本上它没有，因为我不知道他们是怎么做到的。下面的视频显示了他们的 CSS 代码和 HTML，JavaScript 似乎没有改变任何值来使按钮移动，但确实如此，元素的填充从 96 开始没有改变。

YouTube Video

编辑:到目前为止我的代码，html:

<body>
    <div class="container">
        <section id="header" class="arrows" style="padding:280px 0px">
            <header>
                <h1>Mobile Paint Solutions</h1>
                <p>Since 1980</p>
            </header>
            <footer>
                <a onClick="test()" href="" class="button white">About</a>
            </footer>
        </section>
        <section id="banner" class="arrows">
            <header>
                <div>
                    <h1>About Us</h1>
                    <p>We are a proud company and have been providing a superb service for many years. You may read some of our reviews or sumbmit your own below! </p>
                </div>
            </header>
            <footer>
                <a href="#banner" class="button white">About</a>
            </footer>
        </section>
    </div>
</body>

#header 的 CSS:

body {
        text-align:center;
        font-family:'Source Sans Pro', sans-serif;
        letter-spacing: 1px;
        background-image:url(images/bg.jpg);
        padding:0px;
        margin:0px;
    }
    header { margin-bottom: 1em; }
    * { 
        margin:0; 
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    *:before, *:after {
        box-sizing: border-box;
    }

    /* Header and Title Styles */
    #header {
        display:inline-block;
        text-transform:uppercase;
        color:#FFF;
        cursor:default;
        text-align: center;
    }
    #header header p:before {
        content: '';
        display: block;
        border-top: solid 1px rgba(255, 255, 255, 0.5);
        margin: 4px 0 0.8em 0;
    }
    #header header p {
        border-top:solid 1px rgba(255, 255, 255, 0.5);
        letter-spacing:3px;
        text-transform:uppercase;
        font-size:1em;
        margin-top:1em; 
    }
    #header h1 {
        font-size:2.5em;
        font-weight:bold;
        letter-spacing:3px;
    }

这是一个link到他们的网站，这样你就可以看到它的工作。

最佳答案

解决了这个问题，似乎页脚需要绝对定位，改变了一些其他代码，例如相对定位页眉，然后它似乎开始工作了。

关于javascript - CSS/JavaScript : Liquid Design issue，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32036746/

25

4

0

文章推荐： html - 即使减小浏览器的宽度，如何将页脚保持在屏幕底部？

文章推荐： c++ - 未定义的类型特征引用

文章推荐： c++ - C++ 中的嵌套/递归类

文章推荐： c++ - 递归创建树

designer - 设置默认值 power Designer
我正在用power designer创建一个物理模型，我想将默认值添加到我的Mysql表中。有可能吗，有人加了默认值？谢谢最佳答案有可能，我发现“列属性”并不容易方法如下: 选择表格(单击
design-principles - 任何好的应用程序应该关心什么特性 'By-Design'
关闭。这个问题是 opinion-based 。它目前不接受答案。想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文来回答。 2年前关闭。 Improve t
material-design - Material Design 对话框应该如何动画化？
我正在编写一个采用 Material Design 布局的应用程序，但找不到任何关于如何将对话框动画显示到屏幕上的指南。这表明盒子应该只是“砰”的一声存在，但这似乎违背了设计的精神，包括动画和触觉。
C# [Design] 丢失.. 只剩下 .designer
我做了一个巨大的掠夺，不小心丢失了我的*.cs(设计文件)..我刚刚得到了*.designer文件。我能否反过来，仅使用 .designer 文件以某种方式创 build 计文件 (*.cs)，还是
seo - 我是否需要 "Web Design [city-name]"和 "Website Design [city-name]"的页面，或者我可以使用 "Website Design [city-name]"对两者进行排名？
如果 Google 的关键字规划器向我显示关键字“Web Design [city-name]”获得约 880 次搜索，而“Website Design [city-name]”获得约 620 次搜索
material-design - 处理动态添加的元素 Material Design Lite
首先，代码: $(document).ready(function() { $('#member_pattern').hide(); $('.add-member').click(function()
system-design - 采访: System/API design
大型软件公司之一问了这个问题。我想出了一个简单的解决方案，我想知道其他人对该解决方案有何看法。 You are supposed to design an API and a backend for
material-design - 计算所有 Material Design 高程的阴影值
在最新的 Material Design 文档 (https://www.google.com/design/spec/what-is-material/elevation-shadows.html#
database-design - MongoDB Schema Design - 许多小文档还是更少的大文档？
背景我正在对从我们的 RDBMS 数据库到 MongoDB 的转换进行原型(prototype)设计。在进行非规范化时，似乎我有两种选择，一种会导致许多(数百万)个小文档，另一种会导致更少(数十万)
qt-designer - Qt Designer 使用 QWebEngineView 崩溃
Qt Designer (5.11.2) 在选择 QWebEngineView-Widget 时崩溃。我正在创建一个对话框，以将其作为 .ui 文件包含在 QGIS 3 中。在表单中，我想使用 QW
material-design-lite - Material Design Lite 汉堡菜单不在标题中居中
我直接从 getmdl.io(组件页面)和所有设备(多台 PC、浏览器、手机等)复制代码，汉堡菜单不在标题中居中。我似乎无法隔离 css 中的菜单图标来重新对齐它。 getmdl.io 上的所有组件代
material-design - 如何为SPA动态初始化materialize design lite(google)的组件？
如何为 SPA 动态初始化 materialize design lite (google) 的组件？当我在 View 中动态初始化组件时，JS 没有初始化。正如我已经尝试过使用 componentH
material-design-lite - Material Design Lite 旋转木马
我正在使用 Angular 4 构建一个 Web 应用程序。对于设计，我使用的是 Material Design lite。但是，我想使用 MDL 实现一个交互式轮播，它给我流畅的外观和感觉，并且与我
material-design-lite - Material Design Lite 还是聚合物入门套件？
它看起来像 Polymer Starter Kit包含比 Material Design Lite 更多的组件，并且现在可用。由于两者都是符合 Material Design 理念的 Google 项
material-design-lite - Material Design Lite 样式输入字段
我在设置 mdl-textfield 样式时遇到了一些困难。具体来说，设置 float 标签的大小和颜色，以及按下输入字段后动画的高度和颜色。实际上，这是我从组件列表中获取的起点。 https:/
database-design - 好友列表 : Relational Database Table Design
所以，好友列表的现代概念: 假设我们有一个名为 Person 的表。现在，那个 Person 需要有很多伙伴(其中每个伙伴也在 person 类中)。构建关系的最明显方法是通过连接表。即 buddyI
material-design-lite - Material Design Lite 导航
如何在导航中创建子菜单项？ Link Link Link Link 我不能用用它。什么是正确的类？最佳答案 MDL 似乎还没有原生支持子菜单。然而
design-patterns - 如何解决像 "design a vending machine"这样的设计问题
我想知道我应该遵循哪些步骤来解决设计自动售货机等问题并提出许多设计文档(如用例、序列图、类图)。是否有任何我可以阅读的来源/链接，其中讨论了如何逐步进行。谢谢。最佳答案我不确定是否有任何普遍接受
design-patterns - 重新哈希 : Accounting Software Design Patterns
早在 10 月份，Kristopher Johnson 就询问了 Accounting Software Design Patterns 他收到了几个答案，但基本上都是一样的，都指向Martin Fo
c# - 为什么 System.Design 中的许多 Designer 类都标记为内部类？
我一直在为我们的产品开发一些组件，其中之一是基于流布局面板。我想做的是为它提供一个自定义设计器，但不会丢失其默认设计器 (System.Windows.Forms.Design.FlowLayout

首页

博学

6Ren·AI

商城

javascript - CSS/JavaScript : Liquid Design issue