.div5{
justify-content: space-around;
flex-direction: column
}
.div5 div{
display: flex;
justify-content: space-around;
flex-basis: auto;
}
.div4{
justify-content: space-around;
flex-direction: column
}
.div4 div{
display: flex;
justify-content: space-around;
flex-basis: auto;
}
*{
padding: 0;
margin: 0;
text-decoration: none;
}
body{
background-color: black;
}
.headerbox,.banner,.tabtitle,.list,.footer{
width: 1024px;
margin: auto;
}
/* header */
.headerbox{
height: 78px;
background-color: white;
}
.navbox{
/* height: 78px; */
padding: 23px;
}
.navbox h1{
color: #0099f2;
float: left;
}
.navright{
float: right;
}
.on{
display: inline-block;
width: 120px;
height: 32px;
color: #0099f2;
background-color: #f0f9ff;
line-height: 32px;
text-align: center;
}
.on+a{
display: inline-block;
width: 120px;
height: 32px;
color:black;
line-height: 32px;
text-align: center;
}
/* banner */
.banner{
position: relative;
overflow: hidden;
height: 460px;
background-color: #008bed;
}
.container{
width: 964px;
height: 430px;
position: absolute;
bottom: 0px;
padding: 30px 30px 0px 30px;
}
.container img{
position: absolute;
bottom: -15px;
}
.content {
width: 43%;
padding-top: 100px;
float: right;
}
.content h2{
color:#fdfdfd;
font-size: 40px;
line-height: 40px;
padding-bottom: 10px;
}
.info{
width: 100%;
font-size: 16px;
line-height: 26px;
color: #99d1f8;
}
/* tabtitle */
.tabtitle{
width: 960px;
height: 100px;
padding-left: 32px;
padding-right: 32px;
background-color: rgb(249,249,249);
}
.tabtitle h3{
line-height: 100px;
font-size: 24px;
font-weight: 400;
color: #000;
float: left;
}
.tabtitle h4{
line-height: 100px;
font-weight: 500;
font-size: 24px;
color: #cccccc;
float: right;
}
/* list */
.list{
position: relative;
background-color: rgb(249,249,249);
height: 1718px;
padding-bottom: 30px;
}
.list ul{
list-style: none;
}
.list li{
/* display: inline-block; */
margin-left: 30px;
margin-bottom: 20px;
padding-top: 20px;
float: left;
background-color: white;
}
.list img{
display: block;
margin-top: 20px;
width: 260px;
height: 260px;
margin: auto;
}
.list a{
display: block;
width: 300px;
height: 374px;
}
.list p{
width: 260px;
font-size: 14px;
line-height: 25px;
color: #333333;
margin: auto;
}
.more{
position: absolute;
bottom: 30px;
width: 960px;
height: 62px;
left: 32px;
background-color: #e8eef2;
text-align: center;}
.more a{
display: block;
width: 100%;
line-height: 62px;
font-size: 20px;
color: #59abdf;
}
/* footer */
.footer{
height: 265px;
background-color: #e5e5e5;
}
.footerBox{
width: 960px;
padding: 32px;
}
.footerL{
width: 710px;
height: 210px;
float: left;
}
.footerL p{
font-size: 14px;
line-height: 25px;
margin-bottom: 15px;
color: #000;
}
.footerR{
float: right;
text-align: center;
}
.footerR img{
width: 141px;
height: 152px;
}
function getweather() {
//TODO:请补充代码
$.ajax({
type: “get”,
url: “js/weather.json”,
data: {},
dataType: “json”,
success: function (data) {
console.log(data.result)
$(“#Monday img”).attr(‘src’,data.result[0].weather_icon);
$(“#Monday .item-mess div:nth-child(1)”).prepend(data.result[0].weather);
$(“#Monday .item-mess div:nth-child(2)”).prepend(data.result[0].temperature);
$(“#Monday .item-mess div:nth-child(3)”).prepend(data.result[0].winp);
$(“#Monday .item-mess div span:nth-child(1)”).prepend(data.result[0].days);
$(“#Monday .item-mess div span:nth-child(2)”).prepend(data.result[0].week);
$(“#Tuesday img”).attr(‘src’,data.result[1].weather_icon);
$(“#Tuesday .item-mess div:nth-child(1)”).prepend(data.result[1].weather);
$(“#Tuesday .item-mess div:nth-child(2)”).prepend(data.result[1].temperature);
$(“#Tuesday .item-mess div:nth-child(3)”).prepend(data.result[1].winp);
$(“#Tuesday .item-mess div span:nth-child(1)”).prepend(data.result[1].days);
$(“#Tuesday .item-mess div span:nth-child(2)”).prepend(data.result[1].week);
$(“#Wednesday img”).attr(‘src’,data.result[2].weather_icon);
$(“#Wednesday .item-mess div:nth-child(1)”).prepend(data.result[2].weather);
$(“#Wednesday .item-mess div:nth-child(2)”).prepend(data.result[2].temperature);
$(“#Wednesday .item-mess div:nth-child(3)”).prepend(data.result[2].winp);
$(“#Wednesday .item-mess div span:nth-child(1)”).prepend(data.result[2].days);
$(“#Wednesday .item-mess div span:nth-child(2)”).prepend(data.result[2].week);
$(“#Thursday img”).attr(‘src’,data.result[3].weather_icon);
$(“#Thursday .item-mess div:nth-child(1)”).prepend(data.result[3].weather);
$(“#Thursday .item-mess div:nth-child(2)”).prepend(data.result[3].temperature);
$(“#Thursday .item-mess div:nth-child(3)”).prepend(data.result[3].winp);
$(“#Thursday .item-mess div span:nth-child(1)”).prepend(data.result[3].days);
$(“#Thursday .item-mess div span:nth-child(2)”).prepend(data.result[3].week);
$(“#Friday img”).attr(‘src’,data.result[4].weather_icon);
$(“#Friday .item-mess div:nth-child(1)”).prepend(data.result[4].weather);
$(“#Friday .item-mess div:nth-child(2)”).prepend(data.result[4].temperature);
$(“#Friday .item-mess div:nth-child(3)”).prepend(data.result[4].winp);
$(“#Friday .item-mess div span:nth-child(1)”).prepend(data.result[4].days);
$(“#Friday .item-mess div span:nth-child(2)”).prepend(data.result[4].week);
$(“#Saturday img”).attr(‘src’,data.result[5].weather_icon);
$(“#Saturday .item-mess div:nth-child(1)”).prepend(data.result[5].weather);
$(“#Saturday .item-mess div:nth-child(2)”).prepend(data.result[5].temperature);
$(“#Saturday .item-mess div:nth-child(3)”).prepend(data.result[5].winp);
$(“#Saturday .item-mess div span:nth-child(1)”).prepend(data.result[5].days);
$(“#Saturday .item-mess div span:nth-child(2)”).prepend(data.result[5].week);
$(“#Sunday img”).attr(‘src’,data.result[6].weather_icon);
$(“#Sunday .item-mess div:nth-child(1)”).prepend(data.result[6].weather);
$(“#Sunday .item-mess div:nth-child(2)”).prepend(data.result[6].temperature);
$(“#Sunday .item-mess div:nth-child(3)”).prepend(data.result[6].winp);
$(“#Sunday .item-mess div span:nth-child(1)”).prepend(data.result[6].days);
$(“#Sunday .item-mess div span:nth-child(2)”).prepend(data.result[6].week);
}
})
最后
喜欢的话别忘了关注、点赞哦~
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】