<span></span>

   <nav>

       <a href="#">泸沽湖</a>

       <a href="#">丽江古城</a>

       <a href="#">茶马古道</a>

       <a href="#">就这家·云逸客栈</a>

       <a href="#">西双版纳</a>

       <a href="#">云南红酒庄</a>

       <a href="#">轿子雪山</a>

       <a href="#">普者黑</a>

       <a href="#">海埂大坝</a>

       <a href="#">玉龙湾</a>

       <a href="#">昆明郊野公园</a>

       <a href="#">欧洲风琴小镇</a>

   </nav>

* {

   margin: 0;

   padding: 0;

   border: none;

}

html,

body {

   height: 100%;

   background: #93b3c6;

}

span {

   display: block;

   width: 16px;

   height: 16px;

   margin: 30px auto 40px;

   border-radius: 50%;

   background: #fff;

}

nav {

   display: flex;

   width: 78.125vw;

   margin: 0 auto 45px;

   justify-content: space-between;

   position: relative;

}

nav::before {

   position: absolute;

   top: 20px;

   width: 100%;

   height: 10px;

   background: #fff;

   display: block;

   content: "";

}

nav>a {

   position: relative;

   font-size: 20px;

   padding: 10px;

   border: 2px solid #5395b4;

   white-space: nowrap;

   color: #255d7e;

   text-decoration: none;

   background: #fff;

}