第十三届蓝桥杯Web模拟赛题解(2)

.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;

}

响应式 Gulp 中文网

---

天气预报查询

---

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);

}

})

最后

喜欢的话别忘了关注、点赞哦~

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】