h3之前的列表类型小数

Question

我正在尝试获取h3旁边的列表样式编号。 但是当我把li放到内联块时，十进制消失了。 我知道我可以选择浮动：左边而不是内联块，但整个设置正在改变。 This is a part of what it looks like now including pictures
你能帮我解决一下吗？ 没有图片时，设置看起来有点不同，正如您在运行代码时所看到的那样。但我希望你能找到问题很清楚。

>>

@import url('https://fonts.googleapis.com/css?family=Lato:300i,400,700,900');
html {
  box-sizing: border-box;
}

body {
  font: 15px 'Lato', sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  margin: auto;
  max-width: 1024px;
  width: 100%;
  overflow: hidden;
}

header ul {
  padding: 0;
  margin: 0;
}

nav {
  float: right;
  padding: 2% 0 5% 0;
  margin-top: 1.8%;
}

header li {
  display: inline-block;
  position: relative;
  padding: 10px 0px 0px 0px;
  margin-left: 10px;
}

header a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
  color: black;
  font-weight: 400;
}

header a:hover {
  color: #49997b;
}

header ul ul {
  position: absolute;
  left: 0;
  top: 100%;
  display: none;
  padding: 1% 0;
}

header li:hover ul {
  display: block;
  background-color: gainsboro;
}

header ul ul a {
  color: white;
}

header ul {
  padding-left: 0;
}

.selected {
  border-bottom: 2px solid #49997b;
  padding-bottom: 0.5%;
}

header {
  width: 80%;
  margin-left: 10%;
}

header img {
  width: 15%;
  height: auto;
}

h1 {
  display: none;
}

header p {
  text-align: center;
  float: left;
  position: absolute;
  color: dimgrey;
  font-style: italic;
  font-weight: 300;
  width: 120px;
  margin-top: -56px;
}

img {
  width: 100%;
  height: auto;
  margin: -1% 0 0.5% 0;
}

main {
  width: 100%;
  background-color: #e8e8e8;
  padding-top: 2%;
  margin-top: -1%;
}

.strand h2 {
  border: 0;
}

section {
  width: 80%;
  margin-left: 10%;
}

section li {
  width: 45%;
  display: inline-block;
  padding: 0 4% 2% 0;
}

section p {
  width: 48%;
  float: right;
  margin-top: -1%;
}

section h2 {
  text-align: center;
  border-top: 1px solid black;
  padding: 2% 0;
}

section ol {
  list-style-position: inside;
  -webkit-padding-start: 0;
}

section h3 {
  position: absolute;
  color: white;
  text-align: center;
  background-color: darkseagreen;
  margin-top: -0.3%;
  width: 186px;
}

section img {
  width: 50%;
  height: auto;
  border: 1px solid seagreen;
}

footer {
  width: 100%;
  background-color: dimgrey;
  margin-top: -0.8%;
  padding: 2% 0;
}

.widget1 {
  margin-left: 10%;
}

footer div,
footer aside {
  width: 25%;
  color: white;
  font-size: 11px;
  font-weight: 300;
  display: inline-block;
  margin-left: 7%;
}

footer img {
  display: inline;
  width: 15%;
  height: auto;
  padding: 0 8% 15% 0;
  -webkit-filter: brightness(50%);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

footer img:hover {
  -webkit-filter: brightness(100%);
}

@media screen and (max-width: 1024px) {
  header p {
    width: 11.8%;
    margin-top: -5.4%;
  }
  section h3 {
    width: 18.2%;
  }
}

@media screen and (max-width: 768px) {
  header a {
    font-size: 11px;
  }
  header img {
    width: 20%;
  }
  header p {
    width: 15.6%;
    margin-top: -7.7%;
  }
  section h3 {
    width: 18.2%;
  }
}

@media screen and (max-width: 630px) {
  ul {
    width: 124%;
    margin-left: -12.5%;
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  header {
    width: 100%;
    margin: 0;
  }
  header img {
    width: 35%;
    margin: 0 0 -5.5% 32.5%;
  }
  header p {
    font-size: 19px;
    margin: -9.5% 0 0 32.5%;
    width: 34.6%;
  }
  header a {
    font-size: 16px;
    color: white;
  }
  nav {
    float: left;
    width: 100%;
    margin: 3% 0 -8.6% 0;
  }
  header li {
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
    background-color: dimgrey;
    padding: 1% 0 1% 0;
  }
  ul {
    padding: 0;
  }
  header li:hover {
    background-color: darkslategrey;
  }
  header li:hover ul {
    position: relative;
    margin-bottom: -1%;
    margin-top: 1%;
  }
  .selected {
    background-color: darkseagreen;
    border: 0;
  }
  section img {
    width: 99%;
  }
  section li {
    display: block;
    width: 99%;
    padding-bottom: 45%;
  }
  section li {
    width: 78.8%;
    margin-top: -1%;
  }
  section p {
    width: 99%;
    margin-top: 1%;
  }
  footer {
    margin-top: -2.2%;
  }
  footer img {
    width: 20%;
  }
  footer p {
    font-size: 14px;
  }
  footer div,
  footer aside {
    width: 40%;
  }
}

Answer 1

问题是有序列表中有一个h3元素，所以它忽略了自身的CSS。您可以使用HTML上的•手动添加项目符号。

@import url('https://fonts.googleapis.com/css?family=Lato:300i,400,700,900');
html {
  box-sizing: border-box;
}

body {
  font: 15px 'Lato', sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  margin: auto;
  max-width: 1024px;
  width: 100%;
  overflow: hidden;
}

header ul {
  padding: 0;
  margin: 0;
}

nav {
  float: right;
  padding: 2% 0 5% 0;
  margin-top: 1.8%;
}

header li {
  display: inline-block;
  position: relative;
  padding: 10px 0px 0px 0px;
  margin-left: 10px;
}

header a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
  color: black;
  font-weight: 400;
}

header a:hover {
  color: #49997b;
}

header ul ul {
  position: absolute;
  left: 0;
  top: 100%;
  display: none;
  padding: 1% 0;
}

header li:hover ul {
  display: block;
  background-color: gainsboro;
}

header ul ul a {
  color: white;
}

header ul {
  padding-left: 0;
}

.selected {
  border-bottom: 2px solid #49997b;
  padding-bottom: 0.5%;
}

header {
  width: 80%;
  margin-left: 10%;
}

header img {
  width: 15%;
  height: auto;
}

h1 {
  display: none;
}

header p {
  text-align: center;
  float: left;
  position: absolute;
  color: dimgrey;
  font-style: italic;
  font-weight: 300;
  width: 120px;
  margin-top: -56px;
}

img {
  width: 100%;
  height: auto;
  margin: -1% 0 0.5% 0;
}

main {
  width: 100%;
  background-color: #e8e8e8;
  padding-top: 2%;
  margin-top: -1%;
}

.strand h2 {
  border: 0;
}

section {
  width: 80%;
  margin-left: 10%;
}

section li {
  width: 45%;
  display: inline-block;
  padding: 0 4% 2% 0;
}

section p {
  width: 48%;
  float: right;
  margin-top: -1%;
}

section h2 {
  text-align: center;
  border-top: 1px solid black;
  padding: 2% 0;
}

section ol {
  list-style-position: inside;
  -webkit-padding-start: 0;
}

section h3 {
  position: absolute;
  color: white;
  text-align: center;
  background-color: darkseagreen;
  margin-top: -0.3%;
  width: 186px;
}

section img {
  width: 50%;
  height: auto;
  border: 1px solid seagreen;
}

footer {
  width: 100%;
  background-color: dimgrey;
  margin-top: -0.8%;
  padding: 2% 0;
}

.widget1 {
  margin-left: 10%;
}

footer div,
footer aside {
  width: 25%;
  color: white;
  font-size: 11px;
  font-weight: 300;
  display: inline-block;
  margin-left: 7%;
}

footer img {
  display: inline;
  width: 15%;
  height: auto;
  padding: 0 8% 15% 0;
  -webkit-filter: brightness(50%);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

footer img:hover {
  -webkit-filter: brightness(100%);
}

@media screen and (max-width: 1024px) {
  header p {
    width: 11.8%;
    margin-top: -5.4%;
  }
  section h3 {
    width: 18.2%;
  }
}

@media screen and (max-width: 768px) {
  header a {
    font-size: 11px;
  }
  header img {
    width: 20%;
  }
  header p {
    width: 15.6%;
    margin-top: -7.7%;
  }
  section h3 {
    width: 18.2%;
  }
}

@media screen and (max-width: 630px) {
  ul {
    width: 124%;
    margin-left: -12.5%;
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  header {
    width: 100%;
    margin: 0;
  }
  header img {
    width: 35%;
    margin: 0 0 -5.5% 32.5%;
  }
  header p {
    font-size: 19px;
    margin: -9.5% 0 0 32.5%;
    width: 34.6%;
  }
  header a {
    font-size: 16px;
    color: white;
  }
  nav {
    float: left;
    width: 100%;
    margin: 3% 0 -8.6% 0;
  }
  header li {
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
    background-color: dimgrey;
    padding: 1% 0 1% 0;
  }
  ul {
    padding: 0;
  }
  header li:hover {
    background-color: darkslategrey;
  }
  header li:hover ul {
    position: relative;
    margin-bottom: -1%;
    margin-top: 1%;
  }
  .selected {
    background-color: darkseagreen;
    border: 0;
  }
  section img {
    width: 99%;
  }
  section li {
    display: block;
    width: 99%;
    padding-bottom: 45%;
  }
  section li {
    width: 78.8%;
    margin-top: -1%;
  }
  section p {
    width: 99%;
    margin-top: 1%;
  }
  footer {
    margin-top: -2.2%;
  }
  footer img {
    width: 20%;
  }
  footer p {
    font-size: 14px;
  }
  footer div,
  footer aside {
    width: 40%;
  }
}

<!DOCTYPE html>
<html lang="nl">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vakantie op de Dominicaanse Republiek</title>
  <link rel="stylesheet" href="CSS/recreatie.css" type="text/css">
  <link rel="stylesheet" href="CSS/normalize.css" type="text/css">
</head>

<body>
  <div class="container">
    <header>
      <h1>Recreatie</h1>
      <a href="home.html"><img src="Afbeeldingen/logo.jpg" alt="logo"></a>
      <p>Dominicaanse <br>Republiek</p>
      <nav>
        <ul>
          <li><a href="home.html">Home</a></li>
          <li><a href="Bezienswaardigheden.html">Bezienswaardigheden</a></li>
          <li><a href="Over_de_Dominicaanse.html">Over de Dominicaanse</a>
            <ul>
              <li><a href="Over_de_Dominicaanse2.html#paspoort">Reisdocumenten</a></li>
              <li><a href="Over_de_dominicaanse2.html#inentingen">Inentingen</a></li>
              <li><a href="Over_de_dominicaanse2.html#feestdagen">Feestdagen</a></li>
              <li><a href="Over_de_dominicaanse2.html#geld">Geld en koers</a></li>
            </ul>
          </li>
          <li class="selected"><a href="Recreatie.html">Recreatie</a></li>
          <li><a href="Contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <img src="Afbeeldingen/recreatie_header.jpg" alt="Recreatie">
    <main>
      <section class="strand">
        <h2>De mooiste stranden</h2>
        <ol>
          <li>
            <h3> &#8226; Bavaro Beach</h3>
            <img src="Afbeeldingen/Recreatie_bavaro.jpg" alt="Bavaro">
            <p>Bavaro Beach is gelegen in het toeristische deel van de Dominicaanse Republiek: Punta Cana.</p>
          </li>
          <li>
            <h3> &#8226; Macao Beach</h3>
            <img src="Afbeeldingen/recreatie_macao.jpg" alt="Macao">
            <p>Macao Beach is ook gelegen in het toeristische deel Punta Cana. Dit strand staat bekend als goede surfplek.</p>
          </li>
          <li>
            <h3> &#8226; Bayahibe Beach</h3>
            <img src="Afbeeldingen/recreatie_bayahibe.jpg" alt="Bayahibe_beach">
            <p>Bayahibe Beach is gelegen in het toeristische deel van de Dominicaanse Republiek: Punta Cana. Hier zal je wilde flamingo's spotten.</p>
          </li>
          <li>
            <h3> &#8226; Saona</h3>
            <img src="Afbeeldingen/recreatie_saona.jpg" alt="Saona_eiland">
            <p>Isla Saona is een eiland in de Dominicaanse Republiek. Het ligt op korte afstand voor de zuidoostelijke kust van Hispaniola.</p>
          </li>
        </ol>
      </section>
      <section>
        <h2>Shoppen op de Dominicaanse</h2>
        <ol>
          <li>
            <h3> &#8226; Agora Mall</h3>
            <img src="Afbeeldingen/recreatie_agora.jpg" alt="Agora_mall">
            <p>Dit is een grote mall in Santo Domingo. Op de bovenste verdieping vind je een groot food court.</p>
          </li>
          <li>
            <h3> &#8226; Palma Village</h3>
            <img src="Afbeeldingen/recreatie_palma.jpg" alt="Palma_village">
            <p>Deze luze shoppingmall in Punta Cana biedt van alles. De wat duurdere/luxere producten zijn hier te koop.</p>
          </li>
          <li>
            <h3> &#8226; Blue mall</h3>
            <img src="Afbeeldingen/recreatie_blue.jpeg" alt="blue_mall">
            <p>Veel europese winkels kun je hier bezoeken. De prijzen liggen hier lager dan bij de meeste shoppingmalls.</p>
          </li>
          <li>
            <h3> &#8226; San Juan Shopping</h3>
            <img src="Afbeeldingen/recreatie_sanjuan.jpg" alt="San_juan_shopping">
            <p>Macao Beach is ook gelegen in het toeristische deel Punta Cana. Dit strand staat bekend als goede surfplek.</p>
          </li>
        </ol>
      </section>
    </main>
    <footer>
      <div class="widget1">
        <h2>Dominicaanse Republiek</h2>
        <p>Op deze website vind je alle bezienswaardigheden, tips en reisinformatie voor een goedverzorgde reis naar deze mooie bestemming: de Dominicaanse Republiek.<br><br>&copy;2017 Dominicaanse republiek
        </p>
      </div>
      <aside>
        <a href="http://www.facebook.nl"><img src="Afbeeldingen/Facebook.png" alt="Facebook_icoon"></a>
        <a href="http://www.instagram.com"><img src="Afbeeldingen/Insta.png" alt="Instagram_icoon"></a>
        <a href="http://www.twitter.com"><img src="Afbeeldingen/twitter.png" alt="Twitter_icoon"></a>
      </aside>
    </footer>
  </div>
</body>

</html>

Answer 2

如果您尝试将与str.remove(at: pos) str.remove(at: pos) 旁边的每个li相关联的数字放在那里，那么我将使用jQuery，如下所示。我想这就是你想要的。如果没有，请告诉我更多细节，我会看到我能做些什么。

＆＃13;

＆＃13;

<h3>

＆＃13;

$('ol > li').each(function() {
  $(this).prepend("<span>" + ($(this).index() + 1) + "</span>");
});

＆＃13;

section li {
  width: 45%;
  display: inline-block;
  padding: 0 4% 2% 0;
}

section ol {
  list-style: none;
}

section h3 {
  position: absolute;
  color: white;
  text-align: center;
  background-color: darkseagreen;
  margin-top: -0.3%;
  width: 186px;
}

li span {
  position: absolute;
  color: white;
  z-index: 99;
  padding-left: 10px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

通过在列表项（display）上声明li属性，默认属性display: list-item被取消，删除了编号项。

保留编号的列表项外观：

@import url('https://fonts.googleapis.com/css?family=Lato:300i,400,700,900');
* {
  box-sizing: border-box;
}

body {
  font: 15px 'Lato', sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  margin: auto;
  max-width: 1024px;
  width: 100%;
  overflow: hidden;
}

header ul {
  padding: 0;
  margin: 0;
}

nav {
  float: right;
  padding: 2% 0 5% 0;
  margin-top: 1.8%;
}

header li {
  position: relative;
  padding: 10px 0px 0px 0px;
  display: inline-block;
}

header a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
  color: black;
  font-weight: 400;
}

header a:hover {
  color: #49997b;
}

header ul ul {
  position: absolute;
  left: 0;
  top: 100%;
  display: none;
  padding: 1% 0;
}

header li:hover ul {
  display: block;
  background-color: gainsboro;
}

header ul ul a {
  color: white;
}

header ul {
  padding-left: 0;
}

.selected {
  border-bottom: 2px solid #49997b;
  padding-bottom: 0.5%;
}

header {
  width: 80%;
  margin-left: 10%;
}

header img {
  width: 15%;
  height: auto;
}

h1 {
  display: none;
}

header p {
  text-align: center;
  float: left;
  position: absolute;
  color: dimgrey;
  font-style: italic;
  font-weight: 300;
  width: 120px;
  margin-top: -56px;
}

img {
  width: 100%;
  height: auto;
  margin: -1% 0 0.5% 0;
}

main {
  width: 100%;
  background-color: #e8e8e8;
  padding-top: 2%;
  margin-top: -1%;
}

.strand h2 {
  border: 0;
}

section {
  width: 80%;
  margin-left: 10%;
}

section li {
  width: 45%;
  padding: 0 4% 2% 0;
  float: left; /* additional */
}

/* || Start Additional */

section li:nth-child(odd) { /* additional - clear float of every even list item to negate step-up effect */
    clear: both;
}

section ol:after { /* additional - clear floated list items */
    content: "";
    clear: both;
    display: block;
}

/* || End Additional */

section p {
  width: 48%;
  float: right;
  margin-top: -1%;
}

section h2 {
  text-align: center;
  border-top: 1px solid black;
  padding: 2% 0;
}

section ol {
  list-style-position: inside;
  -webkit-padding-start: 0;
}

section h3 {
  position: absolute;
  color: white;
  text-align: center;
  background-color: darkseagreen;
  margin-top: -0.3%;
  width: 186px;
}

section img {
  width: 50%;
  height: auto;
  border: 1px solid seagreen;
}

footer {
  width: 100%;
  background-color: dimgrey;
  margin-top: -0.8%;
  padding: 2% 0;
}

.widget1 {
  margin-left: 10%;
}

footer div,
footer aside {
  width: 25%;
  color: white;
  font-size: 11px;
  font-weight: 300;
  display: inline-block;
  margin-left: 7%;
}

footer img {
  display: inline;
  width: 15%;
  height: auto;
  padding: 0 8% 15% 0;
  -webkit-filter: brightness(50%);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

footer img:hover {
  -webkit-filter: brightness(100%);
}

@media screen and (max-width: 1024px) {
  header p {
    width: 11.8%;
    margin-top: -5.4%;
  }
  section h3 {
    width: 18.2%;
  }
}

@media screen and (max-width: 768px) {
  header a {
    font-size: 11px;
  }
  header img {
    width: 20%;
  }
  header p {
    width: 15.6%;
    margin-top: -7.7%;
  }
  section h3 {
    width: 18.2%;
  }
}

@media screen and (max-width: 630px) {
  ul {
    width: 124%;
    margin-left: -12.5%;
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  header {
    width: 100%;
    margin: 0;
  }
  header img {
    width: 35%;
    margin: 0 0 -5.5% 32.5%;
  }
  header p {
    font-size: 19px;
    margin: -9.5% 0 0 32.5%;
    width: 34.6%;
  }
  header a {
    font-size: 16px;
    color: white;
  }
  nav {
    float: left;
    width: 100%;
    margin: 3% 0 -8.6% 0;
  }
  header li {
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
    background-color: dimgrey;
    padding: 1% 0 1% 0;
  }
  ul {
    padding: 0;
  }
  header li:hover {
    background-color: darkslategrey;
  }
  header li:hover ul {
    position: relative;
    margin-bottom: -1%;
    margin-top: 1%;
  }
  .selected {
    background-color: darkseagreen;
    border: 0;
  }
  section img {
    width: 99%;
  }
  section li {
    display: block;
    width: 99%;
    padding-bottom: 45%;
  }
  section li {
    width: 78.8%;
    margin-top: -1%;
  }
  section p {
    width: 99%;
    margin-top: 1%;
  }
  footer {
    margin-top: -2.2%;
  }
  footer img {
    width: 20%;
  }
  footer p {
    font-size: 14px;
  }
  footer div,
  footer aside {
    width: 40%;
  }
}

<div class="container">
    <header>
      <h1>Recreatie</h1>
      <a href="home.html"><img src="Afbeeldingen/logo.jpg" alt="logo"></a>
      <p>Dominicaanse <br>Republiek</p>
      <nav>
        <ul>
          <li><a href="home.html">Home</a></li>
          <li><a href="Bezienswaardigheden.html">Bezienswaardigheden</a></li>
          <li><a href="Over_de_Dominicaanse.html">Over de Dominicaanse</a>
            <ul>
              <li><a href="Over_de_Dominicaanse2.html#paspoort">Reisdocumenten</a></li>
              <li><a href="Over_de_dominicaanse2.html#inentingen">Inentingen</a></li>
              <li><a href="Over_de_dominicaanse2.html#feestdagen">Feestdagen</a></li>
              <li><a href="Over_de_dominicaanse2.html#geld">Geld en koers</a></li>
            </ul>
          </li>
          <li class="selected"><a href="Recreatie.html">Recreatie</a></li>
          <li><a href="Contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <img src="Afbeeldingen/recreatie_header.jpg" alt="Recreatie">
    <main>
      <section class="strand">
        <h2>De mooiste stranden</h2>
        <ol>
          <li>
            <h3> Bavaro Beach</h3>
            <img src="https://placehold.it/100x100" alt="Bavaro">
            <p>Bavaro Beach is gelegen in het toeristische deel van de Dominicaanse Republiek: Punta Cana.</p>
          </li>
          <li>
            <h3> Macao Beach</h3>
            <img src="https://placehold.it/100x100" alt="Macao">
            <p>Macao Beach is ook gelegen in het toeristische deel Punta Cana. Dit strand staat bekend als goede surfplek.</p>
          </li>
          <li>
            <h3> Bayahibe Beach</h3>
            <img src="https://placehold.it/100x100" alt="Bayahibe_beach">
            <p>Bayahibe Beach is gelegen in het toeristische deel van de Dominicaanse Republiek: Punta Cana. Hier zal je wilde flamingo's spotten.</p>
          </li>
          <li>
            <h3> Saona</h3>
            <img src="https://placehold.it/100x100" alt="Saona_eiland">
            <p>Isla Saona is een eiland in de Dominicaanse Republiek. Het ligt op korte afstand voor de zuidoostelijke kust van Hispaniola.</p>
          </li>
        </ol>
      </section>
      <section>
        <h2>Shoppen op de Dominicaanse</h2>
        <ol>
          <li>
            <h3> Agora Mall</h3>
            <img src="https://placehold.it/100x100" alt="Agora_mall">
            <p>Dit is een grote mall in Santo Domingo. Op de bovenste verdieping vind je een groot food court.</p>
          </li>
          <li>
            <h3> Palma Village</h3>
            <img src="https://placehold.it/100x100" alt="Palma_village">
            <p>Deze luze shoppingmall in Punta Cana biedt van alles. De wat duurdere/luxere producten zijn hier te koop.</p>
          </li>
          <li>
            <h3> Blue mall</h3>
            <img src="https://placehold.it/100x100" alt="blue_mall">
            <p>Veel europese winkels kun je hier bezoeken. De prijzen liggen hier lager dan bij de meeste shoppingmalls.</p>
          </li>
          <li>
            <h3> San Juan Shopping</h3>
            <img src="https://placehold.it/100x100" alt="San_juan_shopping">
            <p>Macao Beach is ook gelegen in het toeristische deel Punta Cana. Dit strand staat bekend als goede surfplek.</p>
          </li>
        </ol>
      </section>
    </main>
    <footer>
      <div class="widget1">
        <h2>Dominicaanse Republiek</h2>
        <p>Op deze website vind je alle bezienswaardigheden, tips en reisinformatie voor een goedverzorgde reis naar deze mooie bestemming: de Dominicaanse Republiek.<br><br>&copy;2017 Dominicaanse republiek
        </p>
      </div>
      <aside>
        <a href="http://www.facebook.nl"><img src="Afbeeldingen/Facebook.png" alt="Facebook_icoon"></a>
        <a href="http://www.instagram.com"><img src="Afbeeldingen/Insta.png" alt="Instagram_icoon"></a>
        <a href="http://www.twitter.com"><img src="Afbeeldingen/twitter.png" alt="Twitter_icoon"></a>
      </aside>
    </footer>
  </div>

使用CSS计数器

使用CSS counters将数字应用于h3元素，可以获得更好的结果。

示例：的

body ol {
  counter-reset: section; /* Set a counter named 'section', and it`s initial value is 0. */
}

section li h3::before {
  counter-increment: section; /* Increment the value of section counter by 1 */
  content: counter(section); /* Display the value of section counter */
}

见

1. CSS counters - CSS | MDN
2. counter-increment | CSS-Tricks

/* || Start Additional */

body ol {
  counter-reset: section; /* Set a counter named 'section', and it`s initial value is 0. */
}

section li h3::before {
  counter-increment: section; /* Increment the value of section counter by 1 */
  content: counter(section); /* Display the value of section counter */
}

/* || End Additional */

@import url('https://fonts.googleapis.com/css?family=Lato:300i,400,700,900');
html {
  box-sizing: border-box;
}

body {
  font: 15px 'Lato', sans-serif;
  margin: 0;
  padding: 0;
}

.container {
  margin: auto;
  max-width: 1024px;
  width: 100%;
  overflow: hidden;
}

header ul {
  padding: 0;
  margin: 0;
}

nav {
  float: right;
  padding: 2% 0 5% 0;
  margin-top: 1.8%;
}

header li {
  display: inline-block;
  position: relative;
  padding: 10px 0px 0px 0px;
  margin-left: 10px;
}

header a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 12px;
  color: black;
  font-weight: 400;
}

header a:hover {
  color: #49997b;
}

header ul ul {
  position: absolute;
  left: 0;
  top: 100%;
  display: none;
  padding: 1% 0;
}

header li:hover ul {
  display: block;
  background-color: gainsboro;
}

header ul ul a {
  color: white;
}

header ul {
  padding-left: 0;
}

.selected {
  border-bottom: 2px solid #49997b;
  padding-bottom: 0.5%;
}

header {
  width: 80%;
  margin-left: 10%;
}

header img {
  width: 15%;
  height: auto;
}

h1 {
  display: none;
}

header p {
  text-align: center;
  float: left;
  position: absolute;
  color: dimgrey;
  font-style: italic;
  font-weight: 300;
  width: 120px;
  margin-top: -56px;
}

img {
  width: 100%;
  height: auto;
  margin: -1% 0 0.5% 0;
}

main {
  width: 100%;
  background-color: #e8e8e8;
  padding-top: 2%;
  margin-top: -1%;
}

.strand h2 {
  border: 0;
}

section {
  width: 80%;
  margin-left: 10%;
}

section li {
  width: 45%;
  display: inline-block;
  padding: 0 4% 2% 0;
}

section p {
  width: 48%;
  float: right;
  margin-top: -1%;
}

section h2 {
  text-align: center;
  border-top: 1px solid black;
  padding: 2% 0;
}

section ol {
  list-style-position: inside;
  -webkit-padding-start: 0;
}

section h3 {
  position: absolute;
  color: white;
  text-align: center;
  background-color: darkseagreen;
  margin-top: -0.3%;
  width: 186px;
}

section img {
  width: 50%;
  height: auto;
  border: 1px solid seagreen;
}

footer {
  width: 100%;
  background-color: dimgrey;
  margin-top: -0.8%;
  padding: 2% 0;
}

.widget1 {
  margin-left: 10%;
}

footer div,
footer aside {
  width: 25%;
  color: white;
  font-size: 11px;
  font-weight: 300;
  display: inline-block;
  margin-left: 7%;
}

footer img {
  display: inline;
  width: 15%;
  height: auto;
  padding: 0 8% 15% 0;
  -webkit-filter: brightness(50%);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

footer img:hover {
  -webkit-filter: brightness(100%);
}

@media screen and (max-width: 1024px) {
  header p {
    width: 11.8%;
    margin-top: -5.4%;
  }
  section h3 {
    width: 18.2%;
  }
}

@media screen and (max-width: 768px) {
  header a {
    font-size: 11px;
  }
  header img {
    width: 20%;
  }
  header p {
    width: 15.6%;
    margin-top: -7.7%;
  }
  section h3 {
    width: 18.2%;
  }
}

@media screen and (max-width: 630px) {
  ul {
    width: 124%;
    margin-left: -12.5%;
    text-align: center;
  }
}

@media screen and (max-width: 480px) {
  header {
    width: 100%;
    margin: 0;
  }
  header img {
    width: 35%;
    margin: 0 0 -5.5% 32.5%;
  }
  header p {
    font-size: 19px;
    margin: -9.5% 0 0 32.5%;
    width: 34.6%;
  }
  header a {
    font-size: 16px;
    color: white;
  }
  nav {
    float: left;
    width: 100%;
    margin: 3% 0 -8.6% 0;
  }
  header li {
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
    background-color: dimgrey;
    padding: 1% 0 1% 0;
  }
  ul {
    padding: 0;
  }
  header li:hover {
    background-color: darkslategrey;
  }
  header li:hover ul {
    position: relative;
    margin-bottom: -1%;
    margin-top: 1%;
  }
  .selected {
    background-color: darkseagreen;
    border: 0;
  }
  section img {
    width: 99%;
  }
  section li {
    display: block;
    width: 99%;
    padding-bottom: 45%;
  }
  section li {
    width: 78.8%;
    margin-top: -1%;
  }
  section p {
    width: 99%;
    margin-top: 1%;
  }
  footer {
    margin-top: -2.2%;
  }
  footer img {
    width: 20%;
  }
  footer p {
    font-size: 14px;
  }
  footer div,
  footer aside {
    width: 40%;
  }
}

<div class="container">
  <header>
    <h1>Recreatie</h1>
    <a href="home.html"><img src="Afbeeldingen/logo.jpg" alt="logo"></a>
    <p>Dominicaanse <br>Republiek</p>
    <nav>
      <ul>
        <li><a href="home.html">Home</a></li>
        <li><a href="Bezienswaardigheden.html">Bezienswaardigheden</a></li>
        <li><a href="Over_de_Dominicaanse.html">Over de Dominicaanse</a>
          <ul>
            <li><a href="Over_de_Dominicaanse2.html#paspoort">Reisdocumenten</a></li>
            <li><a href="Over_de_dominicaanse2.html#inentingen">Inentingen</a></li>
            <li><a href="Over_de_dominicaanse2.html#feestdagen">Feestdagen</a></li>
            <li><a href="Over_de_dominicaanse2.html#geld">Geld en koers</a></li>
          </ul>
        </li>
        <li class="selected"><a href="Recreatie.html">Recreatie</a></li>
        <li><a href="Contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <img src="Afbeeldingen/recreatie_header.jpg" alt="Recreatie">
  <main>
    <section class="strand">
      <h2>De mooiste stranden</h2>
      <ol>
        <li>
          <h3> Bavaro Beach</h3>
          <img src="Afbeeldingen/Recreatie_bavaro.jpg" alt="Bavaro">
          <p>Bavaro Beach is gelegen in het toeristische deel van de Dominicaanse Republiek: Punta Cana.</p>
        </li>
        <li>
          <h3> Macao Beach</h3>
          <img src="Afbeeldingen/recreatie_macao.jpg" alt="Macao">
          <p>Macao Beach is ook gelegen in het toeristische deel Punta Cana. Dit strand staat bekend als goede surfplek.</p>
        </li>
        <li>
          <h3> Bayahibe Beach</h3>
          <img src="Afbeeldingen/recreatie_bayahibe.jpg" alt="Bayahibe_beach">
          <p>Bayahibe Beach is gelegen in het toeristische deel van de Dominicaanse Republiek: Punta Cana. Hier zal je wilde flamingo's spotten.</p>
        </li>
        <li>
          <h3> Saona</h3>
          <img src="Afbeeldingen/recreatie_saona.jpg" alt="Saona_eiland">
          <p>Isla Saona is een eiland in de Dominicaanse Republiek. Het ligt op korte afstand voor de zuidoostelijke kust van Hispaniola.</p>
        </li>
      </ol>
    </section>
    <section>
      <h2>Shoppen op de Dominicaanse</h2>
      <ol>
        <li>
          <h3> Agora Mall</h3>
          <img src="Afbeeldingen/recreatie_agora.jpg" alt="Agora_mall">
          <p>Dit is een grote mall in Santo Domingo. Op de bovenste verdieping vind je een groot food court.</p>
        </li>
        <li>
          <h3> Palma Village</h3>
          <img src="Afbeeldingen/recreatie_palma.jpg" alt="Palma_village">
          <p>Deze luze shoppingmall in Punta Cana biedt van alles. De wat duurdere/luxere producten zijn hier te koop.</p>
        </li>
        <li>
          <h3> Blue mall</h3>
          <img src="Afbeeldingen/recreatie_blue.jpeg" alt="blue_mall">
          <p>Veel europese winkels kun je hier bezoeken. De prijzen liggen hier lager dan bij de meeste shoppingmalls.</p>
        </li>
        <li>
          <h3> San Juan Shopping</h3>
          <img src="Afbeeldingen/recreatie_sanjuan.jpg" alt="San_juan_shopping">
          <p>Macao Beach is ook gelegen in het toeristische deel Punta Cana. Dit strand staat bekend als goede surfplek.</p>
        </li>
      </ol>
    </section>
  </main>
  <footer>
    <div class="widget1">
      <h2>Dominicaanse Republiek</h2>
      <p>Op deze website vind je alle bezienswaardigheden, tips en reisinformatie voor een goedverzorgde reis naar deze mooie bestemming: de Dominicaanse Republiek.<br><br>&copy;2017 Dominicaanse republiek
      </p>
    </div>
    <aside>
      <a href="http://www.facebook.nl"><img src="Afbeeldingen/Facebook.png" alt="Facebook_icoon"></a>
      <a href="http://www.instagram.com"><img src="Afbeeldingen/Insta.png" alt="Instagram_icoon"></a>
      <a href="http://www.twitter.com"><img src="Afbeeldingen/twitter.png" alt="Twitter_icoon"></a>
    </aside>
  </footer>
</div>