HTML加css完整详细代码,需要的小伙伴可直接拿走哟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0%;
padding: 0%;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.box{
width: 660px;
height: 600px;
background-size: 100%;
margin: 100px auto;
padding: 10px;
position: relative;
}
.box::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("./背景.jpg") no-repeat;
background-size: 100%;
filter: blur(6px);
opacity: 0.8;
z-index: -1;
}
.box h1{
text-align: center;
margin-top: 20px;
margin-bottom: 15px;
background: linear-gradient(15deg, rgb(255, 0, 0), rgb(255, 251, 2), green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content{
width: 500px;
margin: 0 auto;
}
.seachBox{
height: 30px;
display: flex;
flex-direction: row;
}
.seachBox .ipt{
height: 100%;
border: 1px solid rgb(72, 160, 247);
padding-left: 5px;
outline: none;
flex: 4;
}
.seachBox .btn{
flex: 1;
padding: 0%;
height: 100%;
border: none;
color: white;
border: 5px solid rgb(152, 205, 249);
background-color: rgb(152, 205, 249);
cursor: pointer;
}
.hotkey{
margin-top: 10px;
}
.hotkey a{
padding-right: 10px;
background: linear-gradient(to right, rgb(241, 2, 2), rgb(29, 5, 237));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
cursor: pointer;
}
.whatherList{
display: flex;
flex-direction: row;
margin: 60px auto;
width: 630px;
height: 100px;
padding: 5px;
}
.whatherList li{
flex: 1;
text-align: center;
padding: 3px;
display: flex;
flex-direction: column;
justify-content: space-between;
border-right: solid 1px #d7d7d7;
color:rgb(5, 5, 106);
}
.whatherList li h3{
text-align: center;
font-size: 20px;
color: rgb(251, 218, 3);
}
.whatherList li span{
font-size: 10px;
}
.whatherList li p{
font-size: 13px;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<h1>天知道</h1>
<div class="content">
<div class="seachBox">
<input type="text" class="ipt" @keyup.enter="seachWeather" v-model="city">
<button class="btn" @click="seachWeather">搜索</button>
</div>
<div class="hotkey">
<a href="javascript:" @click=changeCity("北京")>北京</a>
<a href="javascript:" @click=changeCity("上海")>上海</a>
<a href="javascript:" @click=changeCity("广州")>广州</a>
<a href="javascript:" @click=changeCity("深圳")>深圳</a>
</div>
</div>
<ul class="whatherList">
<li v-for="item in weatherArr">
<h3>{{item.wea_day}}</h3>
<p>{{item.air_level}}</p>
<span>{{item.tem}}-{{item.tem1}}-{{item.tem2}}</span>
<p>{{item.day}}</p>
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./weatherf.js"></script>
</body>
</html>
js部分如下
var app=new Vue({
el:"#app",
data:{
city:"",
weatherArr:[]
},
methods: {
seachWeather(){
var that=this;
axios.get("http://ajax-api.itheima.net/api/weather?city="+ this.city).then(function(response){
that.weatherArr=response.data.data.data
console.log(that.weatherArr);
})
},
changeCity(city){
this.city=city;
this.seachWeather();
}
},
})