0
私は非常にhtmlの世界に新しいですし、私は本とYouTubeからそれを学んでいます。セクションdivsを一緒に取得できません
私はこの1ページデザインを作成しようとしています。 This one right here
私はhtmlだけを使い始めましたが、私がどこにいるのか確認するためにいくつかのlorem ipsumがありました。すべてがうまくいった。
しかし、私は、セクションを作成して一緒に固執させようとし始めたが、それがすべて間違っていた。そして、私は問題が何であるか把握できません！
This is where im at in js fiddle
@import url(https://fonts.googleapis.com/css?family=Amatic+SC);
* {
color: white;
}
header {
position: fixed;
top: 0;
left: 0;
margin: 0;
width: 100%;
background-color: #333333;
}
nav {
float: right;
}
nav ul {
list-style-type: none;
}
nav li {
float: left;
margin-right: 5px;
font-family: 'Amatic SC', cursive;
font-size: 1.5em;
letter-spacing: 0.1em;
}
section {} h1 {
font-family: 'Amatic SC', cursive;
font-size: 800%;
text-align: center;
margin-bottom: 0;
padding-bottom: 0;
line-height: 1em;
}
h3 {
font-family: 'Amatic SC', cursive;
font-size: 300%;
text-align: center;
margin-top: 0;
line-height: 1em;
}
#home {
background-color: #334960;
}
#about {
background-color: #f17c72;
}
#portfolio {
background-color: #32ac97;
}
#contact {
background-color: #7f4c75;
}
#blog {
background-color: #3f9fc9;
}
footer {
background-color: #334960;
}<div id="page">
<header>
<nav>
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">About</a>
</li>
<li><a href="#">Portfolio</a>
</li>
<li><a href="#">Contact</a>
</li>
<li><a href="#">Blog</a>
</li>
</ul>
</nav>
</header>
<section id="home">
<!-- Home section -->
<h1>My name</h1>
<h3>Someday i will be a front end developer</h3>
</section>
<section id="about">
<!-- About section -->
<h1>About</h1>
<aside>
<img src="http://placehold.it/300x450">
</aside>
<article id="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta diam ante, eu vestibulum risus vestibulum id. Curabitur sed est arcu. Sed auctor ornare eros, ut vulputate felis tempor sit amet. Donec egestas turpis at quam vestibulum, non varius
augue finibus. Curabitur eu tellus id lectus porttitor pretium quis vitae massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ante diam, feugiat pharetra imperdiet eu, finibus in purus. Sed dapibus
quam ut efficitur euismod. Nunc vel urna sem. Integer id massa euismod, iaculis sem eget, congue enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque pretium urna a magna suscipit, in semper ex
euismod. Nullam sit amet quam auctor, viverra tellus non, imperdiet magna. Integer ante massa, sollicitudin et metus ac, dictum iaculis nisl. Fusce urna velit, sagittis quis lorem quis, fermentum mollis nulla.</article>
</section>
<section id="portfolio">
<!-- Portfolio section -->
<h1>Portfolio</h1>
<article id="left">
<img src="http://placehold.it/200x200">
</article>
<article id="mid">
<img src="http://placehold.it/200x200">
</article>
<article id="right">
<img src="http://placehold.it/200x200">
</article>
<!-- row -->
<article id="left">
<img src="http://placehold.it/200x200">
</article>
<article id="mid">
<img src="http://placehold.it/200x200">
</article>
<article id="right">
<img src="http://placehold.it/200x200">
</article>
<!-- row -->
</section>
<section id="contact">
<!-- Contact section -->
<h1>Contact</h1>
<article id="contactform">
<form name="sentMessage" id="contactForm" novalidate>
<div class="control-group form-group">
<div class="controls">
<label>Voor en achternaam:</label>
<input type="text" class="form-control" id="name" required data-validation-required-message="Please enter your name.">
<p class="help-block"></p>
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Telefoonnummer:</label>
<input type="tel" class="form-control" id="phone" required data-validation-required-message="Please enter your phone number.">
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>E-mail Adres:</label>
<input type="email" class="form-control" id="email" required data-validation-required-message="Please enter your email address.">
</div>
</div>
<div class="control-group form-group">
<div class="controls">
<label>Uw bericht:</label>
<textarea rows="10" cols="100" class="form-control" id="message" required data-validation-required-message="Please enter your message" maxlength="999" style="resize:none"></textarea>
</div>
</div>
<div id="success"></div>
<!-- For success/fail messages -->
<button type="submit" class="btn btn-primary">Verstuur</button>
</form>
</article>
</section>
<section id="blog">
<!-- Blog section -->
<h1>Blog</h1>
<blog>
<h2 class="blogtitle">Blog title</h2>
<p class="blogtitlesub">By admin</p>
<p>Integer facilisis at dolor eu accumsan. Quisque sollicitudin sem justo, a blandit sem accumsan non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis dui libero. In hac habitasse platea dictumst. Curabitur tincidunt metus
sed leo facilisis venenatis quis sit amet mi. Nullam sed ipsum mi. Quisque sapien turpis, porttitor eget ornare vitae, vestibulum vel enim. Fusce quis porta justo, vel sodales nisl. Sed feugiat, turpis suscipit sollicitudin convallis, diam neque
tempor nunc, sed dapibus orci odio id felis. Donec nisl erat, lacinia eu ipsum non, dictum accumsan augue. Vivamus eu justo facilisis, semper elit nec, blandit sem. Nam suscipit eu sem vitae ornare. Integer a nisi non risus dictum porta quis sed
massa. Nulla facilisi.</p>
<a href="#">Read More</a>
</blog>
<hr>
<blog>
<h2 class="blogtitle">Blog title</h2>
<p class="blogtitlesub">By admin</p>
<p>Integer facilisis at dolor eu accumsan. Quisque sollicitudin sem justo, a blandit sem accumsan non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis dui libero. In hac habitasse platea dictumst. Curabitur tincidunt metus
sed leo facilisis venenatis quis sit amet mi. Nullam sed ipsum mi. Quisque sapien turpis, porttitor eget ornare vitae, vestibulum vel enim. Fusce quis porta justo, vel sodales nisl. Sed feugiat, turpis suscipit sollicitudin convallis, diam neque
tempor nunc, sed dapibus orci odio id felis. Donec nisl erat, lacinia eu ipsum non, dictum accumsan augue. Vivamus eu justo facilisis, semper elit nec, blandit sem. Nam suscipit eu sem vitae ornare. Integer a nisi non risus dictum porta quis sed
massa. Nulla facilisi.</p>
<a href="#">Read More</a>
</blog>
<hr>
<blog>
<h2 class="blogtitle">Blog title</h2>
<p class="blogtitlesub">By admin</p>
<p>Integer facilisis at dolor eu accumsan. Quisque sollicitudin sem justo, a blandit sem accumsan non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis dui libero. In hac habitasse platea dictumst. Curabitur tincidunt metus
sed leo facilisis venenatis quis sit amet mi. Nullam sed ipsum mi. Quisque sapien turpis, porttitor eget ornare vitae, vestibulum vel enim. Fusce quis porta justo, vel sodales nisl. Sed feugiat, turpis suscipit sollicitudin convallis, diam neque
tempor nunc, sed dapibus orci odio id felis. Donec nisl erat, lacinia eu ipsum non, dictum accumsan augue. Vivamus eu justo facilisis, semper elit nec, blandit sem. Nam suscipit eu sem vitae ornare. Integer a nisi non risus dictum porta quis sed
massa. Nulla facilisi.</p>
<a href="#">Read More</a>
</blog>
<hr>
</section>
<footer>
Copyright by ME</footer>
</div>それが問題にどのような可能性があり（私はもちろんプロの初心者であることを除いて）？
希望する出力のスクリーンショットを貼ることができますか？ –
リンクがあります。私のデザインにつながります。 – SanderS