简单的web天气预报界面制作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>练习</title>


 

   <link rel="stylesheet" href="css/style.css">

    

 

</head>

<body>

   <h1>炎热!广东雷州半岛局地最高温可达37℃ 有分散性雷阵雨</h1>

   <div class="date">

       2019-07-03 16:31:47 来源:<a href="#">中国天气网</a>

       <input type="text" value="请输入查询条件"> <button id="search">搜索</button>

   </div>

   <hr>

   <p>

    中国天气网讯 今天(25日)开启了端午假期,总体来看,端午假期期间多地雨水在线,

    贵州到江南一带降雨先强后弱,四川盆地、黄淮等地降雨则是假期后段明显增强,

    此外东北、华北等地多阵雨或雷阵雨。气温方面,江南南部、华南一带闷热持续,

    北方多地气温则多波动。

   </p>

 

   <h4>局部有强降雨</h4>

    <p class="tupian">

        <img src="img/天气.jpg" alt="夏至">

    </p>

   <p>

    6月20日以来,贵州、重庆至长江中下游一带经历了入汛以来最强降雨过程,这轮强降雨过程的特点是持续时间长、强度大等。昨天,强降雨还在持续,贵州东南部、广西中部、湖南中南部、江西中北部、安徽东南部、浙江北部和东部、福建西北部及云南西北部等地出现大到暴雨中部、江西中部及贵州黔南州和黔东南州、湖南怀化和长沙等局地大暴雨,广西百色局地特大暴雨(316毫米),广西柳州和百色局地最大小时降雨量104~107毫米;山西中南部、河北、北京南部和西北部等地部分地区降中到大雨,河北承德、石家庄局地暴雨,山西长治局地大暴雨(127毫米)。

   </p>

   <h4>降雨持续增多</h4>

   <p>

    今天,广西、湖南等地部分地区强降雨持续,雨带东段强降雨范围收缩。明后天,江南华南降雨逐渐减弱停歇,但西北地区东部、四川盆地、黄淮等地降雨增多增强。

   </p>

   <p>

    同时,受到冷涡系统影响,端午假期期间,华北、东北部分地区多阵雨或雷阵雨天气,局地还可能会伴有冰雹、短时强降水等强对流天气。

   </p>

  <p>

    具体来看,今天,甘肃南部、河北东部、山东西北部、辽宁东部、广西中东部、湖南南部、广东北部、江西西部和东北部、福建西北部、浙江中西部、上海、云南西部和南部、西藏东南部等地的部分地区有大到暴雨,其中,广西东北部局地有大暴雨(100~150毫米)。

  </p>

  <p class="footer">

    转载请注明“来源:中国天气网” 

  </p>

  

   

 

</body>

</html>

 

 

h1{

    text-align: center;

    font-weight: 400;

}

body{

    font: 16px/28px "microsoft yahei"

 

}

.date {

    color: #888888;

    font-size: 12px;

    text-align: center;

   

}

a {

    text-decoration: none;

}

input {

      color: #666666;

      font-size: 12px;

      width: 170px;

}

.search {

    color: #000;

    font-weight: 700;

    

}

p {

    text-indent: 2em;

}

.tupian {

    text-align: center;

}

.footer {

    color: #888888;

    font-size: 12px;

}

 

 

 

   

 

 

 

 

 

### 回答1: 您好,可能是以下原因导致HBuilder插入的图片无法显示: 1. 图片路径错误:请检查图片路径是否正确,是否存在该图片文件。 2. 图片格式不支持:请确保插入的图片格式是网页支持的格式,如JPEG、PNG等。 3. 图片大小过大:如果图片过大,可能会导致加载时间过长或者无法加载,请尝试压缩图片大小。 4. 服务器问题:如果您是从服务器上获取图片,请确保服务器正常运行,图片文件没有被删除或移动。 希望以上信息能够帮助您解决问题。如果还有其他问题,请随时联系我们。 ### 回答2: Hbuilder是一款非常强大的前端开发工具,可以帮助我们快速开发和部署网站。然而,有时候我们会发现,使用Hbuilder插入图片到网页中,却无法正常显示。以下是一些可能导致这种问题的原因和解决方法: 1. 图片路径错误:最常见的问题就是图片路径错误。当我们在Hbuilder中插入图片时,需要注意图片的路径是否正确。如果路径错误,就无法正常显示图片。因此,我们需要确保图片的路径是正确的,可以使用相对路径或绝对路径。 2. 图片格式错误:另一个常见的问题就是图片格式错误。Hbuilder支持多种图片格式,如jpg、png和gif等,但不是所有浏览器都支持所有的图片格式。如果图片格式不受支持,就无法正常显示图片。因此,我们需要确保所使用的图片格式是符合浏览器要求的。 3. 服务器问题:有时候,我们将网站部署到服务器上后,图片也无法正常显示。这可能是因为服务器没有正确设置图片目录的权限。我们需要确保服务器上的目录权限设置正确,以便可以读取和显示图片。 4. 缓存问题:在浏览器中,有时候会出现缓存问题。浏览器会缓存网页中的图片,这可能导致图片无法及时更新。我们可以尝试清除浏览器缓存,或者通过使用版本控制工具,确保图片及时更新。 总之,Hbuilder插入图片无法显示的问题可能由多种原因引起,我们需要仔细检查和排除这些可能性,以便解决这个问题。一旦我们找到了问题所在,就可以采取相应的措施,确保图片能够正常显示。 ### 回答3: Hbuilder 是一款兼容多语言的 HTML5 手机应用开发工具,其内置的代码编辑器、调试工具和代码片段库等功能深受开发者的喜爱。在开发网页时,出现插入图片后无法显示的情况,可能是多种原因导致的。下面我们就来分享一些解决方法。 第一种可能的原因是文件路径错误。当你插入一张图片时,图片所在的路径必须要正确,才能够在网页中正常显示。这就需要你仔细检查你的文件路径是否正确,保证图片文件所在的路径和网页中的路径保持一致。 第二种可能的原因是图片格式不支持。Hbuilder 可支持常见的图片格式如 .jpg、.png、.gif 以及 .bmp 等。如果你插入的是其他格式的图片,则会导致无法正常显示。这时你可以尝试将图片转换为支持的格式。 第三种可能的原因是图片文件本身损坏或不完整。这点就需要你使用专业的图片处理软件将图片进行修复或重新编辑。如果仍无法解决问题,可以考虑替换一张相同格式的图片再进行测试。 第四种可能的原因是浏览器缓存。有时候,插入图片时由于浏览器缓存的原因也会导致无法正常显示,可以尝试清除浏览器缓存并重新加载网页。 总之,以上是插入图片无法显示的几种可能原因和解决方法,希望能够解决大家的问题。提示大家在使用 Hbuilder 开发网页时,要仔细检查网页的代码和文件路径等细节方面,这样可以有效地减少问题的出现。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值