H5学习之制作天气页面

黄良钵

分类: 程序开发 195 0

天气页面

制作个天气页面,静态页面做好了,可以没找到合适的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
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
H5学习、linear-gradient

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “H5学习之制作天气页面”

Loading...