Я относительно новичок в HTML / CSS, но мне нравится думать, что у меня довольно хороший gr asp по большинству аспектов. Однако это меня смущает.
На моем фиктивном веб-сайте, независимо от того, какой новый элемент я добавляю, он автоматически помещается в определенную c позицию в верхней части страницы. Я пробовал возиться с CSS, но безуспешно. В этом примере элемент p со значением «Элемент примера» является последним элементом в коде, но отображается сразу под nav во фрагменте кода.
Возможно, вам придется запустить фрагмент в полноэкранном режиме; Я не уверен, так как я не делал никаких вещей, связанных с окном просмотра, и он был адаптирован под мой монитор с ненормально широкой шириной.
Возможно, я еще не был знаком с этой конкретной концепцией.
@charset "UTF-8";
@font-face {
font-family: 'Gill Sans Std';
src: url(GillSansStd.otf) format("opentype");
}
@font-face {
font-family: 'SofiaPro';
src: url(SofiaPro.otf) format("opentype");
}
#logo {
margin: auto;
display: block;
opacity: 0.6;
}
header > h1 {
margin: 0 auto;
display: block;
border-style: none none solid none;
border-width: thin;
text-align: center;
font-family: "Bebas Neue", sans-serif;
font-size: 90px;
width: 380px;
}
nav {
margin-top: 55px;
margin-left: 650px;
margin-bottom: 20px;
}
nav > a {
margin-left: 85px;
margin-right: 85px;
font-family: "Raleway";
font-weight: bold;
padding: 10px;
}
nav > a:link {
color: black;
text-decoration: none;
}
nav > a:visited {
color: black;
text-decoration: none;
}
nav > a:hover {
background-color: black;
color: white;
}
#hero-content {
float: left;
margin-left: 90px;
margin-top: 150px;
}
#title {
font-size: 30px;
font-family: SofiaPro, sans-serif;
margin-bottom: 60px;
}
#subhead {
font-family: 'Gill Sans Std';
font-weight: 100;
font-size: 18px;
color: dimgrey;
border-style: none none solid none;
border-bottom-width: thin;
border-color: dimgrey;
padding-bottom: 10px;
padding-right: 15px;
padding-left: 10px;
}
#hero {
float: right;
margin-top: 40px;
margin-right: 40px;
}
#heropara {
width: 600px;
margin-top: 60px;
font-family: 'Raleway';
font-size: 20px;
font-weight: 800;
}
<!doctype html>
<html lang="en-gb">
<head>
<title>Blah Group</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="mainstyle.css" type="text/css" />
</head>
<body>
<header>
<h1>Foo</h1>
</header>
<nav>
<a href="#">BLAH</a>
<a href="#">BLAH</a>
<a href="#">BLAH</a>
<a href="#">BLAH</a>
<a href="#">BLAH</a>
</nav>
<div id="hero-content">
<h1 id="title">BLAH</h1>
<h2 id="subhead">BLAH</h2>
<p id="heropara">Lorem Ipsum blahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</p>
</div>
<img id="hero" src="https://www.littlethings.info/wp-content/uploads/2014/04/dummy-image-green-e1398449160839.jpg" height="200" width="200" />
<p>Example element</p>
</body>
</html>