導航欄的問題，如何使它不固定？

所以當我滾動時，navbar會因爲固定的屬性而損壞，並且會損壞它的外觀，如何讓它在滾動條上的徽標消失？

也可以有人建議我，如果這是一個良好的開始，如果還有一些我應該照顧的東西。我想讓右側的隨機小部件和左側的內容。

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Test Design 
 
</head> 
 
<style> 
 
\t /* Body style */ 
 
\t body { 
 
\t \t margin: 0; 
 
\t \t padding: 0; 
 
\t \t font-size: 12px; 
 
\t \t 
 
\t } 
 
\t 
 
\t /* Logo */ 
 
\t .header { 
 
\t \t position: relative; 
 
\t \t margin: 0; 
 
\t \t padding: 0; 
 
\t \t display: block; 
 
\t \t height: 50px; 
 
\t \t background: #fff !important; 
 
\t \t padding: 8px 16px; \t \t 
 
\t } 
 
\t .logo-1 { 
 
    font-family: Helvetica, "serif"; 
 
    text-decoration: none; 
 
    font-size: 37px; 
 
    letter-spacing: 3px; 
 
\t font-weight: 900; 
 
    color: #555555; 
 
    display: block; 
 
\t } 
 
\t 
 
\t /* Navigation */ 
 
\t .navbar { 
 
\t \t Position: fixed; 
 
\t \t width: 100%; 
 
\t \t background: #333333; 
 
\t  list-style-type: none; 
 
\t \t text-decoration: none; 
 
\t \t margin: 0; 
 
\t \t padding: 0; 
 
\t \t text-align: center; 
 

 
\t } 
 
\t 
 
\t li { 
 
\t \t float: left; 
 
\t } 
 
\t 
 
\t li a { 
 
\t \t display: block; 
 
\t \t padding: 14px 16px; 
 
\t \t color: #eee; 
 
\t \t text-decoration: none; 
 
\t \t text-align: center; 
 
\t \t font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
 
\t } 
 
\t 
 
\t li a:hover:not(.active) { 
 
\t \t background: #111111; 
 
\t } 
 
\t 
 
\t .active { 
 
\t \t background-color: #008cba; 
 
\t } 
 
\t 
 
\t /* Widget */ 
 
\t .widget { 
 
\t \t position:relative; 
 
\t \t bottom: -42px; 
 
\t \t float: right; 
 
\t \t overflow: hidden; 
 
\t \t width: 190px; 
 
\t \t border-left: 1px solid #9fa2a9; 
 
\t \t display: block; 
 
\t \t padding: 2px 5px; 
 
\t } 
 
\t 
 
\t </style> 
 
<body> 
 
\t <div class="header"><a class="logo-1" href="#">Test Design</a></div> 
 
<!-- Navigation --> 
 
<ul class="navbar"> 
 
\t <li><a class="active" href="#">Home</a></li> 
 
\t <li><a href="#">Portfolio</a></li> 
 
\t <li><a href="#">About</a></li> 
 
\t <li><a href="#">Contact</a></li> 
 
\t <li style="float: right"><a class="active" href="#">Register</a></li> 
 
\t <li style="float: right"><a href="#">Login</a></li> 
 
\t </ul> 
 
<!-- Widget --> 
 
<div class="widget"> 
 

 
\t <b><u>Random bullshit lorem-ispum</u></b> 
 
\t <form action="#" method="post"> 
 
    <div> 
 
     <label for="name">Text Input:</label> 
 
     <input type="text" name="name" id="name" value="" tabindex="1" /> 
 
    </div> 
 

 
    <div> 
 
     <h4>Radio Button Choice</h4> 
 

 
     <label for="radio-choice-1">Choice 1</label> 
 
     <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" /> 
 

 
    <label for="radio-choice-2">Choice 2</label> 
 
     <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" /> 
 
    </div> 
 

 
    <div> 
 
    <label for="select-choice">Select Dropdown Choice:</label> 
 
    <select name="select-choice" id="select-choice"> 
 
     <option value="Choice 1">Choice 1</option> 
 
     <option value="Choice 2">Choice 2</option> 
 
     <option value="Choice 3">Choice 3</option> 
 
    </select> 
 
    </div> 
 

 
    <div> 
 
    <label for="textarea">Textarea:</label> 
 
    <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> 
 
    </div> 
 

 
    <div> 
 
     <label for="checkbox">Checkbox:</label> 
 
    <input type="checkbox" name="checkbox" id="checkbox" /> 
 
    </div> 
 

 
    <div> 
 
     <input type="submit" value="Submit" /> 
 
    </div> 
 
</form> 
 
</div> 
 
</body> 
 
</html>

來源

2017-07-14 Shadow

.navbar { 
    position: relative; 
    background: #333333; 
    list-style-type: none; 
    text-decoration: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
}

更改導航欄位置 -

來源

2017-07-14 14:38:47

你好，改變位置相對導航欄品牌白（不存在） – Shadow

試試這個CSS

問題在這裏，你可以將這個li元素左浮動，所以它的父ul高度變collpased，爲了保持它的高度，你需要一個clearfix。

CSS

body { 
     margin: 0; 
     padding: 0; 
     font-size: 12px; 

    } 

    /* Logo */ 
    .header { 
     position: relative; 
     margin: 0; 
     padding: 0; 
     display: block; 
     height: 50px; 
     background: #fff !important; 
     padding: 8px 16px;  
    } 
    .logo-1 { 
    font-family: Helvetica, "serif"; 
    text-decoration: none; 
    font-size: 37px; 
    letter-spacing: 3px; 
    font-weight: 900; 
    color: #555555; 
    display: block; 
    } 

    /* Navigation */ 
    .navbar { 
     width: 100%; 
     background: #333333; 
     list-style-type: none; 
     text-decoration: none; 
     margin: 0; 
     padding: 0; 
     text-align: center; 

    } 

    .clearfix::after{ 
    content:""; 
    display:table; 
    width:100%; 
    clear:both; 
    } 

    li { 
     float: left; 
    } 

    li a { 
     display: block; 
     padding: 14px 16px; 
     color: #eee; 
     text-decoration: none; 
     text-align: center; 
    background-color: #212121; 
     font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; 
    } 

    li a:hover:not(.active) { 
     background: #111111; 
    } 

    .active { 
     background-color: #008cba; 
    } 

    /* Widget */ 
    .widget { 
     position:relative; 
     bottom: -42px; 
     float: right; 
     overflow: hidden; 
     width: 190px; 
     border-left: 1px solid #9fa2a9; 
     display: block; 
     padding: 2px 5px; 
    }

Link for reference 希望這有助於..

來源

2017-07-14 14:39:31

謝謝你很多:)！ – Shadow

@Shadow ... COOL：D ..快樂編碼 –

/* *導航/

.navbar { 
     Position: absolute; 
     width: 100%; 
     background: #333333; 
     list-style-type: none; 
     text-decoration: none; 
     margin: 0; 
     padding: 0; 
     text-align: center; 

    }

來源

2017-07-14 17:31:18

導航欄的問題，如何使它不固定？

回答

相關問題