我想根据用户屏幕的大小来调整标题。到目前为止,我在左侧有一个图像,在右侧有一个菜单。我希望菜单的边距从右边开始变小,直到图像开始变小,然后如果菜单变得更小,则菜单在图像下面展开。

这是HTML代码:

    <body>

<script type="text/javascript" src="script.js"></script>
<script src="jquery1.js"></script>

<div id="wrapper">
    <!-- Header -->
    <div id="header">
        <!-- Logo -->
        <a href="index.htm"><div id="header_logo"></div></a>
        <!-- Navigation Bar -->
        <ul class="navbar">
            <li><a href="index.htm">Home</a>
            <li><a href="#">#</a>
            <li><a href="#">#</a>
            <li><a href="#">#</a>
            <li><a href="#">#</a>
        </ul>
    </div>


这是CSS代码:

#wrapper {
width: 80%;
margin-left: auto;
margin-right: auto;

}

#header {
float: left;
width: 100%;
height: 250px;
border: none;
}

#header_logo {
background: url("images/logo.png")no-repeat;
float: left;
width: 300px;
height: 135px;
margin: 50px 0px 0px 50px;
}

.navbar {
float: right;
margin-top: 125px;
margin-right: 100px;
width: 600px;
}

.navbar li {
float: left;
list-style-type: none;
}

.navbar li a {
padding: 6px 20px;
text-decoration: none;
border-right: 1px solid #0040FF;
color: #0040FF;
font-size: 15px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}

.navbar li a:hover{
color: #000000;
background-color:#0040FF;
}


谢谢您,我将不胜感激。

最佳答案

然后,我建议要么保持水平的百分比,要么使用CSS媒体查询。

百分比示例在这里:

HTML:

<div id="wrapper">
    <!-- Header -->
    <div id="header">
        <!-- Logo -->
        <a href="index.htm" id="header_logo"><img src="images/logo.png" /></a>
        <!-- Navigation Bar -->
        <ul class="navbar">
            <li><a href="index.htm">Home</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
        </ul>
    </div>
</div>


CSS:

#wrapper {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

#header {
    height: 250px;
}

#header_logo {
    float: left;
    width: 20%;
    margin: 50px 0 0 5%;
}
#header_logo img{width:100%;}

.navbar {
    float: right;
    margin-top: 125px;
    margin-right: 5%;
    text-align:right;
    width: 60%;
}

.navbar li {
    display:inline-block;
    list-style-type: none;
}

.navbar li a {
    display:block;
    padding: 6px 20px;
    text-decoration: none;
    border-right: 1px solid #0040FF;
    color: #0040FF;
    font:bold 15px 'Open Sans', sans-serif;
}

.navbar li a:hover{
    color: #000;
    background-color:#0040FF;
}


Jsfiddle:http://jsfiddle.net/ashishanexpert/kvg4F/

祝好运!

关于javascript - 我如何使动态 header 调整大小?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/20980174/

10-12 12:25
查看更多