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>

<!--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>

心得

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