html - Flexbox 断点对两列没有响应
问题描述
这实际上是 Udacity 的一项任务，但你们会更快回复。我开始研究我对 flexbox 的理解，并且我一生都无法弄清楚如何在两列的同一行中获取“.hero”和“.content”类。无论出于何种原因，即使我设置了带有断点的媒体查询并在两个类周围放置了一个额外的容器，它也没有响应。我没有尝试任何工作，两个元素的宽度都保持在 100%。有人可以帮我吗？我很混乱。
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
font-family: Roboto;
font-size: 12px;
color: #424242;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
}
header,
nav,
footer,
section,
article,
div {
box-sizing: border-box;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
/*
*
* Common
*
*/
.news__more {
float: right;
font-size: .8em;
color: #333;
text-decoration: none;
}
/*
*
* Header
*
*/
.header {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
min-height: 56px;
transition: min-height 0.3s;
}
.header__inner {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.header__logo {
height: 72px;
margin-right: 1em;
vertical-align: top;
margin-top: 12px;
}
.header__title {
font-weight: 300;
font-size: 4em;
margin: 0.5em 0.25em;
display: inline-block;
color: #212121;
}
/*
*
* Top Level Navigation
*
*/
.nav {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.nav__list {
width: 100%;
padding: 0;
margin: 0;
}
.nav__item {
box-sizing: border-box;
display: inline-block;
width: 24%;
text-align: center;
line-height: 24px;
padding: 24px;
text-transform: uppercase;
}
.nav a {
text-decoration: none;
color: #616161;
padding: 1.5em;
}
.nav a:hover {
text-decoration: underline;
color: #212121;
}
/*
*
* Main
*
*/
main {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
width: 100%;
margin-left: auto;
margin-right: auto;
}
/*
*
* Content
*
*/
/*
*
* Hero
*
*/
.hero {
width: 100%;
position: relative;
background-image: url("./images/dog.jpg");
background-size: cover;
height: 300px;
}
.hero article {
box-sizing: border-box;
background-color: #000;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 0;
height: 40%;
width: 100%;
color: #fff;
padding: 1em;
}
/*
*
* Top News
*
*/
.top-news {
height: 300px;
border-bottom: 1px solid #E0E0E0;
padding: 1em;
}
.news__title {
font-weight: 300;
border-bottom: 1px solid #E0E0E0;
line-height: 24px;
font-size: 16px;
}
.top-news__item {
border-bottom: 1px solid #E0E0E0;
padding: 1em 0;
line-height: 19.2px;
}
.top-news__item:before {
content: "» ";
}
.top-news__item:last-child {
border-bottom: none;
}
.top-news__item a {
text-decoration: none;
color: #666;
}
.top-news__item a:hover,
.top-news__item a:active {
text-decoration: underline;
}
/*
*
* Sport Scores
*
*/
.scores {
padding-top: 1em;
}
.scores__table {
width: 100%;
border-collapse: collapse;
}
.scores__table th,
.scores__table td {
padding: 1em;
}
.scores__table th {
color: #fff;
font-weight: 300;
background-color: #78909C;
}
.scores__table tr:nth-child(odd) td {
background-color: #fff;
}
.scores__table tr:nth-child(even) td {
background-color: #eceff1;
}
.scores__table td.winner {
font-weight: bold;
}
.scores__table td:nth-child(3) {
text-align: right;
}
.scores__table td:nth-child(2),
.scores__table td:nth-child(5) {
text-align: center;
}
/*
*
* Weather
*
*/
.weather {
padding: 1em;
}
.weather__location {
display: block;
font-weight: 300;
font-size: 1.5em;
}
.weather__desc {
display: block;
font-size: 1.2em;
}
.weather__today {
width: 60%;
vertical-align: middle;
}
.weather__today__image {
vertical-align: middle
}
.weather__today__temp {
font-size: 3em;
}
.weather__today__deg {
font-size: 2em;
display: inline;
}
.weather__next__item {
display: inline-block;
width: 20%;
text-align: center;
}
.weather__next__item span {
display: block;
}
.weather__next__image {
width: 100%;
}
/*
*
* Recent News
*
*/
.recent-news {
clear: both;
padding: 1em;
}
.snippet {
clear: both;
margin: 24px 0;
}
.snippet__thumbnail {
width: 100px;
float: left;
margin-right: 1em;
}
.snippet__title {
font-weight: 500;
}
.snippet__title a {
text-decoration: none;
color: #666;
}
.snippet__title a:hover,
.snippet__title a:active {
text-decoration: underline;
}
/*
*
* Footer
*
*/
footer {
border-top: 1px solid #E0E0E0;
padding: 1em;
width: 100%;
}
footer li {
display: inline-block;
margin: 0 1em;
}
footer a {
text-decoration: none;
color: #333;
padding: 1.5em;
}
/*
*
* media queries
*
*/
@media screen and (min-width: 660 px) {
.container-main {
display: flex;
align-content: center;
}
.news {
width: 200px;
float: right
}
.hero {
width: 200px;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Brighton Times</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header class="header">
<div class="header__inner">
<img class="header__logo" src="images/city.png" alt="iconic view of a cityscape">
<h1 class="header__title">
The Brighton Times
</h1>
</div>
</header>
<nav id="drawer" class="nav">
<ul class="nav__list">
<li class="nav__item">
<a href="#">News</a>
</li>
<li class="nav__item">
<a href="#">Events</a>
</li>
<li class="nav__item">
<a href="#">Culture</a>
</li>
<li class="nav__item">
<a href="#">Blog</a>
</li>
</ul>
</nav>
<main>
<section class="content">
<section class="container-main">
<section class="hero">
<article class="description">
<h2>Absolutely astonishing breaking news!</h2>
<p>Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four loko.
Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four
loko.</p>
</article>
</section>
<section class="news top-news">
<h2 class="news__title">Top news
<a href="#" class="news__more">+ more</a>
</h2>
<ul>
<li class="top-news__item">
<a href="#">Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache.</a>
</li>
<li class="top-news__item">
<a href="#">Squid lomo Kickstarter art lomo Kickstarter art party cronut scenester.</a>
</li>
<li class="top-news__item">
<a href="#">Organic raw denim lomo Kickstarter art Vice keffiyeh four loko.</a>
</li>
<li class="top-news__item">
<a href="#">Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four
loko.</a>
</li>
</ul>
</section>
</section>
</section>
<section class="scores">
<table class="scores__table">
<thead>
<tr>
<th>date</th>
<th>team</th>
<th colspan="2">score</th>
<th>team</th>
</tr>
</thead>
<tbody>
<tr>
<td>Friday</td>
<td>Bears</td>
<td>95</td>
<td class="winner">109</td>
<td class="winner">Cubs</td>
</tr>
<tr>
<td>Friday</td>
<td class="winner">Otters</td>
<td class="winner">3</td>
<td>1</td>
<td>Cubs</td>
</tr>
<tr>
<td>Saturday</td>
<td class="winner">Wolves</td>
<td class="winner">7</td>
<td>0</td>
<td>Panthers</td>
</tr>
<tr>
<td>Sunday</td>
<td>Hawks</td>
<td>11</td>
<td class="winner">12</td>
<td class="winner">Capons</td>
</tr>
<tr>
<td>Sunday</td>
<td class="winner">Stags</td>
<td class="winner">6</td>
<td>2</td>
<td>Foxes</td>
</tr>
</tbody>
</table>
</section>
<section class="weather">
<span class="weather__location">Brighton, UK</span>
<span class="weather__desc">Sunny</span>
<span class="weather__today">
<img class="weather__today__image" src="images/weather.png" alt="icon of a partially sunny day">
<span class="weather__today__temp">13</span>
<span class="weather__today__deg">°C</span>
</span>
<ul class="weather__next">
<li class="weather__next__item">
<span>Mon</span>
<img class="weather__next__image" src="images/sunny.png" alt="icon of a sunny day">
<span>13 °C</span>
</li>
<li class="weather__next__item">
<span>Tues</span>
<img class="weather__next__image" src="images/cloudy.png" alt="icon of a cloudy day">
<span>13 °C</span>
</li>
<li class="weather__next__item">
<span>Wed</span>
<img class="weather__next__image" src="images/cloudy.png" alt="icon of a cloudy day">
<span>13 °C</span>
</li>
<li class="weather__next__item">
<span>Thu</span>
<img class="weather__next__image" src="images/rain.png" alt="icon of a rainy day">
<span>13 °C</span>
</li>
<li class="weather__next__item">
<span>Fri</span>
<img class="weather__next__image" src="images/sunny.png" alt="icon of a sunny day">
<span>13 °C</span>
</li>
</ul>
</section>
<section class="news recent-news">
<h2 class="news__title">Latest news
<a href="#" class="news__more">+ more</a>
</h2>
<ul>
<li class="snippet">
<img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
<h3 class="snippet__title">
<a href="#">Gastropub distillery Marfa farm-to-table</a>
</h3>
<p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. Squid lomo Kickstarter
art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter
art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four
loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh
four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester.
Organic raw denim Vice keffiyeh four loko.
</p>
</li>
<li class="snippet">
<img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
<h3 class="snippet__title">
<a href="#">Organic raw keffiyeh four loko.</a>
</h3>
<p>Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim
Vice keffiyeh four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut
scenester. Organic raw denim Vice loko.
</p>
</li>
<li class="snippet">
<img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
<h3 class="snippet__title">
<a href="#">Kickstarter art party cronut scenester.</a>
</h3>
<p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. Squid lomo Kickstarter
art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter
art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four
loko.
</p>
</li>
<li class="snippet">
<img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
<h3 class="snippet__title">
<a href="#">Squid lomo Kickstarter art party cronut </a>
</h3>
<p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. Squid lomo Kickstarter
art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter
art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four
loko.
</p>
</li>
</ul>
</section>
</section>
<footer>
<ul>
<li>
<a href="#">Contact us</a>
</li>
<li>
<a href="#">Follow us on Twitter</a>
</li>
<li>
<a href="#">RSS</a>
</li>
</ul>
</footer>
</main>
</body>
</html>解决方案
你错过了添加 flex-container。还可以根据需要调整您的高度，英雄职业的位置。希望这可以帮助！！
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
body {
font-family: Roboto;
font-size: 12px;
color: #424242;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
}
header,
nav,
footer,
section,
article,
div {
box-sizing: border-box;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
/*
*
* Common
*
*/
.news__more {
float: right;
font-size: .8em;
color: #333;
text-decoration: none;
}
/*
*
* Header
*
*/
.header {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
min-height: 56px;
transition: min-height 0.3s;
}
.header__inner {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.header__logo {
height: 72px;
margin-right: 1em;
vertical-align: top;
margin-top: 12px;
}
.header__title {
font-weight: 300;
font-size: 4em;
margin: 0.5em 0.25em;
display: inline-block;
color: #212121;
}
/*
*
* Top Level Navigation
*
*/
.nav {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.nav__list {
width: 100%;
padding: 0;
margin: 0;
}
.nav__item {
box-sizing: border-box;
display: inline-block;
width: 24%;
text-align: center;
line-height: 24px;
padding: 24px;
text-transform: uppercase;
}
.nav a {
text-decoration: none;
color: #616161;
padding: 1.5em;
}
.nav a:hover {
text-decoration: underline;
color: #212121;
}
/*
*
* Main
*
*/
main {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
width: 100%;
margin-left: auto;
margin-right: auto;
}
/*
*
* Content
*
*/
/*
*
* Hero
*
*/
.hero {
width: 100%;
position: relative;
background-image: url("./images/dog.jpg");
background-size: cover;
height: 300px;
}
.hero article {
box-sizing: border-box;
background-color: #000;
background-color: rgba(0, 0, 0, 0.7);
position: absolute;
bottom: 0;
height: 40%;
width: 100%;
color: #fff;
padding: 1em;
}
/*
*
* Top News
*
*/
.top-news {
height: 300px;
border-bottom: 1px solid #E0E0E0;
padding: 1em;
}
.news__title {
font-weight: 300;
border-bottom: 1px solid #E0E0E0;
line-height: 24px;
font-size: 16px;
}
.top-news__item {
border-bottom: 1px solid #E0E0E0;
padding: 1em 0;
line-height: 19.2px;
}
.top-news__item:before {
content: "» ";
}
.top-news__item:last-child {
border-bottom: none;
}
.top-news__item a {
text-decoration: none;
color: #666;
}
.top-news__item a:hover,
.top-news__item a:active {
text-decoration: underline;
}
/*
*
* Sport Scores
*
*/
.scores {
padding-top: 1em;
}
.scores__table {
width: 100%;
border-collapse: collapse;
}
.scores__table th,
.scores__table td {
padding: 1em;
}
.scores__table th {
color: #fff;
font-weight: 300;
background-color: #78909C;
}
.scores__table tr:nth-child(odd) td {
background-color: #fff;
}
.scores__table tr:nth-child(even) td {
background-color: #eceff1;
}
.scores__table td.winner {
font-weight: bold;
}
.scores__table td:nth-child(3) {
text-align: right;
}
.scores__table td:nth-child(2),
.scores__table td:nth-child(5) {
text-align: center;
}
/*
*
* Weather
*
*/
.weather {
padding: 1em;
}
.weather__location {
display: block;
font-weight: 300;
font-size: 1.5em;
}
.weather__desc {
display: block;
font-size: 1.2em;
}
.weather__today {
width: 60%;
vertical-align: middle;
}
.weather__today__image {
vertical-align: middle
}
.weather__today__temp {
font-size: 3em;
}
.weather__today__deg {
font-size: 2em;
display: inline;
}
.weather__next__item {
display: inline-block;
width: 20%;
text-align: center;
}
.weather__next__item span {
display: block;
}
.weather__next__image {
width: 100%;
}
/*
*
* Recent News
*
*/
.recent-news {
clear: both;
padding: 1em;
}
.snippet {
clear: both;
margin: 24px 0;
}
.snippet__thumbnail {
width: 100px;
float: left;
margin-right: 1em;
}
.snippet__title {
font-weight: 500;
}
.snippet__title a {
text-decoration: none;
color: #666;
}
.snippet__title a:hover,
.snippet__title a:active {
text-decoration: underline;
}
/*
*
* Footer
*
*/
footer {
border-top: 1px solid #E0E0E0;
padding: 1em;
width: 100%;
}
footer li {
display: inline-block;
margin: 0 1em;
}
footer a {
text-decoration: none;
color: #333;
padding: 1.5em;
}
/*
*
* media queries
*
*/
@media screen and (min-width: 660 px) {
.container-main {
display: flex;
align-content: center;
}
.news {
width: 200px;
float: right
}
.hero {
width: 200px;
}
}
.flex-container {
display: flex;
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Brighton Times</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<header class="header">
<div class="header__inner">
<img class="header__logo" src="images/city.png" alt="iconic view of a cityscape">
<h1 class="header__title">
The Brighton Times
</h1>
</div>
</header>
<nav id="drawer" class="nav">
<ul class="nav__list">
<li class="nav__item">
<a href="#">News</a>
</li>
<li class="nav__item">
<a href="#">Events</a>
</li>
<li class="nav__item">
<a href="#">Culture</a>
</li>
<li class="nav__item">
<a href="#">Blog</a>
</li>
</ul>
</nav>
<main>
<section class="content">
<section class="container-main flex-container">
<section class="hero">
<article class="description">
<h2>Absolutely astonishing breaking news!</h2>
<p>Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four loko. Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four loko.
</p>
</article>
</section>
<section class="news top-news">
<h2 class="news__title">Top news
<a href="#" class="news__more">+ more</a>
</h2>
<ul>
<li class="top-news__item">
<a href="#">Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache.</a>
</li>
<li class="top-news__item">
<a href="#">Squid lomo Kickstarter art lomo Kickstarter art party cronut scenester.</a>
</li>
<li class="top-news__item">
<a href="#">Organic raw denim lomo Kickstarter art Vice keffiyeh four loko.</a>
</li>
<li class="top-news__item">
<a href="#">Organic raw denim Vice keffiyeh lomo Kickstarter art lomo Kickstarter art four
loko.</a>
</li>
</ul>
</section>
</section>
</section>
<section class="scores">
<table class="scores__table">
<thead>
<tr>
<th>date</th>
<th>team</th>
<th colspan="2">score</th>
<th>team</th>
</tr>
</thead>
<tbody>
<tr>
<td>Friday</td>
<td>Bears</td>
<td>95</td>
<td class="winner">109</td>
<td class="winner">Cubs</td>
</tr>
<tr>
<td>Friday</td>
<td class="winner">Otters</td>
<td class="winner">3</td>
<td>1</td>
<td>Cubs</td>
</tr>
<tr>
<td>Saturday</td>
<td class="winner">Wolves</td>
<td class="winner">7</td>
<td>0</td>
<td>Panthers</td>
</tr>
<tr>
<td>Sunday</td>
<td>Hawks</td>
<td>11</td>
<td class="winner">12</td>
<td class="winner">Capons</td>
</tr>
<tr>
<td>Sunday</td>
<td class="winner">Stags</td>
<td class="winner">6</td>
<td>2</td>
<td>Foxes</td>
</tr>
</tbody>
</table>
</section>
<section class="weather">
<span class="weather__location">Brighton, UK</span>
<span class="weather__desc">Sunny</span>
<span class="weather__today">
<img class="weather__today__image" src="images/weather.png" alt="icon of a partially sunny day">
<span class="weather__today__temp">13</span>
<span class="weather__today__deg">°C</span>
</span>
<ul class="weather__next">
<li class="weather__next__item">
<span>Mon</span>
<img class="weather__next__image" src="images/sunny.png" alt="icon of a sunny day">
<span>13 °C</span>
</li>
<li class="weather__next__item">
<span>Tues</span>
<img class="weather__next__image" src="images/cloudy.png" alt="icon of a cloudy day">
<span>13 °C</span>
</li>
<li class="weather__next__item">
<span>Wed</span>
<img class="weather__next__image" src="images/cloudy.png" alt="icon of a cloudy day">
<span>13 °C</span>
</li>
<li class="weather__next__item">
<span>Thu</span>
<img class="weather__next__image" src="images/rain.png" alt="icon of a rainy day">
<span>13 °C</span>
</li>
<li class="weather__next__item">
<span>Fri</span>
<img class="weather__next__image" src="images/sunny.png" alt="icon of a sunny day">
<span>13 °C</span>
</li>
</ul>
</section>
<section class="news recent-news">
<h2 class="news__title">Latest news
<a href="#" class="news__more">+ more</a>
</h2>
<ul>
<li class="snippet">
<img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
<h3 class="snippet__title">
<a href="#">Gastropub distillery Marfa farm-to-table</a>
</h3>
<p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh
four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four
loko.
</p>
</li>
<li class="snippet">
<img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
<h3 class="snippet__title">
<a href="#">Organic raw keffiyeh four loko.</a>
</h3>
<p>Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko.Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice loko.
</p>
</li>
<li class="snippet">
<img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
<h3 class="snippet__title">
<a href="#">Kickstarter art party cronut scenester.</a>
</h3>
<p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh
four loko.Vice keffiyeh four loko.
</p>
</li>
<li class="snippet">
<img class="snippet__thumbnail" src="images/dog.jpg" alt="picture of a girl with a large, stuffed dog toy">
<h3 class="snippet__title">
<a href="#">Squid lomo Kickstarter art party cronut </a>
</h3>
<p>Gastropub distillery Marfa farm-to-table, Etsy Truffaut fingerstache. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh four loko. Squid lomo Kickstarter art party cronut scenester. Organic raw denim Vice keffiyeh
four loko.Vice keffiyeh four loko.
</p>
</li>
</ul>
</section>
</section>
<footer>
<ul>
<li>
<a href="#">Contact us</a>
</li>
<li>
<a href="#">Follow us on Twitter</a>
</li>
<li>
<a href="#">RSS</a>
</li>
</ul>
</footer>
</main>
</body>
</html>推荐阅读
- javascript - javascript fetch api，为什么 response.json() 返回 javascript 对象（而不是 JSON 字符串）？
- bash - Bash：是否可以通过评估命令为单个子进程设置环境变量？
- javascript - 如何获取用户文件上传的完整路径？
- tfs - 为什么我不能分支 TFS 项目？
- postgresql - 如何获取Postgres中的所有记录是json中的列表包含一个元素？
- c - 一个线程可以由不同的线程创建和加入吗？
- google-cloud-pubsub - 为什么 PubSub 订阅在保留期到期后向死信主题发布消息
- reactjs - 使用 useEffect 挂钩反应原生删除 scrollY 侦听器
- android - React-Native：在 @react-navigation/material-bottom-tabs 中更改徽章颜色
- javascript - 在Javascript中设置选择下拉值