jquery-ui根据ip地址获取经纬度及天气预报卡片效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：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>



</head>

<body  >
  <div class="container">
  <div class="title">
    <h1 id="city"></h1>
    <div id="graphic" class="weather-icon"></div>
    <div id="description" class='important-info text'></div>
    <div id="farenheit" class="temp-info"></div>
    <div id="celsius" class="temp-info"></div>
  </div>
</div>
<div class="description-container">
  <div class="block-1">
    <div class="text">
      <span>Max</span>
      <span id="max" class="important-info"> </span>
    </div>
    <div class="text">
      <span>Min</span>
    <span id="min" class='important-info'> </span>
    </div>
    
  </div>
  <div class="block-2">
    <div id="longitude" class=" text important-info">Lon: </div>
    <div id="latitude" class="text important-info">Lat: </div>
  </div>
  <div class="block-3">
    <div id="humidity" class="text important-info">Humidity: </div>
    <div id="pressure" class="text important-info">Pressure: </div>
    <div id="windSpeed" class="t.........完整代码请登录后点击上方下载按钮下载查看