1
これは私が問題を抱えている例です。Navbarに問題がありますが、修正しない方法は？
したがって、私がスクロールすると、固定されたプロパティとルックがスクロール上に消えてしまいますので、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>
こんにちは、相対作るに変える位置はナビゲーションバー白（実在しない） – Shadow