问:在跟随过程中,我的布局并没有像Guil一样执行。我不确定自己在做什么错,也许是我看过的错字了?
<!DOCTYPE html>
< html >
< head >
< title > Poly </ title > < meta name = “ viewport” content = “ width = device-width” > < link rel = “ stylesheet” href = “ css / base。 css“ > < link rel = ” stylesheet“ href = ” css / nav.css“ > </ head > <正文>< div类
= “容器” >
<!-开始头文件-> <头文件类= “主头文件” > <一个类= “站点标志” href = “#” > < img src = “ img / logo.svg” ALT = “破虏UI工具包” > </一> < UL类= “NAV” > <李> <一个HREF = “#” >字体</ a > </ li >
<锂> <一个 HREF = “#” >图表</一> </李>
<李> <一个HREF = “#” >位置</一> </李> <李> <一个HREF = “#” >支持</一> </李> <李> <一个HREF = “#” >图片</ a > </ li >
<锂> <一个 HREF = “#” >网站</一> </李>
</ UL > </报头> <! -端头- > < DIV类= “主要内容” > < H1 >主要标题</ h1 > < p >
Lorem ipsum dolor坐下,一直保持良好状态。Cras mattis lobortis quam id venenatis。整数elit pulvinar elit。Nunc magna mauris,索利妥丁素,矢状sa。Morbi eget在eget nunc中。Curabitur ornare faucibus fringilla。Praesent magna neque,austor ac euismod sed,suscipit sed lorem。Curabitur euismod Tellus et nibh mollis。无菜豆 Cras vel ultricies色情。Sed sed ante an angrave efficitur quis non dui。Fusce sagittis ullamcorper metus et tempus。</ p >
</ div > </ div > </ body > </ html >
/ * --------------------------
主要样式
-------------------- ------- * /
.main-header,
.nav {
display:flex;
flex-direction:列;
}
.main-header {
padding-top:2em;
}
.site-logo {
宽度:110px;
align-self:center
}
.nav {
margin:1.5em;
}
.nav a {
display:block;
颜色:#797e83;
字号:1.125em;
字体粗细:300;
文本对齐:居中;
填充:.4em;
border-bottom:1px实心#ebecec;
}
.nav a:hover {
color:#0b0b0b;
边框底色:#52bab3;
}
/ * --------------------------
媒体查询
------------------- -------- * /
@media(min-width:769px){.
main-header {
height:200px;
}
.site-logo {
宽度:140px;
}
.nav {
margin:3em;
}
.nav a {
border-bottom-color:transparent;
}
}
谢谢你的帮助!
答:你快到了 您错过了媒体查询中的2条小规则。
您在哪里写:
。导航 {
保证金:3 em ; }
应该是:
。导航 {
margin-top :3 em ; 挠曲方向:行; 证明内容:之间的空间;}