Fatal编程技术网
  • css/
  • Css 响应Div调整大小

Css 响应Div调整大小

css html

Css 响应Div调整大小,css,html,resize,Css,Html,Resize,我是个新来的程序员，我被一个调整大小的问题绊住了 我的标题是一个顶部有两个按钮的图像，这将是菜单。我想建立一个响应模板。但当我调整窗口大小时，这两个按钮并不完全跟随图像，而是停留在图像下方 我怎样才能修好它 <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>My Website</title> <script src="js/jquery-

我是个新来的程序员，我被一个调整大小的问题绊住了

我的标题是一个顶部有两个按钮的图像，这将是菜单。我想建立一个响应模板。但当我调整窗口大小时，这两个按钮并不完全跟随图像，而是停留在图像下方

我怎样才能修好它

<!DOCTYPE html>

<head>

    <meta charset="utf-8" />

    <title>My Website</title>

    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/flowtype.js"></script>

    <style type="text/css">

    body {
        overflow-x: hidden;
    }

    .image-banners {
        position: absolute;
        z-index: -1;
        max-width: 100%;
        height: auto;
        width: auto\9; /* ie8 */
        top: 0em;
        left: 0em;
    }
    .banner-title {
        position: relative;
        font-family: 'Segoe UI', sans-serif;
        font-size: 2em;
        text-shadow: 0.05em 0.05em black;
        color: rgba(255, 255, 255, 1);
        top: -0.5em;
        left: 2em
    }
    nav {
        position: fixed;
        margin-top: 2.5em;
        margin-left: 23em;
        font-family: 'Segoe UI', sans-serif;
        font-size: 0.5em;
        line-height: 2.6em;
    }
    .link-nav {
        text-decoration: none;
        color: rgba(215,215,215,1);
    }
    .menu-button-left {
        background: rgba(143,3,6,1);
            background: -webkit-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
            background: -moz-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
        width: 15em;
        height: 2.5em;
        text-align: center;
        float: left;
        border-radius: 0.3em 0 0 0.3em;
        border-right: 0.1em solid;
        border-color: rgba(106,2,4,1);
    }
    .menu-button-left:hover {
        background: rgba(106,2,4,1);
            background: -webkit-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
            background: -moz-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
    }
    .menu-button-right {
        background: rgba(143,3,6,1);
            background: -webkit-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
            background: -moz-linear-gradient(bottom, rgba(143,3,6,1), rgba(120,3,6,1));
        width: 15em;
        height: 2.5em;
        text-align: center;
        float: left;
        border-radius: 0 0.3em 0.3em 0;
    }
    .menu-button-right:hover {
        background: rgba(106,2,4,1);
            background: -webkit-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
            background: -moz-linear-gradient(bottom, rgba(106,2,4,1), rgba(90,2,4,1));
    }
    </style>
</head>

<body>
    <header>
        <img class="image-banners" src="images/Banner.png" />
        <h1 class="banner-title body">MY WEBSITE</h1>
        <nav>
            <a class="link-nav body" href="#1"><div class="menu-button-left"><b>BUTTON 1</b></div></a>
            <a class="link-nav body" href="#2"><div class="menu-button-right"><b>BUTTON 2</b></div></a>
        </nav>
    </header>

<script type="text/javascript">
    $('body').flowtype({
 minimum   : 400,
 maximum   : 1000,
 minFont   : 5,
 maxFont   : 40,
 fontRatio : 30
});
</script>

</body>
感谢您

首先，在这些情况下，创建JSFIDLE链接或类似的东西来演示您的问题是很常见的。那样的话，你可以找到一个

现在，要为按钮添加响应功能，您需要使用媒体查询。这通常适用于响应式设计。请看一下如何使用媒体查询，我想您已经准备好解决它了。

您可以提供任何链接吗？您的按钮位于导航中，位置固定，因此它们将始终位于页面顶部。除此之外，图像也是绝对位置。如果你能更好地使用姿势，你就不必太在意反应灵敏。而且你有一个在HTML5中是无效的标记，这没关系，但要避免。Dheeraj-不幸的是，我还处于起步阶段，而且我是一个新手，所以我正在基于我的pc构建网站。Naele-谢谢你的评论，我会研究你的建议，这样我才能改进我的HTML6。这真的是一个评论，而不是一个答案。谢谢你的回答。下一次，我将尝试使用JSFIDLE更加正确。我将调查你在这里发布的内容，并尝试根据它进行修复。