我正在尝试以一种博客格式创建我的第一个从头开始的网页。到目前为止,我的页眉/功能/侧边栏/页脚似乎表现良好,但我在两点上挣扎。我的导航栏链接不想留在导航 div 中,并且功能部分中的弹性框不想出现在行中。
导航栏是更令人头疼的问题,因此非常感谢有关该导航栏的具体帮助。如果你能同时解决这两个问题,那就更好了:)
谢谢!
/* ----------------------------- */
/* BASIC SETUP */
/* ----------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
min-width: 0;
min-height: 0;
color: rgb(13, 56, 0);
}
html {
/* background-color: rgb(179, 223, 198); */
font-family: "Lato", "Arial", sans-serif;
/* this is the imported font */
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
/* ----------------------------- */
/* NAVIGATION */
/* ----------------------------- */
.main-nav {
display: flex;
flex-direction: row;
list-style: none;
margin-top: 55px;
justify-content: center;
}
.main-nav li {
/* this selects all li elements in .main-nav */
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
/* this selects the a tags inside each .main-nav li element */
padding: 8px 0;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid rgba(13, 56, 0, 0.933);
}
#nav {
border: 0.5px solid rgb(94, 2, 2);
display: flex;
flex-direction: row;
justify-self: center;
width: 100%;
grid-area: nav;
}
/* ----------------------------- */
/* MAIN GRID & FLEX */
/* ----------------------------- */
.container {
display: grid;
width: 100vw;
height: 100vh;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 5vh 10vh 70vh 10vh;
grid-template-areas: "nav nav nav nav" "header header header header" "main main main sidebar" "footer footer footer footer";
grid-gap: 5px;
padding: 10px;
border: 2px solid #000000;
justify-content: center;
}
.box {
display: grid;
justify-content: center;
align-items: center;
background-color: #ffffff;
}
#b1 {
border: 0.5px solid rgb(94, 2, 2);
order: 1;
grid-area: header;
}
#b2 {
border: 0.5px solid rgb(94, 2, 2);
order: 2;
grid-area: main;
}
#b3 {
border: 0.5px solid rgb(94, 2, 2);
order: 3;
grid-area: sidebar;
}
#b4 {
border: 0.5px solid rgb(94, 2, 2);
order: 4;
grid-area: footer;
}
/* ----------------------------- */
/* FEATURE FLEX */
/* ----------------------------- */
.feature {
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid #000000;
}
#f1 {
order: 1;
}
#f2 {
order: 2;
}
#f3 {
order: 3;
}
#f4 {
order: 4;
}
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8" />
<title>Exercise 1</title>
<meta content="width=device-width, initial-scale=1, maxium-scale=1" name="viewport" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
</head>
<body>
<div class="container">
<div class="box" id="nav">
<ul class="main-nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Search</a>
</li>
<li>
<a href="#">Archive</a>
</li>
<li>
<a href="#">Other</a>
</li>
</ul>
</div>
<div class="box" id="b1">This is the Title Page of my Project.</div>
<div class="box" id="b2">
<article class="feature" id="f1">One</article>
<article class="feature" id="f2">Two</article>
<article class="feature" id="f3">Three</article>
<article class="feature" id="f4">Four</article>
</div>
<div class="box" id="b3">
This will be the right-hand Content column.
</div>
<div class="box" id="b4">This is the Footer of my project.</div>
</div>
</body>
</html>
</html>
答案 0 :(得分:1)
.main-nav 删除 margin-top 和 .box 改变 display 为 display: flex;这应该可以解决您的问题。
答案 1 :(得分:0)
基于@BrentOwen 的回答,这里是工作片段。
/* BASIC SETUP */
/* ----------------------------- */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
min-width: 0;
min-height: 0;
color: rgb(13, 56, 0);
}
html {
/* background-color: rgb(179, 223, 198); */
font-family: "Lato", "Arial", sans-serif;
/* this is the imported font */
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
/* ----------------------------- */
/* NAVIGATION */
/* ----------------------------- */
.main-nav {
display: flex;
flex-direction: row;
list-style: none;
justify-content: center;
}
.main-nav li {
/* this selects all li elements in .main-nav */
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
/* this selects the a tags inside each .main-nav li element */
padding: 8px 0;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid rgba(13, 56, 0, 0.933);
}
#nav {
border: 0.5px solid rgb(94, 2, 2);
display: flex;
flex-direction: row;
justify-self: center;
width: 100%;
grid-area: nav;
}
/* ----------------------------- */
/* MAIN GRID & FLEX */
/* ----------------------------- */
.container {
display: grid;
width: 100vw;
height: 100vh;
grid-template-columns: 25% 25% 25% 25%;
grid-template-rows: 5vh 10vh 70vh 10vh;
grid-template-areas: "nav nav nav nav" "header header header header" "main main main sidebar" "footer footer footer footer";
grid-gap: 5px;
padding: 10px;
border: 2px solid #000000;
justify-content: center;
}
.box {
display: grid;
justify-content: center;
align-items: center;
background-color: #ffffff;
}
#b1 {
border: 0.5px solid rgb(94, 2, 2);
order: 1;
grid-area: header;
}
#b2 {
border: 0.5px solid rgb(94, 2, 2);
order: 2;
grid-area: main;
}
#b3 {
border: 0.5px solid rgb(94, 2, 2);
order: 3;
grid-area: sidebar;
}
#b4 {
border: 0.5px solid rgb(94, 2, 2);
order: 4;
grid-area: footer;
}
/* ----------------------------- */
/* FEATURE FLEX */
/* ----------------------------- */
.feature {
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid #000000;
}
#f1 {
order: 1;
}
#f2 {
order: 2;
}
#f3 {
order: 3;
}
#f4 {
order: 4;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Exercise 1</title>
<meta content="width=device-width, initial-scale=1, maxium-scale=1" name="viewport" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
</head>
<body>
<div class="container">
<div class="box" id="nav">
<ul class="main-nav">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Search</a>
</li>
<li>
<a href="#">Archive</a>
</li>
<li>
<a href="#">Other</a>
</li>
</ul>
</div>
<div class="box" id="b1">This is the Title Page of my Project.</div>
<div class="box" id="b2">
<article class="feature" id="f1">One</article>
<article class="feature" id="f2">Two</article>
<article class="feature" id="f3">Three</article>
<article class="feature" id="f4">Four</article>
</div>
<div class="box" id="b3">
This will be the right-hand Content column.
</div>
<div class="box" id="b4">This is the Footer of my project.</div>
</div>
</body>
</html>