one_world-one_dream
one_world-one_dream

天气预报静态页面代码

 

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>天气预报title>
head>
<style>
    html {
        height: 100%;
    }
    
    body {
        /*background-color: blue;*/
        overflow: hidden;
        height: 100%;
        color: white;
        background-image: linear-gradient( to bottom, dodgerblue, deepskyblue);
    }
    
    p {
        margin: 0px;
    }
    
    #one {
        font-size: 40px;
        text-align: center;
        margin-top: 15px;
    }
    
    #two {
        margin-top: 100px;
        text-align: center;
    }
    
    #three {
        margin-top: 100px;
        /*text-align: center;*/
    }
    
    #a {
        width: 33%;
        float: left;
        text-align: center;
    }
    
    #b {
        float: left;
        text-align: center;
        width: 33%;
        border-left:solid 1px white;
        border-right:solid 1px white;

    }
    
    #c {
        float: right;
        text-align: center;
        width: 33%;
    }
style>

<body>
    <div id="one"> 郑州div>
    <div id="two">
        <img src="cloudy1.png" alt="">
        <p>16~25℃p>
        <p>晴转多云p>
        <p>微风p>
        <p>实时温度20℃ 空气指数79 良p>
    div>
    <div id="three">
        <section id="a">
            <p>周三p>
            <img src="mist.png" alt="">
            <p>16~32℃p>
            <p>雾p>
        section>
        <section id="b">
            <p>周四p>
            <img src="overcast.png" alt="">
            <p>16~32℃p>
            <p>多云p>
        section>
        <section id="c">
            <p>周五p>
            <img src="lingxingxiaoyu.png" alt="">
            <p>16~32℃p>
            <p>小雨p>
        section>
    div>
body>

html>

你可能感兴趣的:(web前端)