0
我正在爲朋友的項目創建示例html頁面。我已經創建了初始佈局，但是我無法正確獲取佈局。更正HTML佈局
這裏是我的Fiddle
<html>
<head>
<meta charset="UTF-8">
<title>Online Store</title>
<style>
header, footer {
padding: 1em;
color: white;
background-color: black;
clear: left;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #111;
}
li {
float: left;
overflow: hidden;
}
li a {
display: block;
color: white;
text-align: left;
padding: 16px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #333;
}
fieldset {
width: 100%;
overflow: hidden;
}
body {
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Company Heading</h1>
</header>
<fieldset id="navigation">
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
</ul>
</fieldset>
<article id="main-content">
<h3>Welcome to our collections</h3>
<p>London is the capital city of England. It is the most populous
city in the United Kingdom, with a metropolitan area of over 13
million inhabitants.</p>
</article>
<footer>Copyright under process © CompanyName 2012-2020.</footer>
</div>
</body>
</html>
我有兩個問題：
- 導航欄和整個車身寬度超出可視屏幕。
- 我想修復頁面高度，不知何故它堅持內容。我想讓它填充瀏覽器的高度。
我在做了5年的差距後的一個web項目，所以請忍受我愚蠢的錯誤。提前致謝。
更新：將更多問題添加到此線程。 我已更新我的佈局以顯示更多組件。這是我當前的HTML： https://jsfiddle.net/8bzjv8e0/
當前目標： 1.固定的菜單欄有黑色主題和適當的間隔和對齊。 2.劃分主要內容區域爲左側導航欄和主要內容區域創建區域。
這裏是我的代碼：
<body>
<div class="container">
<header>
<h1>Our Collection</h1>
<nav>
<ul>
<li><a href="#tabs-1">Menu1</a></li>
<li><a href="#tabs-2">Menu2</a></li>
<li><a href="#tabs-3">Menu3</a></li>
<li><a href="#tabs-3">Menu4</a></li>
</ul>
</nav>
</header>
<div class="container" id="body-layout">
<div id="left-nav-bar" class="left-nav">left nav contents</div>
<div id="content" class="right-content">main content area</div>
</div>
<footer>Copyright under process © Company Name 2017-2020.</footer>
</div>
</body>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
background: #F5F4EF;
margin: 0;
}
* {
padding: 0;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
article {
flex: 1;
}
header, footer {
padding: 1em;
color: #F5F4EF;
background-color: black;
text-align: center;
}
header nav {
text-align: left;
}
nav li {
display: inline-block;
}
nav {
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
nav a {
color: #F5F4EF;
}
/* Headings */
h1 {
font-size: 1.651em
}
h2 {
font-size: 1.571em
} /* 22px */
h3 {
font-size: 1.429em
} /* 20px */
h4 {
font-size: 1.286em
} /* 18px */
h5 {
font-size: 1.143em
} /* 16px */
h6 {
font-size: 1em
} /* 14px */
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
line-height: 1.1;
margin-bottom: .8em;
color: #F5F4EF;
}
.left-nav {
background-color: Red;
float: left;
width: 30%;
height: 100%;
}
.right-content {
background-color: Aqua;
margin-left: 70%;
height: 100%;
}
謝謝德揚，我錯過了你的帖子。這是非常解決我的問題。 – kromastorm