遇到的问题如下

代码:
<template>
<!--游记区域-->
<div class="dahezi">
<div class="anquantishi w"><a href=""><img src="C:\Users\XHM -YQ\Desktop\前端\旅游网站\图片\index-link-v2.png" alt=""></a></div>
<div class="remenyouji">热门游记 <input type="text" class="xieyouji" value="写游记"></div>
<div class="right">
<div class="hanzhong">
<div class="hanzhongimg"><img src="../../images/图片/川西高原.jpg" alt="川西高原"></div>
<span>川西高原,三千公里寻找另一种秋色。</span>
<p>川西高原,三千公里寻找另一种秋色。川西 高原的秋,显现于川西任何一处角落之中,可以是四姑娘山中的海子森林,或是鱼子西上远望贡嘎的云和摇摆的秋千,当然也少不了亚丁的雪,墨石公……</p>
</div>
<div class="cq">
<div class="cqimg"><img src="../../images/图片/重庆.jpg" alt=""></div>
<span>重庆|从陌生到熟知 奇幻的72小时里发生了……</span>
<p>序、一波三折 没错!这又是一次与陌生人的随心组团飞,但我们都有一位共同目标人“卡卡”,可以说她就是此次旅行的组局者。我们原定前往河南自驾的旅行,真的是商讨了好久有关行程事宜,在万事……</p>
</div>
<div class="dali">
<div class="daliimg"><img src="../../images/图片/大理.jpg" alt=""></div>
<span>【大理】-天下风花雪月/人间魅力大理</span>
<p>旅行前的碎碎念对于大理一直是极度憧憬的,风花雪月是大理美景的概况,下关风,上关月,苍山雪,洱海月,大理之景一如其名,自是美不胜收。特别是在看了大饼的一系列作品之后,对于大……</p>
</div>
</div>
<div class="left">
<div class="lvxingzhezhuanlan">
<span>旅行家专栏</span>
<h6>专栏首页</h6>
<div class="lxzzlimg"><img src="../../images/图片/夏木尼.jpg" alt=""></div>
<div class="xiamuni">夏木尼,小王子的玫瑰城市</div>
<div class="xiamunizhushi">夏木尼(Chamounix)是法国勃朗峰脚下最著名的小城,《小王子》里的玫瑰城市,世界登山运动的发源地。</div>
</div>
<div class="lvyougonluetuijian">
<span>旅游攻略推荐</span>
<h6>更多</h6>
<div class="lytjimg"><img src="../../images/图片/自由行攻略.jpg" alt=""></div>
<div class="qdbyd">初到青岛必游地</div>
</div>
</div>
</div>
<!--游记区域结束-->
</template>
<style>
.dahezi { width: 1100px;
margin-left: 200px;
margin-top: 50px;}
.anquantishi img{ width: 300px;
float: left;}
.remenyouji { color: #ff9d00;
font-size: 20px;
padding-top: 10px;
margin-left: 400px;
}
.xieyouji { float: right;
width: 150px;
height: 40px;
line-height: 40px;
background-color: #ff9d00;
border-radius: 5px;
border: 0;
text-align: center;
font-size: 20px;
color: #fff;
margin-left: 0px;}
.right {
border-top: 1px solid #4e4e4e;
margin-left: 400px;
margin-top: 20px;
width: 700px;
}
input {
outline: 0;
}
.hanzhong { position: relative;}
.hanzhongimg img{ width: 220px;
height: 160px;
margin-top: 45px;
position: absolute;}
.hanzhong span { position: absolute;
margin-left:250px;
margin-top: 45px;
font:20px 楷书 ;}
.hanzhong p { position: absolute;
margin-left: 250px;
margin-top: 85px;
color: #808080;
font-size: 15px;}
.hanzhong span:hover{ color: #ff9d00;}
.cq { position: relative;}
.cqimg img { position: absolute;
width: 220px;
height: 160px;
margin-top: 225px;}
.cq span { position: absolute;
margin-left:250px;
margin-top: 225px;
font:20px 楷书 ;}
.cq p { position: absolute;
margin-left: 250px;
margin-top: 265px;
color: #808080;
font-size: 15px;}
.dali { position: relative;}
.daliimg img { position: absolute;
width: 220px;
height: 160px;
margin-top: 405px;}
.dali span { position: absolute;
margin-left:250px;
margin-top: 405px;
font:20px 楷书 ;}
.dali p { position: absolute;
margin-left: 250px;
margin-top: 445px;
color: #808080;
font-size: 15px;}
.left { width: 300px;}
.lvxingzhezhuanlan { position: relative;
margin-top: 35px;}
.lvxingzhezhuanlan span { font-size: 20px;
float: left;}
.lvxingzhezhuanlan h6 { float: left;
margin-left: 100px;
margin-top: 5px;
color:#808080;}
.lxzzlimg { position: absolute;}
.lxzzlimg img {
width: 300px;
height: 140px;
margin-top: 50px;
margin-left: 0px;}
.xiamuni { margin-top: 200px;
position: absolute;
}
.xiamunizhushi { position: absolute;
margin-top: 230px;
color:#808080;
font-size: 14px;}
.lvyougonluetuijian { position: relative;
padding-top: 330px;}
.lvyougonluetuijian span { font-size: 20px;
float: left;}
.lvyougonluetuijian h6 { float: left;
margin-left: 100px;
margin-top: 5px;
color:#808080;
}
.lytjimg { position: absolute;}
.lytjimg img { width: 300px;
height: 140px;
margin-top: 50px;
margin-left: 0px;
}
.qdbyd { margin-top: 200px;
position: absolute;
}
</style>