• 当前标签:linear-gradient

程序开发 H5学习之制作天气页面

制作个天气页面,静态页面做好了,可以没找到合适的api,所以那个js文件没写完。 代码呈上: <html> <head>     <meta charset="UTF-8">     <title>天气</title>     <style>         body{             width: 100%;             height: 100%;             margin: 0;             background-color: rgb(114, 173, 224);             background-image: linear-gradient(to bottom,rgb(12,104,188),rgb(114, 173, 224));         }         header{             text-align: center;             color: white;             font-size: 19px;             line-height: 50px;          }         main .icon{             height: 128px;             background-image: url(days/fog.png);             background-repeat: no-repeat;             background-position: center center;             margin: 40px;         }         main .tempers{             text-align: center;             color: white;             font-size: 30px;             font-family: 'Arial';         }         main sup{             font-size: 19px;         }         main .weather{             text-align: center;             color: white;             font-size: 17px;         }         main .wind{             text-align: center;             color: white;             font-size: 13px;             line-height: 200%;         }         main .current{             text-align: center;             color: white;             font-size: 17px;         }         footer{             width:90%;             color: white;             margin: 100px auto;             font-size: 13px;             text-align: center;         }         section{             width: 33.33333333333333333333333333333333333333333333333333333333333333333333333333333333%;             border-right: 1px solid #aaf;             float: left;             box-sizing: border-box;         }         section:nth-child(3){             border: none;         }         section .icon{             height: 60px;             background-image: url(days/qing.png);             background-repeat: no-repeat;             background-size: 60px;             background-position: center center;             margin: 15px 0;             opacity: 0.7;         }     </style> </head> <body>     <header>海口市</header>     <main>         <div class="icon"></div>         <div class="tempers"><span>-13-2</span><sup>℃</sup></div>         <div class="weather">小雪</div>         <div class="wind">微风</div>         <div class="current">实时温度:13℃,空气指数 135 轻度污染</div>     </main>     <footer>         <section>             <div class="week">周三</div>             <div class="icon"></div>             <div class="temper">13-5℃</div>             <div class="weather">晴</div>             <div class="wind">微风</div>         </section>         <section>             <div class="week">周四</div>             <div class="icon"></div>             <div class="temper">13-5℃</div>             <div class="weather">晴</div>             <div class="wind">微风</div>         </section>         <section>             <div class="week">周五</div>             <div class="icon"></div>             <div class="temper">13-5℃</div>             <div class="weather">晴</div>             <div class="wind">微风</div>         </section>     </footer>     <script src="jquery.js"></script>     <script src="index.js"></script> </body> </html> 素材下载:2017-03-15weather

2017-03-15 19:42:00 76 0 0
阅读详情
  • 1
前往