jquery-ui根据ip地址获取经纬度及天气预报卡片效果代码
代码语言:html
所属分类:其他
代码描述:jquery-ui根据ip地址获取经纬度及天气预报卡片效果代码
代码标签: jquery-ui ip地址 获取 经纬度 天气 预报 卡片
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/weather-icons.min.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Space+Mono');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:200,400,600,700,800');
body {
height: 100%;
background: #C95E67;
/* fallback for old browsers */
}
h1 {
font-family: 'Open Sans', Helvetica, sans-serif;
font-size: 29px;
color: #C95E67;
}
.text{
font-family: 'Space Mono', Helvetica, sans-serif;
font-size: 14px;
color: #333;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 100%;
margin: 40px 0px 10px 0;
}
.container-button {
display: grid;
grid-template-columns: 1fr;
margin-top: 10px;
}
.weather-icon,
.title{
grid-column: 1/4;
margin: 0 auto;
text-align: center;
background: #efefef;
border-radius: 4px;
padding: 15px 100px;
}
.important-info{
grid-column: 1;
}
.description-container{
background: #efefef;
border-radius: 4px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
width: 450px;
margin: 0 auto;
padding:20px 0px;
}
.block-1 {
grid-column: 1;
padding: 10px;
}
.block-2{
grid-column: 2;
padding: 10px;
}
.block-3{
grid-column: 3;
padding: 10px;
}
.weatherInfo {
height: 100%;
}
.temp-info {
font-family: 'Open Sans', Helvetica, sans-serif;
font-size: 65px;
color: #C95E67;
font-weight: 600;
}
.switch-button {
grid-column: 1 1 1;
border-radius: 4px;
margin: 0 auto;
width: 400px;
height: 40px;
text-align: center;
position: relative;
will-change: transform;
z-index: 197 !important;
cursor: pointer;
-webkit-transition: .3s ease all;
transition: .3s ease all;
border: 1px solid #efefef;
display: inline-block;
}
.switch-button-case {
display: inline-block;
background: none;
width: 49%;
height: 100%;
color: #efefef;
position: relative;
border: none;
-webkit-transition: .3s ease all;
transition: .3s ease all;
text-transform: uppercase;
letter-spacing: 5px;
padding-bottom: 1px;
}
.switch-button-case:hover {
color: #151515;
cursor: pointer;
}
.switch-button-case:focus {
outline: none;
}
.active {
position: absolute;
color: #151515;
background-color: #efefef;
left: 0;
top: 0;
width: 50%;
height: 100%;
z-index: -1;
-webkit-transition: .3s ease-out all;
transition: .3s ease-out all;
}
.switch-button .active-case {
color: #151515;
}
.signature {
position: fixed;
font-family: sans-serif;
font-weight: 100;
bottom: 10px;
left: 0;
letter-spacing: 4px;
font-size: 10px;
width: 100vw;
text-align: center;
color: #efefef;
text-transform: uppercase;
text-decoration: none;
}
</style>
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0