当前位置:   article > 正文

HTML作业天气预报界面_天气预报的html代码

天气预报的html代码

界面展示

在这里插入图片描述


作业要求:

提示:这里填写问题的分析:

利用天气查询程序实现静态界面


代码:

提示:这里填写该问题的具体解决方案:

<!--viewport 视口-->
<!--width 设置视口宽度-->
<!--user-scalable 网页是否可以被缩放-->
<!--initial-scale 网页被加载时,初始的比例-->
<!--maximum-scale 网页最大的放大比例-->
<!--minimum-scale 网页最小的缩放比例-->
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<!--title 标题标签-->
<title>天气预报</title>
<style>
    html{
        height: 100%;
    }
    body{
        margin: 0;

        height: 100%;

        display: flex;

        flex-direction: column;


        text-align: center;

        background-image: url(img/017dc05d5ccd2aa80120695c67ba92.png@1280w_1l_2o_100sh.png);
        background-repeat: no-repeat;
        background-size: cover;
        justify-content: space-between;


    }
    .st{
        position: absolute;
        left: 300px;
        top: 100px;
    }
    .day{
        position: absolute;
        left: 300px;
        top: 25px; 
        color: white;
    }
    .qw{
        font-size: 80px;
        color: white;
    }
    .zt{
        color: aliceblue;
    }
    .dq{
        color: aliceblue;

    }
    img{
        /*width: 设置图片显示宽度,高度会自适应*/
        width: 80px;
    }
    footer{
        color: white;
        /*display: flex 将该标签作为弹性布局的容器*/
        display: flex;
        /*设置item的布局方式*/
        justify-content: space-between;
    }
    footer section{

        width: 20%;
        border-right: 1px black solid;
    }
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
<!--header 网页中的头部内容-->

<!--main 块元素 标记网页中的主要内容-->
<main>
    <!--img 标记网页中的图片-->
    <!--src source 图片来源-->
    <!--alt alter 当图片未被加载出来时,以文本方式代替图片显示-->
    <!--title 当鼠标停留在图片上时,展示的文本-->
    <h1 class="dq">上海市</h1>
    <p class="zt">今天白天</p>
    <p class="qw">27℃</p>
    <img src="img/天气.png" alt="qing.png" class="st">
    <!--h1~h6 标题标签, 标签独自占一行空间,称之为块元素-->
    <p class="zt">多云</p>
    <!--p标签,用来标记网页中的段落内容!-->
    <p class="zt">东北4级</p>
    <p class="day">2018年09月10日星期一</p>
</main>

<!--footer 网页中的尾部内容-->
<footer>
    <!--section 组件、模块, 块元素-->
    <section>
        <p>今天夜晚</p>
        <img src="img/阴天.png" alt="">
        <p>30℃</p>
        <p>阴</p>
        <p>东北4级</p>
    </section>
    <section>
        <p>09月11日 星期二</p>
        <img src="img/小雨.png" alt="">
        <p>24~28℃</p>
        <p>小雨</p>
        <p>东北5级</p>
    </section>
    <section>
        <p>09月12日 星期三</p>
        <img src="img/多云.png" alt="">
        <p>27~30℃</p>
        <p>多云</p>
        <p>东北4级</p>
    </section>
    <section>
        <p>09月13日 星期四</p>
        <img src="img/多云 (1).png" alt="">
        <p>27~30℃</p>
        <p>多云</p>
        <p>东北4级</p>
    </section>
</footer>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

心得

刚开始学习html与css时,遇到很多困难,有很多不会的,如直接复制相对路径上去,图片不会显示,要注意\与/,终究是完成自己的第一个html静态页面。

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号