我如何使動態標頭調整大小？

Question

我想根據用戶屏幕的大小來調整標題。 到目前為止，我在左側有一個圖像，在右側有一個菜單。 我希望菜單的邊距從右邊開始變小，直到圖像開始變小，然后如果菜單變得更小，則菜單在圖像下面展開。

這是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;
}

謝謝您，我將不勝感激。

Answer 1

然后我建議要么保持水平的百分比，要么使用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/

祝好運！

我如何使動態標頭調整大小？

問題描述

1 個解決方案

解決方案1
1 已采納 2014-01-07 20:00:34

我如何使動態標頭調整大小？

問題描述

1 個解決方案

解決方案1 1 已采納 2014-01-07 20:00:34

解決方案1
1 已采納 2014-01-07 20:00:34