0
友人のプロジェクトのサンプルHTMLページの作成に取り組んでいます。私は最初のレイアウトを作成しましたが、レイアウトを正しく取得するのに問題があります。HTMLレイアウトの修正
- ナビゲーションバーと可視スクリーン越え全身幅：ここ
は、私は2つの問題を抱えている私の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年間のギャップの後にウェブプロジェクトを行っていますので、私のばかげた間違いをご負担ください。前もって感謝します。
：このスレッドにさらに問題を追加しました。 レイアウトを更新して、より多くのコンポーネントを表示しました。 https://jsfiddle.net/8bzjv8e0/
現在の目標： 1.黒をテーマと適切な間隔とアライメントを持つようにメニューバーを固定ここに私の現在のhtmlです。 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%;
}
Dejanありがとう、私は前にあなたの記事を逃した。これは私の問題を非常に解決しました。 – kromastorm