1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <span class="pln">body </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Verdana</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;</span><span class="pln"></span><span class="pun">}</span><span class="pln">header </span><span class="pun">{</span><span class="pln"> display</span><span class="pun">:</span><span class="pln"> flex</span><span class="pun">;</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">16px</span><span class="pun">;</span><span class="pln"></span><span class="pun">}</span><span class="pln">header h1 </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">22px</span><span class="pun">;</span><span class="pln"> line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">64px</span><span class="pun">;</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="pun">.</span><span class="pln">sp</span><span class="pun">-</span><span class="pln">menu </span><span class="pun">{</span><span class="pln"> margin</span><span class="pun">-</span><span class="pln">left</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">auto</span><span class="pun">;</span><span class="pln"></span><span class="pun">}</span><span class="pln"></span><span class="pun">.</span><span class="pln">sp</span><span class="pun">-</span><span class="pln">menu </span><span class="com">#open {</span><span class="pln"> font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">32px</span><span class="pun">;</span><span class="pln"> line</span><span class="pun">-</span><span class="pln">height</span><span class="pun">:</span><span class="pln"> </span><span class="lit">64px</span><span class="pun">;</span><span class="pln"> cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln"></span><span class="pun">}</span><span class="pln">main </span><span class="pun">{</span><span class="pln"> padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">0</span><span class="pln"> </span><span class="lit">16px</span><span class="pun">;</span><span class="pln"></span><span class="pun">}</span> |
body {
margin: 0;
font-family: Verdana, sans-serif;
}
header {
display: flex;
padding: 0 16px;
}
header h1 {
margin: 0;
font-size: 22px;
line-height: 64px;
}
.sp-menu {
margin-left: auto;
}
.sp-menu #open {
font-size: 32px;
line-height: 64px;
cursor: pointer;
}
main {
padding: 0 16px;
}